Custom Transitions: Make It Snappy

Want to make well-designed, context-sensitive transitions instead of boring old push animations? Apple has exposed the pieces for transitioning between View Controllers. We can make our own custom transitions with animations limited (mostly) by our imagination. We will cover:

Simple custom controller transitions
Custom modal presentations
Interactive transitions
Layout to layout transitions
This is an intermediate level session. It will have plenty of code and demos.

Transcript

1. View Controller Transitions Stephen Christopher Big Nerd Ranch
2. Transitions in Transition • iOS 7 introduces lots of new stuff for transitions • What classes / objects involved • Where they go • What you need to write ! • Navigation, Tab Bar, Interactive, Modal, some Collection Views • Some other stuff along the way
4. In the beginning was a mobile phone screen ! …. ! and it sucked.
5. Push Me
6. Previous Custom Transitions • Custom Segues • UIStoryboardSegue:
 override -(void)perform • from, to view controller properties • Custom Animation • [nav pushViewController:to animated:NO];
 // Custom animation...
7. Simple Example • Navigation Controller context • Animated, non-interactive transition Navigation Controller View Controller Stack View Controller Stack View Controller Stack Top View Controller Navigation Controller View Controller Stack New View Controller View Controller Stack View Controller Stack Top View Controller
8. Navigation Controller Delegate • Navigation delegate • May already have this Navigation Delegate has Navigation Delegate has Navigation Controller View Controller Stack View Controller Stack View Controller Stack Top View Controller VC Stack Navigation Controller View Controller Stack New View Controller View Controller Stack View Controller Stack Top View Controller VC Stack
9. Navigation Controller Delegate • Add method to return animation controller: - (id<UIViewControllerAnimatedTransitioning>) navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC Animation Controller vends Animation Controller vends Navigation Delegate has Navigation Delegate has Navigation Controller View Controller Stack View Controller Stack View Controller Stack Top View Controller VC Stack Navigation Controller View Controller Stack New View Controller View Controller Stack View Controller Stack Top View Controller VC Stack
10. Animation Controller Object • Conforms to UIViewControllerAnimatedTransitioning • Implements:
 - (NSTimeInterval)transitionDuration
 - (void)animateTransition: • animateTransition receives transition context

11. Transition Context • Objects you need to do animation Transition Context receives Animation Controller vends Animation Controller vends Navigation Delegate has Navigation Delegate has Navigation Controller View Controller Stack View Controller Stack View Controller Stack Top View Controller VC Stack Navigation Controller View Controller Stack New View Controller View Controller Stack View Controller Stack Top View Controller VC Stack
12. Transition Context • Objects you need to do animation • From, To View Controllers Transition Context receives from to Animation Controller vends Animation Controller vends Navigation Delegate has Navigation Delegate has Navigation Controller View Controller Stack View Controller Stack View Controller Stack Top View Controller VC Stack Navigation Controller View Controller Stack New View Controller View Controller Stack View Controller Stack Top View Controller VC Stack
13. Transition Context • Objects you need to do animation • From, To View Controllers • View to contain everything Transition Context receives from to Container View Animation Controller vends Animation Controller vends Navigation Delegate has Navigation Delegate has Navigation Controller View Controller Stack View Controller Stack View Controller Stack Top View Controller VC Stack Navigation Controller View Controller Stack New View Controller View Controller Stack View Controller Stack Top View Controller VC Stack
14. Navigation Controller View Controller Stack Navigation Delegate Animation Controller Transition Context New View Controller has vends receives from to Container View has View Controller Stack View Controller Stack Top View Controller VC Stack You know these pieces. ! 1 2 ! ! ! ! ! ! ! Apple provides this.
15. 3 methods enter 1 animation leaves
16. Demo
17. Tab Bar Controller • Works great for Navigation Controller, what about a tab bar controller? Transition Context receives from to Container View Animation Controller vends Animation Controller vends Navigation Delegate has Navigation Delegate has Navigation Controller View Controller Stack View Controller Stack View Controller Stack Top View Controller VC Stack Navigation Controller View Controller Stack New View Controller View Controller Stack View Controller Stack Top View Controller VC Stack tab tab
18. Tab Bar Delegate - (id<UIViewControllerAnimatedTransitioning>) tabBarController:(UITabBarController *)tabBarController animationControllerForTransitionFromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC Same protocol
19. Demo
20. VC/V Hierarchy Container VC (nav, tab, etc...) Container View To View To VC From VC From View Nav Crap stuff stuff stuf f stuff stuff Controller Hierarchy View Hierarchy
21. VC/V Hierarchy • Putting To VC in container starts transition (usually) • Animation Controller must add To view • May want to remove From view • At end, From controller / view removed Container ! ! ! ! From To 1 2 print version
22. View Snapshots • New methods on UIView ! ! ! • Returns flat view with layer contents same as rendered view • Optimized by rendering engine • Can’t muck with layer - (UIView *)snapshotViewAfterScreenUpdates:(BOOL)afterUpdates; ! - (UIView *)resizableSnapshotViewFromRect:(CGRect)rect afterScreenUpdates:(BOOL)afterUpdates withCapInsets:(UIEdgeInsets)capInsets;
23. Using View Snapshots • Create snapshot, add to view hierarchy • Simpler than doing w/ layer contents UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey]; ! UIView *fromSnapshotView = [fromVC.view snapshotViewAfterScreenUpdates:YES]; ! [transitionContext.containerView addSubview:fromSnapshotView];
24. Partial View Snapshots • Great for effects / cool animations - (UIView *)resizableSnapshotViewFromRect:(CGRect)rect afterScreenUpdates:(BOOL)afterUpdates withCapInsets:(UIEdgeInsets)capInsets;
25. Modal Transitions • Like Nav / Tab, but started with presentViewController • Presented view controller has transition delegate • Needs to be able to dismiss
26. toVC.modalPresentationStyle = UIModalPresentationCustom; ! [self presentViewController:toVC animated:YES completion:nil];
27. Springboard Effect • Modal Presentation from Collection View Cell • Modal Transition Delegate:
 UIViewController property
28. toVC.transitioningDelegate = self; toVC.modalPresentationStyle = UIModalPresentationCustom; ! [self presentViewController:toVC animated:YES completion:nil];
29. Demo
30. Source Rect • Transition Context methods:
 - (CGRect)initialFrameForViewController: (UIViewController *)vc
 - (CGRect)finalFrameForViewController: (UIViewController *)vc • Not always usable (may be unspecified) • Get bounds from container view to deal with rotation
31. Spring Animations • Goes from 0.0 to 1.1 and back to 1.0 UIView animateWithDuration:! delay:! usingSpringWithDamping:! initialSpringVelocity:! options:
32. Keyframe Animations [UIView animateKeyframesWithDuration:[self transitionDuration:transitionContext] delay:0 options:0 animations:^{ [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{ ... }]; [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:1.0 animations:^{ ... }]; } completion:^(BOOL finished) { ... }];
33. Summary: Nav / Tab / Modal • Navigation, Tab
 Container delegate provides animation controller • Modal:
 Presented Delegate of VC to present create animation controller
34. Separation of Concerns • This arch lets the animation controller worry about all the other stuff Transition Context New View Controller receives from to Container View has Transition Context receives from to Container View has Animation Controller vends Animation Controller vends Navigation Delegate has Navigation Delegate has Navigation Controller View Controller Stack View Controller Stack View Controller Stack Top View Controller VC Stack Navigation Controller View Controller Stack New View Controller View Controller Stack View Controller Stack Top View Controller VC Stack vends reusable Container specific
35. Pause
36. Time Sequence • When is animation controller asked for? UIKit navigation delegate Animation Controller animationControllerForOperation: fromViewController: toViewController: Nav Controller animateTransition:
37. Interactive Transitions • UIKit also asks for interaction controller UIKit navigation delegate Animation Controller animationControllerForOperation: fromViewController: toViewController: Nav Controller interactionControllerForAnimationController:
38. Interaction Controller • Object conforming to UIViewControllerInteractiveTransitioning • - (void)startInteractiveTransition • Completion speed, curve - (id<UIViewControllerInteractiveTransitioning>) navigationController: (UINavigationController *)navigationController interactionControllerForAnimationController: (id<UIViewControllerAnimatedTransitioning>)animationController
39. UIPercentDrivenInteractiveTransition • Concrete class implementing UIViewControllerInteractiveTransitioning • Create, call
 - (void)updateInteractiveTransition:(CGFloat)percentComplete
40. Gesture Recognizer Driven • Drive interactive transition with gesture recognition
41. Demo
42. Starting Interactive Transition • Something needs to kick off the transition with:
 popViewController, setSelectedIndex, etc • May need to create the VC as well • Care required to not violate separation of concerns
43. viewMightAppear? • Interactive transitions could cause viewWillAppear to be called but not viewDidAppear
44. Transition Sequence Appearing Appeared Disappearing Disappeared View Lifecycle transition to start transition to finish transition from start transition from finish transition cancel
45. Consequence • viewDid* not necessarily called after 
 viewWill* • Introducing UIViewControllerTransitioningCoordinator
46. Transition Coordinator • viewWillAppear should now clean up cancelled transition using notifyWhenInteractionEndsUsingBlock: • viewWillDisappear: called after this block
 viewWillAppear: called on start
47. Transition Coordinator • WWDC code snippet: - (void) viewWillAppear: { [self doSomeSideEffectsAssumingViewDidAppearIsGoingToBeCalled]; id <UIViewControllerTransitionCoordinator> coordinator; coordinator = [self transitionCoordinator]; if(coordinator && [coordinator initiallyInteractive]) { [transitionCoordinator notifyWhenInteractionEndsUsingBlock: ^(id <UIViewControllerTransitionCoordinatorContext> ctx) { if(ctx.isCancelled) { [self undoSideEffects]; } }]; } }
48. Transition Coordinator Completion Block Appearing Appeared Disappearing Disappeared transition cancel fromVC ^{} toVC ^{}
49. Collection Views • Layout to Layout Transitions already in iOS 6 • Subclass UICollectionViewTransitionLayout
50. Demo
51. Review • Implementing basic transition animation • Nav, Tab, Modal contexts slightly different but same general process • UIView snapshots • Interactive Transitions w/ interaction controller
52. Further Reading • WWDC 2013 Session 218,
 “Custom Transitions Using View Controllers” • General overview • Modal, Interactive • WWDC 2013 Session 226,
 “Implementing Engaging UI” • Sample at beginning
 • http://www.teehanlax.com/blog/custom-uiviewcontroller-transitions/ • Our iOS7 demos at: https://github.com/bignerdranch/iOS7Demos • https://devforums.apple.com/thread/196451?start=50&tstart=0 • Sub breaching: http://www.youtube.com/watch?v=1HRcaAxupLM
53. Thanks! • Take a class from the Big Nerd Ranch • Check out Roominant • Follow me on twitter @randomstep • Turn in your evaluation • Help your users succeed!
54. thanks to @jblocksom
55. Questions?