Creating custom animated and interactive transitions between UIViewControllers using iOS 7.0 API.

1. Custom UIViewController
Transitions
Ján Ilavský - @split82

2. iPhone OS 3.0

5. iOS 7

6. Modal View Controller
- (void)presentViewController:animated:completion:
!
- (void)dismissViewControllerAnimated:completion:

7. UIModalTransitionStyle modalTransitionStyle

8. typedef NS_ENUM(NSInteger, UIModalTransitionStyle) {
UIModalTransitionStyleCoverVertical = 0,
UIModalTransitionStyleFlipHorizontal,
UIModalTransitionStyleCrossDissolve,
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_3_2
UIModalTransitionStylePartialCurl,
#endif
};

9. UIModalPresentationStyle modalPresentationStyle

10. typedef NS_ENUM(NSInteger, UIModalPresentationStyle) {
UIModalPresentationFullScreen = 0,
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_3_2
UIModalPresentationPageSheet,
UIModalPresentationFormSheet,
UIModalPresentationCurrentContext,
#endif
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_7_0
UIModalPresentationCustom,
UIModalPresentationNone = -1,
#endif
};

11. typedef NS_ENUM(NSInteger, UIModalPresentationStyle) {
UIModalPresentationFullScreen = 0,
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_3_2
UIModalPresentationPageSheet,
UIModalPresentationFormSheet,
UIModalPresentationCurrentContext,
#endif
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_7_0
UIModalPresentationCustom,
UIModalPresentationNone = -1,
#endif
};

12. Custom Fullscreen
Non-interactive Transitions

13. Demo

14. TestViewController *viewController = [TestViewController new];
!
viewController.transitioningDelegate = ???
!
[self presentViewController:viewController animated:YES
completion:nil];

15. TestViewController *viewController = [TestViewController new];
!
viewController.transitioningDelegate = ???
!
[self presentViewController:viewController animated:YES
completion:nil];

16. @protocol UIViewControllerTransitioningDelegate <NSObject>
!
@optional
!
!
- (id <UIViewControllerAnimatedTransitioning>)
animationControllerForPresentedController:(UIViewController *)presented
presentingController:(UIViewController *)presenting sourceController:
(UIViewController *)source;
!
!
- (id <UIViewControllerAnimatedTransitioning>)
animationControllerForDismissedController:(UIViewController *)dismissed;
!
!
- (id
<UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id
<UIViewControllerAnimatedTransitioning>)animator;
!
!
- (id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:
(id <UIViewControllerAnimatedTransitioning>)animator;
!
!
@end

17. @protocol UIViewControllerTransitioningDelegate <NSObject>
!
@optional
!
!
- (id <UIViewControllerAnimatedTransitioning>)
animationControllerForPresentedController:(UIViewController *)presented
presentingController:(UIViewController *)presenting sourceController:
(UIViewController *)source;
!
!
- (id <UIViewControllerAnimatedTransitioning>)
animationControllerForDismissedController:(UIViewController *)dismissed;
!
!
- (id
<UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id
<UIViewControllerAnimatedTransitioning>)animator;
!
!
- (id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:
(id <UIViewControllerAnimatedTransitioning>)animator;
!
!
@end

18. @protocol UIViewControllerTransitioningDelegate <NSObject>
!
@optional
!
!
- (id <UIViewControllerAnimatedTransitioning>)
animationControllerForPresentedController:(UIViewController *)presented
presentingController:(UIViewController *)presenting sourceController:
(UIViewController *)source;
!
!
- (id <UIViewControllerAnimatedTransitioning>)
animationControllerForDismissedController:(UIViewController *)dismissed;
!
!
- (id
<UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id
<UIViewControllerAnimatedTransitioning>)animator;
!
!
- (id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:
(id <UIViewControllerAnimatedTransitioning>)animator;
!
!
@end

19. UIViewController UIViewController
id <UIViewControllerTransitioningDelegate>
transitioningDelegate
animationControllerForPresentedController… animationControllerForDismissedController
id <UIViewControllerAnimatedTransitioning>
id <UIViewControllerAnimatedTransitioning>
present
dismiss

20. @protocol UIViewControllerAnimatedTransitioning <NSObject>
!
!
- (NSTimeInterval)transitionDuration:(id
<UIViewControllerContextTransitioning>)transitionContext;
!
- (void)animateTransition:(id
<UIViewControllerContextTransitioning>)transitionContext;
!
!
@optional
!
- (void)animationEnded:(BOOL)transitionCompleted;
!
@end

21. @protocol UIViewControllerAnimatedTransitioning <NSObject>
!
!
- (NSTimeInterval)transitionDuration:(id
<UIViewControllerContextTransitioning>)transitionContext;
!
- (void)animateTransition:(id
<UIViewControllerContextTransitioning>)transitionContext;
!
!
@optional
!
- (void)animationEnded:(BOOL)transitionCompleted;
!
@end

22. UIView UIView
UIViewController UIViewController

23. @protocol UIViewControllerAnimatedTransitioning <NSObject>
!
!
- (NSTimeInterval)transitionDuration:(id
<UIViewControllerContextTransitioning>)transitionContext;
!
- (void)animateTransition:(id
<UIViewControllerContextTransitioning>)transitionContext;
!
!
@optional
!
- (void)animationEnded:(BOOL)transitionCompleted;
!
@end

24. @protocol UIViewControllerAnimatedTransitioning <NSObject>
!
!
- (NSTimeInterval)transitionDuration:(id
<UIViewControllerContextTransitioning>)transitionContext;
!
- (void)animateTransition:(id
<UIViewControllerContextTransitioning>)transitionContext;
!
!
@optional
!
- (void)animationEnded:(BOOL)transitionCompleted;
!
@end

25. UIViewController *fromViewController = [transitionContext
viewControllerForKey:UITransitionContextFromViewControllerKey];
!
UIViewController *toViewController = [transitionContext
viewControllerForKey:UITransitionContextToViewControllerKey];
!
!
toViewController.view.alpha = 0.0f;
toViewController.view.frame = [transitionContext
finalFrameForViewController:toViewController];
!
[transitionContext.containerView addSubview:toViewController.view];
[UIView animateWithDuration:self.duration
delay:0.0
options:0
animations:^{
toViewController.view.alpha = 1.0f;
}
completion:^(BOOL finished) {
[fromViewController.view removeFromSuperview];
[transitionContext completeTransition:YES];
}];

26. !
Container View
UIView UIView
UIViewController UIViewController

27. UIViewController *fromViewController = [transitionContext
viewControllerForKey:UITransitionContextFromViewControllerKey];
!
UIViewController *toViewController = [transitionContext
viewControllerForKey:UITransitionContextToViewControllerKey];
!
!
toViewController.view.alpha = 0.0f;
toViewController.view.frame = [transitionContext
finalFrameForViewController:toViewController];
!
[transitionContext.containerView addSubview:toViewController.view];
[UIView animateWithDuration:self.duration
delay:0.0
options:0
animations:^{
toViewController.view.alpha = 1.0f;
}
completion:^(BOOL finished) {
[fromViewController.view removeFromSuperview];
[transitionContext completeTransition:YES];
}];

28. UIViewController *fromViewController = [transitionContext
viewControllerForKey:UITransitionContextFromViewControllerKey];
!
UIViewController *toViewController = [transitionContext
viewControllerForKey:UITransitionContextToViewControllerKey];
!
!
toViewController.view.alpha = 0.0f;
toViewController.view.frame = [transitionContext
finalFrameForViewController:toViewController];
!
[transitionContext.containerView addSubview:toViewController.view];
[UIView animateWithDuration:self.duration
delay:0.0
options:0
animations:^{
toViewController.view.alpha = 1.0f;
}
completion:^(BOOL finished) {
[fromViewController.view removeFromSuperview];
[transitionContext completeTransition:YES];
}];

29. initialFrameForViewController finalFrameForViewController
from CGRectZero
to CGRectZero

30. UIViewController *fromViewController = [transitionContext
viewControllerForKey:UITransitionContextFromViewControllerKey];
!
UIViewController *toViewController = [transitionContext
viewControllerForKey:UITransitionContextToViewControllerKey];
!
!
toViewController.view.alpha = 0.0f;
toViewController.view.frame = [transitionContext
finalFrameForViewController:toViewController];
!
[transitionContext.containerView addSubview:toViewController.view];
[UIView animateWithDuration:self.duration
delay:0.0
options:0
animations:^{
toViewController.view.alpha = 1.0f;
}
completion:^(BOOL finished) {
[fromViewController.view removeFromSuperview];
[transitionContext completeTransition:YES];
}];

31. UIViewController *fromViewController = [transitionContext
viewControllerForKey:UITransitionContextFromViewControllerKey];
!
UIViewController *toViewController = [transitionContext
viewControllerForKey:UITransitionContextToViewControllerKey];
!
!
toViewController.view.alpha = 0.0f;
toViewController.view.frame = [transitionContext
finalFrameForViewController:toViewController];
!
[transitionContext.containerView addSubview:toViewController.view];
[UIView animateWithDuration:self.duration
delay:0.0
options:0
animations:^{
toViewController.view.alpha = 1.0f;
}
completion:^(BOOL finished) {
[fromViewController.view removeFromSuperview];
[transitionContext completeTransition:YES];
}];

32. UIViewController *fromViewController = [transitionContext
viewControllerForKey:UITransitionContextFromViewControllerKey];
!
UIViewController *toViewController = [transitionContext
viewControllerForKey:UITransitionContextToViewControllerKey];
!
!
toViewController.view.alpha = 0.0f;
toViewController.view.frame = [transitionContext
finalFrameForViewController:toViewController];
!
[transitionContext.containerView addSubview:toViewController.view];
[UIView animateWithDuration:self.duration
delay:0.0
options:0
animations:^{
toViewController.view.alpha = 1.0f;
}
completion:^(BOOL finished) {
//[fromViewController.view removeFromSuperview];
[transitionContext completeTransition:YES];
}];

33. Custom Non-Fullscreen
Non-interactive Transitions

34. TestViewController *viewController = [TestViewController new];
!
viewController.modalPresentationStyle = UIModalPresentationCustom;
viewController.transitioningDelegate = ???
!
[self presentViewController:viewController animated:YES
completion:nil];

35. UIView
UIView

36. Demo

37. Presentation != Dismissal

38. Presentation
!
Container View
UIView UIView
UIViewController UIViewController

39. Dismission
!
Container View
UIView UIView
UIViewController UIViewController

40. initialFrameForViewController finalFrameForViewController
from
to CGRectZero CGRectZero
Presentation

41. initialFrameForViewController finalFrameForViewController
from CGRectZero
to CGRectZero
Dismissal

42. viewWillDissapear
!
viewDidDissapear
FromViewController
Presentation

43. viewWillAppear
!
viewDidAppear
ToViewController
Dismissal

44. [transitionContext.containerView
addSubview:toViewController.view];
!
toViewController.view.frame = CGRectInset([transitionContext
initialFrameForViewController:fromViewController], 32.0f, 32.0f);
!
toViewController.view.alpha = 0.0f;
!
[UIView animateWithDuration:self.duration
delay:0.0
options:0
animations:^{
toViewController.view.alpha = 1.0f;
}
completion:^(BOOL finished) {
[transitionContext completeTransition:YES];
}];
Presentation

45. [UIView animateWithDuration:self.duration
delay:0.0
options:0
animations:^{
fromViewController.view.alpha = 0.0f;
}
completion:^(BOOL finished) {
[transitionContext completeTransition:YES];
}];
Dismissal

46. Interactive Transitions

47. start complete

48. start complete
cancel
finish
updating

49. Demo

50. UIViewController UIViewController
id <UIViewControllerTransitioningDelegate>
transitioningDelegate
animationControllerForPresentedController… animationControllerForDismissedController
id <UIViewControllerAnimatedTransitioning>
id <UIViewControllerAnimatedTransitioning>
present
dismiss

51. @protocol UIViewControllerTransitioningDelegate <NSObject>
!
@optional
!
!
- (id <UIViewControllerAnimatedTransitioning>)
animationControllerForPresentedController:(UIViewController *)presented
presentingController:(UIViewController *)presenting sourceController:
(UIViewController *)source;
!
!
- (id <UIViewControllerAnimatedTransitioning>)
animationControllerForDismissedController:(UIViewController *)dismissed;
!
!
- (id
<UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id
<UIViewControllerAnimatedTransitioning>)animator;
!
!
- (id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:
(id <UIViewControllerAnimatedTransitioning>)animator;
!
!
@end

52. @protocol UIViewControllerTransitioningDelegate <NSObject>
!
@optional
!
!
- (id <UIViewControllerAnimatedTransitioning>)
animationControllerForPresentedController:(UIViewController *)presented
presentingController:(UIViewController *)presenting sourceController:
(UIViewController *)source;
!
!
- (id <UIViewControllerAnimatedTransitioning>)
animationControllerForDismissedController:(UIViewController *)dismissed;
!
!
- (id
<UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id
<UIViewControllerAnimatedTransitioning>)animator;
!
!
- (id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:
(id <UIViewControllerAnimatedTransitioning>)animator;
!
!
@end

53. UIViewController UIViewController
id <UIViewControllerTransitioningDelegate>
transitioningDelegate
animationControllerForPresentedController… animationControllerForDismissedController
id <UIViewControllerAnimatedTransitioning>
id <UIViewControllerAnimatedTransitioning>
present
dismiss

54. UIViewController UIViewController
id <UIViewControllerTransitioningDelegate>
transitioningDelegate
id <UIViewControllerAnimatedTransitioning>
id <UIViewControllerAnimatedTransitioning>
present
dismiss
id
<UIViewControllerInteractiveTra
nsitioning>
id
<UIViewControllerInteractiveTra
nsitioning>

55. id <UIViewControllerInteractiveTransitioning>

56. @protocol UIViewControllerInteractiveTransitioning <NSObject>
!
- (void)startInteractiveTransition:(id
<UIViewControllerContextTransitioning>)transitionContext;
!
@optional
!
- (CGFloat)completionSpeed;
- (UIViewAnimationCurve)completionCurve;
!
@end

57. UIPercentDrivenInteractiveTransition

58. UIPercentDrivenInteractiveTransition
- (void)updateInteractiveTransition:(CGFloat)percentComplete;
- (void)cancelInteractiveTransition;
- (void)finishInteractiveTransition;

59. CGFloat scale = [gestureRecognizer scale];
switch ([gestureRecognizer state]) {
case UIGestureRecognizerStateBegan:
transitionController.interactive = YES;
_startScale = scale;
[testViewController dismissViewControllerAnimated:YES completion:nil];
}
break;
case UIGestureRecognizerStateChanged: {
CGFloat percent = (1.0 - scale/_startScale);
[transitionController.percentDrivenInteractiveTransition updateInteractiveTransition: (percent <= 0.0) ? 0.0 :
percent];
break;
}
case UIGestureRecognizerStateEnded:
case UIGestureRecognizerStateCancelled:
if ([gestureRecognizer velocity] >= 0.0 || [gestureRecognizer state] == UIGestureRecognizerStateCancelled) {
[transitionController.percentDrivenInteractiveTransition cancelInteractiveTransition];
}
else {
[transitionController.percentDrivenInteractiveTransition finishInteractiveTransition];
}
break;
default:
break;
}

60. CGFloat scale = [gestureRecognizer scale];
switch ([gestureRecognizer state]) {
case UIGestureRecognizerStateBegan:
transitionController.interactive = YES;
_startScale = scale;
[testViewController dismissViewControllerAnimated:YES completion:nil];
}
break;
case UIGestureRecognizerStateChanged: {
CGFloat percent = (1.0 - scale/_startScale);
[transitionController.percentDrivenInteractiveTransition updateInteractiveTransition: (percent <=
0.0) ? 0.0 : percent];
break;
}
case UIGestureRecognizerStateEnded:
case UIGestureRecognizerStateCancelled:
if ([gestureRecognizer velocity] >= 0.0 || [gestureRecognizer state] == UIGestureRecognizerStateCancelled) {
[transitionController.percentDrivenInteractiveTransition cancelInteractiveTransition];
}
else {
[transitionController.percentDrivenInteractiveTransition finishInteractiveTransition];
}
break;
default:
break;
}

61. Core Animation!
!
+[UIView transitionFromView:toView:duration:options:completion:]!
!
Custom Animations!
!
UIView block-based animations
UIPercentDrivenInteractiveTransition

62. [UIView animateWithDuration:self.duration
delay:0.0
options:0
animations:^{
toViewController.view.alpha = 1.0f;
}
completion:^(BOOL finished) {
[fromViewController.view removeFromSuperview];
[transitionContext completeTransition:YES];
}];

63. [UIView animateWithDuration:self.duration
delay:0.0
options:0
animations:^{
toViewController.view.alpha = 1.0f;
}
completion:^(BOOL finished) {
[fromViewController.view removeFromSuperview];
[transitionContext completeTransition:
!transitionContext.transitionWasCancelled];
}];

64. - (void)startInteractiveTransition:(id
<UIViewControllerContextTransitioning>)transitionContext {
!
_transitionContext = transitionContext;
_toViewController = [transitionContext
viewControllerForKey:UITransitionContextToViewControllerKey];
_toViewController.view.alpha = 0.0f;
_toViewController.view.frame = [transitionContext
finalFrameForViewController:_toViewController];
[transitionContext.containerView addSubview:_toViewController.view];
}
id <UIViewControllerInteractiveTransitioning>

65. id <UIViewControllerInteractiveTransitioning>
- (void)updateInteractiveTransition:(CGFloat)percentComplete {
_toViewController.view.alpha = percentComplete;
[_transitionContext updateInteractiveTransition:percentComplete];
}

66. id <UIViewControllerInteractiveTransitioning>
- (void)cancelInteractiveTransition {
[_transitionContext cancelInteractiveTransition];
[UIView animateWithDuration:0.3
delay:0.0
options:0
animations:^{
_toViewController.view.alpha = 0.0f;
}
completion:^(BOOL finished) {
[_transitionContext completeTransition:!
_transitionContext.transitionWasCancelled];
}];
}

67. viewWillAppear
viewDidAppear
viewWillDisappear
viewDidDisappear

68. viewWillAppear
viewDidAppear
viewWillDisappear
viewDidDisappear

69. viewWillAppear viewWillDisappear
viewDidDisappear

70. - (void)viewWillAppear:(BOOL)animated {
[self doSomeSideEffectsAssumingViewDidAppearIsGoingToBeCalled];
id <UIViewControllerTransitionCoordinator> coordinator;
coordinator = [self transitionCoordinator];
if(coordinator && [coordinator initiallyInteractive]) {
[transitionCoordinator notifyWhenInteractionEndsUsingBlock:
^(id <UIViewControllerTransitionCoordinatorContext> ctx) {
if(ctx.isCancelled) {
[self undoSideEffects];
}
}];
}
}
UIViewControllerTransitionCoordinator

71. UINavigationController
– pushViewController:animated:
– popViewControllerAnimated:
– popToRootViewControllerAnimated:
– popToViewController:animated:

72. - (id<UIViewControllerAnimatedTransitioning>)!
navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController *)fromVC !
toViewController:(UIViewController *)toVC
UINavigationControllerDelegate
- (id<UIViewControllerInteractiveTransitioning>)!
navigationController:(UINavigationController *)navigationController
interactionControllerForAnimationController:
(id<UIViewControllerAnimatedTransitioning>)animationController

73. UINavigationController
@property(nonatomic, readonly) UIGestureRecognizer *interactivePopGestureRecognizer

74. UITabBarController
@property(nonatomic, assign) UIViewController *selectedViewController
@property(nonatomic) NSUInteger selectedIndex

75. UITabBarControllerDelegate
- (id <UIViewControllerInteractiveTransitioning>)tabBarController:(UITabBarController *)tabBarController
interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>)animationController;
!
- (id <UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController
animationControllerForTransitionFromViewController:(UIViewController *)fromVC
toViewController:(UIViewController *)toVC;

76. finty fň

78. // Snapshot
UIView *fromView = [fromViewController.view snapshotViewAfterScreenUpdates:NO];
!
// Interactivity
fromViewController.view.userInteractionEnabled = NO;
toViewController.view.userInteractionEnabled = YES;
transitionContext.containerView.userInteractionEnabled = YES;
!
[transitionContext.containerView addSubview:fromView];
[transitionContext.containerView addSubview:toViewController.view];
!
// Finish before animation
[transitionContext completeTransition:YES];
!
[UIView animateWithDuration: . . .

80. // Prepare BitmapContext
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
GLubyte *textureData = malloc(textureWidth * textureHeight * 4);
memset_pattern4(textureData, "0000", textureWidth * textureHeight * 4);
NSUInteger bytesPerPixel = 4;
NSUInteger bytesPerRow = bytesPerPixel * textureWidth;
NSUInteger bitsPerComponent = 8;
CGContextRef bitmapContext = CGBitmapContextCreate(textureData, textureWidth,
textureHeight, bitsPerComponent, bytesPerRow, colorSpace,
kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
CGColorSpaceRelease(colorSpace);
// draw
[view.layer renderInContext:bitmapContext];
CGContextRelease(bitmapContext);
!
// set data for texture
glBindTexture(GL_TEXTURE_2D, texture);
// set bitmap data into texture
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, textureWidth, textureHeight, 0, GL_RGBA,
GL_UNSIGNED_BYTE, textureData);
// Don't need this data anymore
free(textureData);

81. fuck off view controllers

83. Custom UIViewController
Transitions
Ján Ilavský - @split82