How to develop an animator (animation controller)

To support custom transition animation, we need to develop animator (animation controller). It is every easy to develop animators.

1. Define an animation or a set of animations in TransitionAnimationType, e.g. Fade, FadeIn

2. Add parsing logic in static func fromString(transitionType: String) -> TransitionAnimationType? in TransitionAnimationType to support the new transition animation type.

3. Create an animator class under "IBAnimatable" -> "animator" -> "transition animator"

4. Name it as ***Animator like FadeAnimator

5. Inherit from NSObject and confirm to AnimatedTransitioning like public class FadeAnimator: NSObject , AnimatedTransitioning

6. Override properties, if it has a different transition duration, specify it like transitionDuration = 0.8, otherwise, set it as defaultTransitionDuration. If this animation supports gesture to dismiss or pop, specify it in interactiveGestureType, otherwise, let it blank.

// MARK: - AnimatorProtocol
public var transitionAnimationType: TransitionAnimationType
public var transitionDuration: Duration = defaultTransitionDuration
public var reverseAnimationType: TransitionAnimationType?
public var interactiveGestureType: InteractiveGestureType? = .PanHorizontally

1. Implement init method to specify the reverseAnimationType if it has one.

2. Use protocol extension to override two methods. like extension FadeAnimator: UIViewControllerAnimatedTransitioning

3. For transitionDuration, we can just use

public func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
  return retrieveTransitionDuration(transitionContext)
}

1. Implement animateTransition, it is the creative bit, we always implement this method differently to support different animations, we will spend most of time on this.

2. Add new switch case(s) in AnimatorFactory to support new animation(s).

3. Add new animation(s) to the demo app in func generateTransitionTypeData() in TransitionTableViewController.

transitionAnimationsHeaders.append("SystemFlip")
transitionAnimations.append(transitionTypeWithDirections(forName: "SystemFlip"))
transitionAnimationsHeaders.append("SystemPageCurl")
transitionAnimations.append(["SystemPageCurl(Top)", "SystemPageCurl(Bottom)"])

1. Now, we should be able to see the new animations in the demo app, just tap on "Forgot password". And test it carefully.

1. If you are happy with the animation. Create segue(s) for it. e.g. PresentFadeSegue and PresentFadeInSegue to support segue for present and dismiss transitions.

2. If the animation can support gesture to dismiss, create segue(s) for it with interaction support. e.g. PresentFadeWithDismissInteractionSegue and PresentFadeInWithDismissInteractionSegue

FadeAnimator is a good example we can follow.

If you have any questions, please let me know.

Have fun!!! 👯👯👯