Animation and Transitions pt. 2: iOS

Transitions and animations are common in mobile apps, but what most people do not notice is that they actually go hand-in-hand in providing a premium experience for users. From how these animations can smoothly move the user from one view to another, they convey to the user that an action was done and as such it must move to another view.

Animations and transitions have existed before in iOS since its early stages, but on this blog, I will explain the process of how it works for Swift 3.0 and iOS 10.0+. On the newer versions of iOS, creating animations has been expanded vastly, allowing the developer to specify how long the animation is, from what direction it comes from, even including the style of how it animates. Developing it has also never been easier with preset methods already present.

Getting Started

Start Xcode 9.0 with Swift and create 2 view controllers on the Main storyboard. Here, you need to add a button on the 1st and 2nd view controller. Using control+click, drag the button on the 1st view controller towards the 2nd view controller and choose ‘Present Modally’.

On your ViewController.swift file, add the method:

@IBAction func unwindToViewController (sender: UIStoryboardSegue){

}

Then on the 2nd view controller, control+click and drag the button to the ‘Exit’ and select unwindToViewControllerWithSender.

This is the basic setup for our project. What it basically does is that, when the user clicks on the button on the 1st view controller, it will transition to the 2nd view controller with a basic animation where the 2nd view appears from bottom to the top. On the other hand, clicking the button on the 2nd view exits the 2nd view with an animation from top to bottom.

Pretty basic, right? Well, not for long. Now let’s add some custom transitions.

Adding up the Transitions

For us to do that, we need to first create a new CocoaTouch file and name it TransitionManager of NSObject subclass. Here, you should be able to see this

class TransitionManager: NSObject

Let’s change that class to

class TransitionManager: NSObject, UIViewControllerAnimatedTransitioning, UIViewControllerTransitioningDelegate

Setup Methods

Once that is already set, we need to add the following methods:

  • This method sets the animator to use when the view is presented
func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return self
}
  • This method sets the animator to use when the view is dismissed
func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return self
}
  • This method sets how long the animation will be
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 0.5
}
  • This is the main method where the animation for the transition occurs
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
//Input code to animate view here
}

The animateTransition Method

Now that we’ve added the methods, let’s focus on the animateTransition method since the gist of our custom animation is concentrated in this method. Add these codes inside animateTransition:

guard let fromView = transitionContext.view(forKey: UITransitionContextViewKey.from) else {
return
}

guard let toView = transitionContext.view(forKey: UITransitionContextViewKey.to) else {
return
}

let container = transitionContext.containerView
let screenOffLeft = CGAffineTransform(translationX: -container.frame.width, y: 0)
let screenOffRight = CGAffineTransform(translationX: container.frame.width, y: 0)

container.addSubview(fromView)
container.addSubview(toView)

toView.transform = screenOffRight

UIView.animate(withDuration: 0.5, delay: 0.0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.8, options: [], animations: {

fromView.transform = screenOffLeft
fromView.alpha = 0.5
toView.transform = CGAffineTransform.identity
toView.alpha = 1

}) { (success) in
transitionContext.completeTransition(success)
}

Okay, so the code is a bit overwhelming. Let me break some of the pieces of the code down for you:

  • fromView - the first view of the app where the program calls to return to when going back

  • toView - the second view of the app where the program calls to go to when clicking the button on the first view

  • container - the view where we’ll add the fromView and toView

  • screenOffLeft - the variable that tells the program to move to the left as far as the width of the view

  • screenOffRight - the variable that tells the program to move to the right as far as the width of the view

  • container.addSubview - command to add views to the container

  • toView.transform - specify the animation that toView will use

  • fromView.transform - specify the animation that fromView will use

  • UIView.animate - block code to animate the UIView

  • fromView.alpha - sets the opacity of the fromView

  • toView.alpha - sets the opacity of the toView

  • transitionContext.completeTransition - tells that program when the animation is complete

Final Touches

So now that we have the transition manager, all that’s left is to call it to ViewController.swift to use it. Go back to ViewController.swift and add this line above viewDidLoad:

let transitionManager = TransitionManager()

As the final frosting to the cake, let’s add this method.

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
let toViewController = segue.destination

toViewController.transitioningDelegate = transitionManager
}

And voila! Now when we run the program, the transition going to the views should now be from right to left. Just like magic (but not really), that’s how adding a custom animation when transitioning works on Swift. Congrats!

Conclusion

With the new capabilities that iOS 10.0+ offer, it’s now much easier to implement custom animations when transitioning between views. It also reduces the lines of code needed when animating as opposed to the previous methods of animating. Also try and experiment with the different properties of CGAffineTransform since it’s capable of much more than simply sliding views.

* Primary Photo by Igor Miske on Unsplash

Blog Posts by Edgar Erlo Furatero

iOS Development, Swift

Animation and Transitions pt. 2: iOS

With the new capabilities that iOS 10.0+ offer, it’s now easier to customize animations when transitioning between views. Let's take a closer look at how it's done.

Read More

Related Entries