How to animate cross dissolve a view when added as a subview?

Question

I am adding a view as a subview in a UIViewController at the bottom of the current view. I am able to do fade animation using alpha, but I wanted to show it like slide in like a keyboard popup.

let popup: UIView = ..
popup.alpha = 0.0
self.view.addSubView(popup)
UIView.animate(withDuration: 0.3, animations: {
    popup.alpha = 1.0
}) { _ in
}

How to animate this?

Cross dissolve is a fade in/out like you have already. You want to animate the view in from off the bottom of the screen to its final location? — Daniel Storm, Oct 24 '19 at 19:13
No a cross dissolve is not the same as a fade in. You need to also fade out the view underneath. — Josh Homann, Oct 24 '19 at 19:15
@Daniel Storm: Yes, similar to when a keyboard popup. The keyboard slides in from the bottom and slides out. I am looking for a similar animation. — John Doe, Oct 24 '19 at 19:15
@JoshHomann there’s no mention of another view in this question. — Daniel Storm, Oct 24 '19 at 19:15
@DanielStorm it clearly says the view is being added over the current view controller. — Josh Homann, Oct 24 '19 at 19:16
@jsloop you’ll want to change your views frame in that animation block also then. Or if you’re using auto layout, it’s constraints. — Daniel Storm, Oct 24 '19 at 19:16
Possible duplicate of [How to animate a UIView with constraints in Swift?](https://stackoverflow.com/questions/27371935/how-to-animate-a-uiview-with-constraints-in-swift) — Daniel Storm, Oct 24 '19 at 19:19
I think the question is inaccurate. You already have a sort of cross dissolve, right? You're looking for a slide-in effect. — kid_x, Oct 24 '19 at 19:36

score 1 · Accepted Answer · answered Oct 24 '19 at 19:21

You could update the frame, but I like to animate using the transform, that way you can still use constraints and don't have to mess with them.

let popup: UIView = ..
popup.transform = CGAffineTransform(translationX: 0, y: popup.bounds.height)
self.view.addSubView(popup)
UIView.animate(withDuration: 0.3, animations: {
    popup.transform = .identity
}) { _ in
}

Assuming the view is at the bottom of the screen, you translate the view down by an amount equal to its height, and then animate the transform back to it's identity, which is the original position.

kid_x · Answer 2 · 2019-10-24T19:40:03.177

To achieve a cross-fade by merely adding a subview, try UIView.transition(with:duration:options:animations:completion:) Add your view during the animation block.

A quick playground:

//: A UIKit based Playground for presenting user interface

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white

        let label = UILabel()
        label.frame = CGRect(x: 150, y: 200, width: 200, height: 20)
        label.text = "Hello World!"
        label.textColor = .black

        view.addSubview(label)
        self.view = view
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        let orangeView = UIView(frame: CGRect(origin: CGPoint(x: view.bounds.midX, y: view.bounds.midY), size: CGSize(width: 100, height: 100)))

        orangeView.backgroundColor = .orange
        DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(300)) {
            UIView.transition(with: self.view, duration: 0.6, options: .transitionCrossDissolve, animations: {
                self.view.addSubview(orangeView)
            }) { _ in

            }

        }
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

How to animate cross dissolve a view when added as a subview?

2 Answers2