I'm currently working on creating an animation in UIKit, and I'd like to explain my goal.
In my first view controller, I have a layout that includes a horizontal stack view and an image view.
When a user taps on a cell, I'd like to create an animation where the image smoothly expands and moves to the second view controller. Simultaneously, I want the horizontal stack view from the first view controller to smoothly transition into a vertical stack view on the second view controller. Additionally, I'd like to incorporate a smooth zoom-in transition to the next view controller screen.
How can I go about creating this animation?
class ViewController: UIViewController {
var container: UIStackView = {
let stackView = UIStackView()
stackView.axis = .horizontal
stackView.spacing = 5
stackView.distribution = .fillProportionally
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.isUserInteractionEnabled = true
stackView.backgroundColor = .black.withAlphaComponent(0.35)
return stackView
}()
let elements: [String] = ["❤️", "", "", "", "", "", "", "", ""]
override func viewDidLoad() {
super.viewDidLoad()
elements.forEach { emoji in
let label = UILabel()
label.text = emoji
container.addArrangedSubview(label)
}
view.addSubview(container)
NSLayoutConstraint.activate([
container.leftAnchor.constraint(equalTo: view.leftAnchor),
container.rightAnchor.constraint(equalTo: view.rightAnchor),
container.widthAnchor.constraint(equalToConstant: container.intrinsicContentSize.width),
container.heightAnchor.constraint(equalToConstant: 50),
container.centerXAnchor.constraint(equalTo: view.centerXAnchor),
container.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(tap))
container.addGestureRecognizer(tapGesture)
}
@objc func tap() {
let animationController = AnimationController()
animationController.modalPresentationStyle = .overFullScreen
self.present(animationController, animated: true)
}
}
class AnimationController: UIViewController {
var transitionStackView: UIStackView = {
let stackView = UIStackView()
stackView.axis = .vertical
stackView.spacing = 5
stackView.distribution = .fillProportionally
stackView.translatesAutoresizingMaskIntoConstraints = false
return stackView
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .gray.withAlphaComponent(0.45)
view.addSubview(transitionStackView)
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(dismissController))
view.addGestureRecognizer(tapGesture)
NSLayoutConstraint.activate([
transitionStackView.leftAnchor.constraint(equalTo: view.leftAnchor),
transitionStackView.rightAnchor.constraint(equalTo: view.rightAnchor),
transitionStackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: -50), // Initial position above the screen
])
}
@objc func dismissController() {
// Dismiss the view controller when tapped
dismiss(animated: true, completion: nil)
}
}