How do I animate child view controllers when adding to/removing from a container view controller?

Question

I have the following 2 functions that add and remove child view controllers triggered from a container view controller:

@discardableResult func addChildViewController(withChildViewController childViewController: UIViewController) -> UIViewController {
    // Add Child View Controller
    addChildViewController(childViewController)
    childViewController.beginAppearanceTransition(true, animated: true)
    // Add Child View as Subview
    view.addSubview(childViewController.view)
    // Configure Child View
    childViewController.view.frame = view.bounds
    childViewController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    // Notify Child View Controller
    childViewController.didMove(toParentViewController: self)
    return childViewController
}
@discardableResult func removeChildViewController(withChildViewController childViewController: UIViewController) -> UIViewController {
    // Notify Child View Controller
    childViewController.willMove(toParentViewController: nil)
    childViewController.beginAppearanceTransition(false, animated: true)
    // Remove Child View From Superview
    childViewController.view.removeFromSuperview()
    // Notify Child View Controller
    childViewController.removeFromParentViewController()
    return childViewController
}

The functions above are extensions to UIViewController, so all I'm doing is self.addChildViewController() and self.removeChildViewController() on the parent view controller.

How do I animate the view being removed on its way out and the view being added on its way in?

Do you have multiple child controllers & try to switch in betweens Or only single one? — Sagar Thummar
I have multiple child view controllers, but at any given time, I'm adding one and removing the last one. — John Doe
Which animation do you want when child view controller added? — Chetan kasundra
Any works as an example. Let's work with fade – so the child VC that is removed will fade out while the child VC that is added will fade in. — John Doe

Sagar Thummar Sagar Thummar · Accepted Answer · 2017-06-26T05:07:48

Animating between different child view controllers:-

func cycleFromViewController(oldViewController: UIViewController, toViewController newViewController: UIViewController) {
    oldViewController.willMove(toParentViewController: nil)
    newViewController.view.translatesAutoresizingMaskIntoConstraints = false

    self.addChildViewController(newViewController)
    self.addSubview(subView: newViewController.view, toView:self.containerView!)

    newViewController.view.alpha = 0
    newViewController.view.layoutIfNeeded()

    UIView.animate(withDuration: 0.5, delay: 0.1, options: .transitionFlipFromLeft, animations: { 
        newViewController.view.alpha = 1
        oldViewController.view.alpha = 0
    }) { (finished) in
        oldViewController.view.removeFromSuperview()
        oldViewController.removeFromParentViewController()
        newViewController.didMove(toParentViewController: self)
    }
}

In above,

oldViewController:- Current displayed child viewController
newViewController:- New child view controller that will going to add
containerView:- A view in which all child controllers are displaying.

To animate child view, you can use different type of animation style by replacing transitionFlipFromLeft to available UIViewAnimationOptions according requirement.

How do I animate child view controllers when adding to/removing from a container view controller?

2 Answers