UIKit Animating different views from one view controller to another view controller

40 views Asked by At

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)
    }
}
0

There are 0 answers