Animation Transitions

In the previous two sections, we learned how to create animations based on attributes (eg. Postion and alpha), but what if we want to animate while adding and removing views?

In this section, we look at Transitions animations, which address the issues raised above.

Transitions are predefined animations that can be applied to views. These predefined animations do not attempt to insert between the start and end states of the view. Instead, we can customize the animation to make the various changes of state look elegant and natural.

To animate a new view added to the screen, you can call a method like addSubview(View). However, the difference with the transition animation is that we can select a predefined transition effect and apply it to the Animation Container View.

The container view and its child views animate when the transition animation executes.


var animationContainerView: UIView!

override func viewDidLoad() { 
     super.viewDidLoad() //set up the animation container      
     animationContainerView = UIView(frame: view.bounds) 
     animationContainerView.frame = view.bounds      
     view.addSubview(animationContainerView) 
}

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

    //  create new view 
    let newView = UIImageView(image: UIImage(named: "banner")) newView.center = animationContainerView.center // add the new view via transition UIView.transition(with: AnimationContainerView, duration: 0.33, the options: [. CurveEaseOut,. TransitionFlipFromBottom], animations: { self.animationContainerView.addSubview(newView) }, completion: nil) }Copy the code

We call the transition (with: duration: options: animations: completion:) to create the transition animation.

The predefi Ned Transitions option has the following options:

  • .transitionFlipFromLeft
  • .transitionFlipFromRight
  • .transitionCurlUp
  • .transitionCurlDown
  • .transitionCrossDissolve
  • .transitionFlipFromTop
  • .transitionFlipFromBottom

Here is an example of adding a view. If you delete a view, you can do this:

// remove the view via transition uiView. transition(with: animationContainerView, duration: 0.33, options: [.curveEaseOut, .transitionFlipFromBottom], animations: { self.newView.removeFromSuperview() }, completion: nil )Copy the code

Hiding/showing a view

// Hide the view via transition uiview. transition(with: self.newView, duration: 0.33, options: [.curveEaseOut, .transitionFlipFromBottom], animations: { self.newView.isHidden =true 
}, completion: nil )
Copy the code

Replacing a View with another View might work like this:

//replace via transition uiview. transition(from: oldView, to: newView, duration: 0.33, options: .transitionFlipFromTop, completion: nil)Copy the code

Transitions are the only way you can create 3D animations in UIKit.

Attached: wonderful demo download

Reference:

  1. IOS View Controller transition details
  2. Summary of iOS custom Transitions Animation