Advanced Screen Transitions on iOS

Dimitri James Tsiflitzis

CocoaheadsSKG

for the rest of us

About CocoaheadsSKG

CocoaHeads is a group devoted to the discussion of Swift, Objective-C and Cocoa. During meetings, members present on their projects, offer tutorials and discuss the latest news over a drink or two.

Website (http://cocoaheads.gr/)
Slides (https://speakerdeck.com/cocoaheadsskg)

Videos (https://www.youtube.com/channel/UCo7SSmiSt0R9ab1beWsX4ZA)

Twitter (https://twitter.com/cocoaheadsskg)

Meetup (https://www.meetup.com/CocoaHeadsSKG/)

CocoaheadsSKG

4 years
32 Meetups
276 members
Every month
Post meetup drinks
New feature 2019: Restaurant meetups
Best members ever in the universe and in perpetuity

About CocoaheadsSKG

CocoaheadsSKG

Animation in mobile applications

Animation is an essential part of the user experience.
There are many things you can subtly convey animating.
- Send a message
- Turn a switch on
- Navigate to another page
Animating is a pretty good way to reinforce a user initiated action.

CocoaheadsSKG

...and bringing a user interface to life.

Animation in mobile applications

CocoaheadsSKG

About me

I could have been somebody

I'm Dimitri

I could have been a contender

Instead I'm just a simple man trying to make my way in the universe

CocoaheadsSKG

Oftentimes users go through a series of steps to complete an action
- Sign up for a service
- Create a post
It should be clear that steps are connected to each other.
Animation can help you to connect each step to create a homologous journey.

When to use custom transitions

To connect multiple steps in a series

CocoaheadsSKG

Out of the box transitions on iOS

Presenting a view controller

CocoaheadsSKG


let viewController = ...

present(viewController, animated: true)

Out of the box transitions on iOS

Code for presenting a view controller

CocoaheadsSKG

Out of the box transitions on iOS

Pushing a view controller onto the navigation stack

CocoaheadsSKG


let vc = ...

navigationController?.pushViewController(vc, animated: true)

Out of the box transitions on iOS

Code for pushing

CocoaheadsSKG

Custom transitions on iOS

To create custom transitions you have to follow three steps:

Create a class that implements the UIViewControllerAnimatedTransitioning protocol
Before presenting a view controller, set a class as its transitioning delegate
Implement an animation controller
Optionally make it interactive (like the built in push transition)

CocoaheadsSKG

Some transitions already out there

CocoaheadsSKG

UIKit custom transition API

Any view controller can have a transition delegate
In that implementation you can provide your custom animation and interaction controllers
They will be responsible for the actual animation process
This delegate is the location where you can inject your own animation code

UIViewControllerTransitioningDelegate

CocoaheadsSKG

These objects are returned by the transition delegate, so you can implement your own desired custom view animations.

UIKit custom transition API

UIViewControllerAnimatedTransitioning

CocoaheadsSKG

This context encapsulates transition information
You can get references to all views, subviews and controllers from this object
The transitioning context is available for you to use it during the animation
This is the only place you could write your own code that isn't boilerplate

UIKit custom transition API

UIViewControllerContextTransitioning

CocoaheadsSKG

This gives you the "magical" ability to swipe a navigation controller interactively back and forth from the edge of the 📱

UIKit custom transition API

UIPercentDrivenInteractiveTransition

CocoaheadsSKG

UIKit custom transition API

CocoaheadsSKG

UIKit custom transition API

CocoaheadsSKG

Using their imagination

CocoaheadsSKG

Using their imagination

CocoaheadsSKG

Using their imagination

CocoaheadsSKG

Using their imagination

CocoaheadsSKG

Let's look at some actual code

CocoaheadsSKG

Set the transitioning delegate


class DetailViewController: UIViewController {
 
     /* ... */

    override func prepare(for segue: UIStoryboardSegue, 
                             sender: Any?) {

        super.prepare(for: segue, sender: sender)

        guard 
            let controller = segue.destination as? ModalViewController 
        else {
            return
        }
        
        controller.transitioningDelegate = self
    }
}

CocoaheadsSKG

UIViewControllerAnimatedTransitioning


extension DetailViewController: UIViewControllerTransitioningDelegate {

    func animationController(forPresented presented: UIViewController,
                             presenting: UIViewController,
                             source: UIViewController) 
                             -> UIViewControllerAnimatedTransitioning? {
        return FadePushAnimator()
    }

    func animationController(forDismissed dismissed: UIViewController)
                             -> UIViewControllerAnimatedTransitioning? {
        return FadePopAnimator()
    }
}

CocoaheadsSKG

The animation controller

open class FadeOutAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    
    let duration: TimeInterval
    
    public init(type: TransitionType, duration: TimeInterval = 0.25) {
        self.duration = duration
        super.init()
    }

    open func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) 
                                 -> TimeInterval {
        return self.duration
    }
    
    open override func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {

        guard
            let fromViewController = transitionContext.viewController(forKey: .from)
        else {
            return
        }
        
        let duration = self.transitionDuration(using: transitionContext)
        UIView.animate(withDuration: duration, animations: {
            fromViewController.view.alpha = 0
        }, completion: { _ in
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
        })
    }
}

CocoaheadsSKG

The end result

CocoaheadsSKG

3rd party libraries

Motion https://github.com/CosmicMind/Motion

CocoaheadsSKG

3rd party libraries

Hero https://github.com/HeroTransitions/Hero

CocoaheadsSKG

3rd party libraries


self.hero.isEnabled = true
redView.hero.id = "ironMan"
blackView.hero.id = "batMan"
whiteView.hero.modifiers = [.translate(y:100)]


redView.hero.id = "ironMan"
blackView.hero.id = "batMan"

View controller 1

View controller 2

Hero https://github.com/HeroTransitions/Hero

CocoaheadsSKG

Conclusion

Animation is powerful when used responsibly
It brings interfaces to life...
...and tells a story much more effectively.

CocoaheadsSKG

Ευχαριστούμε 🎈

CocoaheadsSKG