Custom Subview Transitions – Fade Animation

Tram Ho

Development environment:

  • Swift Language Version: Swift 5.0
  • Xcode: Version 11.1
  • Deployment Target: 11.2


Today’s article I will share about how to use custom transition animation for subviews (also called sub views). We will use container view for animations to avoid potential errors when we animating subviews and mainview simultaneously.

  1. Create snapshots of the subviews from “from” view and then hide those subviews.
  2. Create snapshots of the “views” subviews and then hide those subviews.
  3. Convert all frame’s values ​​to container view coordinates and add all snapshots to the container view.
  4. Start “to” snapshots with alpha = 0 (fade in)
  5. Animate the changes to “to” snapshots from alpha = 0 to 1.
  6. Also animate the “from” snapshots to the final position of the “to” view and animate their alpha values ​​from 1 to 0 (fade out). Combine with step 4 to create a cross dissolve effect.
  7. Once all the above steps have been done, remove all snapshots and unhide the subviews that their snapshots are animated.

Step 1: Initialize the screen

Step 2: Initialize protocols

  • fromAnimatedSubviews : contains subviews of “from” views that are animated.
  • toAnimatedSubviews : contains subviews of “to” views that are animated.

Step 3: Extension UIView

  • The zo_snapshot () function returns a snapshot of type UIImage.
  • The snapshotView () function returns the snapshotView of type UIView.

Step 4: Subviews animation transition

UIKit allows customizing view controller’s presentation through UIViewControllerAnimatedTransitioning delegate with two main functions:

  • transitionDuration (using:): The function takes information about the time the transition animations takes place. The return value must be the same as the value you used to configure animations in the animateTransition function (using:) .
  • animateTransition (using:): Function that allows config transition animations and is called when presenting or dismissing view controller.


  • fromView : is the view that appears at the beginning of the transition, or at the end of the cancel transition. For example, when presenting, fromView is the view of viewController1, while when dismissing, fromView is the view of viewController2.
  • toView : is the view that appears at the end of the completed transition.
  • container : acts as a superview containing the views involved in the transition.
  • TransitionType : enum represents types of transitions.
  • completeTransition () : The function informs the system that the transition animation has completed.

Step 5: Custom navigation controller

  • The navigationController (_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) will return the view controller’s presentation in the event of a push or dismiss.

Step 6: MainViewController and DetailViewController

The two viewController apply CustomTransitionOriginator and CustomTransitionDestination to select subviews that are animated when custom transitions are executed.



Link github

Share the news now

Source : Viblo