How to flip a UIView with a 3D effect: transition(with:)

Paul Hudson    October 26th 2018    @twostraws

iOS has a built-in way to transition between views, and you can use this to produce 3D flips in just a few lines of code. Here's a basic example that flips between two views:

@objc func flip() {
    let transitionOptions: UIView.AnimationOptions = [.transitionFlipFromRight, .showHideTransitionViews]

    UIView.transition(with: firstView, duration: 1.0, options: transitionOptions, animations: {
        self.firstView.isHidden = true
    })

    UIView.transition(with: secondView, duration: 1.0, options: transitionOptions, animations: {
        self.secondView.isHidden = false
    })
}

Here's a basic test harness you can use to see that method in action:

var firstView: UIView!
var secondView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()

    firstView = UIView(frame: CGRect(x: 32, y: 32, width: 128, height: 128))
    secondView = UIView(frame: CGRect(x: 32, y: 32, width: 128, height: 128))

    firstView.backgroundColor = UIColor.red
    secondView.backgroundColor = UIColor.blue

    secondView.isHidden = true

    view.addSubview(firstView)
    view.addSubview(secondView)

    perform(#selector(flip), with: nil, afterDelay: 2)
}

Try experimenting with the different values of UIView.AnimationOptions to see what other animations are available.

Available from iOS 2.0

Did this solution work for you? Please pass it on!

Tweet

Other people are reading…

• How to load a HTML string into a WKWebView or UIWebView: loadHTMLString()
• How to use UIActivityIndicatorView to show a spinner when work is happening
• How to hide passwords in a UITextField
• How to hide the navigation bar using hidesBarsOnTap
• How to create Auto Layout constraints in code: constraints(withVisualFormat:)

About the Swift Knowledge Base

This is part of the Swift Knowledge Base, a free, searchable collection of solutions for common iOS questions.