CocoaHeads Rennes #14: iOS7 Controllers Transitions

1. CocoaHeads Rennes #14 24 Octobre 2014 iOS 7 - Controllers Transitions vous n’aurez plus d’excuse ;-) David Bonnet Octobre 2013 jeudi 24 octobre 13

2. jeudi 24 octobre 13

3. iOS 7 - Controller transitions - Tour d’horizon... What’s new ! jeudi 24 octobre 13

4. iOS 7 - Controller transitions - Tour d’horizon... What’s new ! - Controllers Transitions et Custom transitions jeudi 24 octobre 13

5. iOS 7 - Controller transitions - Tour d’horizon... What’s new ! - Controllers Transitions et Custom transitions - Interactive transitions jeudi 24 octobre 13

6. iOS 7 - Controller transitions - Tour d’horizon... What’s new ! - Controllers Transitions et Custom transitions - Interactive transitions - Quelques trucs... jeudi 24 octobre 13

7. Tour d’horizon... What’s new jeudi 24 octobre 13

8. Tour d’horizon... What’s new jeudi 24 octobre 13

9. Tour d’horizon... What’s new UIKit Dynamics UIMotion Effects Easier KeyFrame animations UIView Animations APIs jeudi 24 octobre 13 Custom Transitions with UIViewControllers

10. Tour d’horizon... What’s new UIKit Dynamics UIMotion Effects Easier KeyFrame animations UIView Animations APIs jeudi 24 octobre 13 Custom Transitions with UIViewControllers

11. UIMotion Effects jeudi 24 octobre 13

12. UIMotion Effects jeudi 24 octobre 13

13. UIKit Dynamics jeudi 24 octobre 13

14. UIKit Dynamics - Arrivée de la physique dans UIKit ! - Gravité / Ressorts / Gestion des collisions... - Interractions entre éléments jeudi 24 octobre 13

15. Custom Transitions jeudi 24 octobre 13

16. Custom Transitions Que peux-t’on personnaliser ? jeudi 24 octobre 13

17. Presentation and Dismissals UITabBarController UINavigationController UICollectionViewController layout-to-layout transitions Custom Transitions Que peux-t’on personnaliser ? jeudi 24 octobre 13

18. Presentation and Dismissals UITabBarController UINavigationController UICollectionViewController layout-to-layout transitions Custom Transitions Quelles transitions précisément ? jeudi 24 octobre 13

19. Presentation and Dismissals UITabBarController UIModalPresentationFullScreen UIModalPresentationCustom UINavigationController UICollectionViewController layout-to-layout transitions Custom Transitions Quelles transitions précisément ? jeudi 24 octobre 13

20. setSelectedViewController:(UIViewController*)vc setSelectedIndex:(NSUInteger)idx Presentation and Dismissals UITabBarController UIModalPresentationFullScreen UIModalPresentationCustom UINavigationController UICollectionViewController layout-to-layout transitions Custom Transitions Quelles transitions précisément ? jeudi 24 octobre 13

21. setSelectedViewController:(UIViewController*)vc setSelectedIndex:(NSUInteger)idx Presentation and Dismissals UITabBarController UIModalPresentationFullScreen UIModalPresentationCustom UINavigationController pushViewController:animated: popViewController:animated: setViewControllers:animated: UICollectionViewController layout-to-layout transitions Custom Transitions Quelles transitions précisément ? jeudi 24 octobre 13

22. setSelectedViewController:(UIViewController*)vc setSelectedIndex:(NSUInteger)idx Presentation and Dismissals UITabBarController UIModalPresentationFullScreen UIModalPresentationCustom UINavigationController setUseLayoutToLayoutNavigation Transitions: pushViewController:animated: popViewController:animated: setViewControllers:animated: UICollectionViewController layout-to-layout transitions Custom Transitions Quelles transitions précisément ? jeudi 24 octobre 13

23. Demo jeudi 24 octobre 13

24. Anatomie d’une transition Début de la transition jeudi 24 octobre 13

25. Anatomie d’une transition Début de la transition Parent VC Child A View Controllers jeudi 24 octobre 13 Views Containment Controllers views Superview

26. Anatomie d’une transition Début de la transition Window Parent View Parent VC Child A View Controllers jeudi 24 octobre 13 Views Containment View Controllers views Superview

27. Anatomie d’une transition Début de la transition Window Parent View Parent VC Child A Child A View View Controllers jeudi 24 octobre 13 Views Containment Controllers views View View Superview

28. Anatomie d’une transition Fin de la transition Window Parent VC Child A jeudi 24 octobre 13 Parent View View

29. Anatomie d’une transition Fin de la transition Window Parent View Parent VC Child A View Controllers jeudi 24 octobre 13 Views Containment View Controllers views Superview

30. Anatomie d’une transition Fin de la transition Window Parent View Parent VC Child A View Child B View Controllers jeudi 24 octobre 13 Views Containment Controllers views Superview

31. Anatomie d’une transition Fin de la transition Window Parent View Parent VC Child A Child B View Controllers jeudi 24 octobre 13 Views Containment Child B View Controllers views View View Superview

32. Anatomie d’une transition Fin de la transition Window Parent View Parent VC Child A View View Controllers jeudi 24 octobre 13 View Views Child A Child B Containment Child B View Controllers views View View Superview

33. Anatomie d’une transition Window Etat intérmédiaire Child B Parent Child A View Child B View View Child A View jeudi 24 octobre 13 View

34. Anatomie d’une transition Window Etat intérmédiaire Parent Child A Child B View View Child A Container view View jeudi 24 octobre 13 View Child B View

35. Anatomie d’une transition Window Etat intérmédiaire Parent Child A Child B Child B View View Container view Child A View jeudi 24 octobre 13 View View

36. Anatomie d’une transition Window Etat intérmédiaire Parent Child A Child B Container view View View Child B Child A View View jeudi 24 octobre 13 View

37. Anatomie d’une transition jeudi 24 octobre 13

38. Anatomie d’une transition - Ce qu’il faut retenir : - iOS crée la container view - Calcule la position de départ et de ﬁn - Notiﬁe les view controllers des mouvements (Mise à jour des structures, Callbacks, ...) jeudi 24 octobre 13

39. Anatomie d’une transition - Ce qu’il faut retenir : - iOS crée la container view - Calcule la position de départ et de fin - Notifie les view controllers des mouvements (Mise à jour des structures, Callbacks, ...) L’éventuelle animation et/ou interraction doit être définie jeudi 24 octobre 13

40. Code et nouvelles APIs jeudi 24 octobre 13

41. Custom transitions : les protocols jeudi 24 octobre 13

42. Custom transitions : les protocols - Les contrôleurs d’animations et d’interactions doivent être fournis par les delegates respectifs <UIViewControllerTransitioningDelegate> <UINavigationControllerDelegate> <UITabBarControllerDelegate> jeudi 24 octobre 13

43. Custom transitions : les protocols - Les contrôleurs d’animations et d’interactions doivent être fournis par les delegates respectifs <UIViewControllerTransitioningDelegate> <UINavigationControllerDelegate> <UITabBarControllerDelegate> - Les contrôleurs d’animations répondent au protocol <UIViewControllerAnimatedTransitioning> jeudi 24 octobre 13

44. Custom transitions : les protocols - Les contrôleurs d’animations et d’interactions doivent être fournis par les delegates respectifs <UIViewControllerTransitioningDelegate> <UINavigationControllerDelegate> <UITabBarControllerDelegate> - Les contrôleurs d’animations répondent au protocol <UIViewControllerAnimatedTransitioning> - Les contrôleurs d’interactions répondent au protocol <UIViewControllerInteractiveTransitioning> jeudi 24 octobre 13

45. Custom transitions : les protocols - Les contrôleurs d’animations et d’interactions doivent être fournis par les delegates respectifs <UIViewControllerTransitioningDelegate> <UINavigationControllerDelegate> <UITabBarControllerDelegate> - Les contrôleurs d’animations répondent au protocol <UIViewControllerAnimatedTransitioning> - Les contrôleurs d’interactions répondent au protocol <UIViewControllerInteractiveTransitioning> - iOS fourni aux contrôleurs un contexte de transition <UIViewControllerContextTransitioning> jeudi 24 octobre 13

46. <UIViewControllerContextTransitioning> //Le contexte de transition fourni par iOS jeudi 24 octobre 13

47. <UIViewControllerContextTransitioning> //Le contexte de transition fourni par iOS @protocol UIViewControllerContextTransitioning <NSObject> // The view in which the animated transition should take place. - (UIView *)containerView; // Two keys for the method below are currently defined by the system // UITransitionContextToViewControllerKey // UITransitionContextFromViewControllerKey - (UIViewController *) viewControllerForKey:(NSString *)key; - (CGRect) initialFrameForViewController:(UIViewController *)vc; - (CGRect) finalFrameForViewController:(UIViewController *)vc; // This MUST be called whenever a transition completes (or is cancelled.) - (void)completeTransition:(BOOL)didComplete; ... @end jeudi 24 octobre 13

52. <UIViewControllerAnimatedTransitioning> //Le contrôleur d’animation jeudi 24 octobre 13

53. <UIViewControllerAnimatedTransitioning> //Le contrôleur d’animation @protocol UIViewControllerAnimatedTransitioning <NSObject> - (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)ctx; // This method can only be a nop if the transition is interactive and not a // percentDriven interactive transition. - (void)animateTransition:(id <UIViewControllerContextTransitioning>)ctx; @optional // This is a convenience and if implemented will be invoked by the system when the // transition context's completeTransition: method is invoked. - (void)animationEnded:(BOOL) transitionCompleted; @end jeudi 24 octobre 13

57. <UIViewControllerTransitioningDelegate> //Celui qui fourni l’animateur et l’interacteur jeudi 24 octobre 13

58. <UIViewControllerTransitioningDelegate> //Celui qui fourni l’animateur et l’interacteur @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>)a; - (id <UIViewControllerInteractiveTransitioning>) interactionControllerForDismissal:(id <UIViewControllerAnimatedTransitioning>)a; @end jeudi 24 octobre 13

62. UIView new Animation APIs jeudi 24 octobre 13

63. UIView new Animation APIs - Disabling and enabling animations +(void)setAnimationsEnabled:(BOOL) +(void)performWithoutAnimation:(void ^(void))actions; jeudi 24 octobre 13

64. UIView new Animation APIs - Disabling and enabling animations +(void)setAnimationsEnabled:(BOOL) +(void)performWithoutAnimation:(void ^(void))actions; - Spring animations (Damping ratio / Initial Spring Velocity) + (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion jeudi 24 octobre 13

65. UIView new Animation APIs jeudi 24 octobre 13

66. UIView new Animation APIs - KeyFrame animations +(void)animateKeyframesWithDuration... (~ CAKeyFrameAnimation) +(void)animateWithDuration... jeudi 24 octobre 13 (~ CABasicAnimation)

67. UIView new Animation APIs - KeyFrame animations +(void)animateKeyframesWithDuration... (~ CAKeyFrameAnimation) +(void)animateWithDuration... (~ CABasicAnimation) - UIView snapshots - (UIView *)snapshotViewAfterScreenUpdates:(BOOL)afterUpdates - (UIView *)resizableSnapshotViewFromRect:(CGRect)rect afterScreenUpdates:(BOOL)afterUpdates withCapInsets:(UIEdgeInsets)capInsets jeudi 24 octobre 13

68. UIView new Animation APIs - KeyFrame animations +(void)animateKeyframesWithDuration... (~ CAKeyFrameAnimation) +(void)animateWithDuration... (~ CABasicAnimation) - UIView snapshots - (UIView *)snapshotViewAfterScreenUpdates:(BOOL)afterUpdates - (UIView *)resizableSnapshotViewFromRect:(CGRect)rect afterScreenUpdates:(BOOL)afterUpdates withCapInsets:(UIEdgeInsets)capInsets - UIKit Dynamics jeudi 24 octobre 13

69. Vous savez désormais écrire des transitions de présentation personnalisées... jeudi 24 octobre 13

70. Vous savez désormais écrire des transitions de présentation personnalisées... Comment interragir avec elles...? jeudi 24 octobre 13

71. Interactive Transitions jeudi 24 octobre 13

72. UINavigationController Interactive pop gesture sur toutes les apps iOS 7 Interactive Transitions jeudi 24 octobre 13

73. UINavigationController Interactive pop gesture sur toutes les apps iOS 7 Custom interactive transitions Pas forcément pilotées par un geste Gestion de l’annulation Interactive Transitions jeudi 24 octobre 13

74. UINavigationController Interactive pop gesture sur toutes les apps iOS 7 Custom interactive transitions Pas forcément pilotées par un geste Gestion de l’annulation UIPercentDrivenInteractiveTransition Interactive Transitions jeudi 24 octobre 13

75. États d’une transition interactive États Acteurs jeudi 24 octobre 13

76. États d’une transition interactive États Aucune transition Acteurs Interactive Event Handler jeudi 24 octobre 13 Interactor Animator Context

77. États d’une transition interactive États Aucune transition Début de la transition interactive Acteurs Interactive Event Handler jeudi 24 octobre 13 Interactor Animator Context

78. États d’une transition interactive États Aucune transition Début de la transition interactive Mise à jour transition interactive Acteurs Interactive Event Handler jeudi 24 octobre 13 Interactor Animator Context

79. États d’une transition interactive États Aucune transition Début de la transition interactive Mise à jour transition interactive Fin de la transition interactive Acteurs Interactive Event Handler jeudi 24 octobre 13 Interactor Animator Context

80. États d’une transition interactive États Transition annulée Aucune transition Début de la transition interactive Mise à jour transition interactive Fin de la transition interactive Transition terminée Acteurs Interactive Event Handler jeudi 24 octobre 13 Interactor Animator Context

81. États d’une transition interactive États Transition annulée Aucune transition Début de la transition interactive Mise à jour transition interactive Fin de la transition interactive Transition terminée Acteurs Interactive Event Handler jeudi 24 octobre 13 Interactor Animator Context

82. États d’une transition interactive États Transition annulée Aucune transition Début de la transition interactive Mise à jour transition interactive Fin de la transition interactive Transition achevée Transition terminée Acteurs Interactive Event Handler jeudi 24 octobre 13 Interactor Animator Context

83. États d’une transition interactive États Transition annulée Aucune transition Début de la transition interactive Mise à jour transition interactive Fin de la transition interactive Transition achevée Transition terminée Acteurs Interactive Event Handler jeudi 24 octobre 13 Interactor Animator Context

84. <UIViewControllerInteractiveTransitioning> //Le contrôlleur d’interractions jeudi 24 octobre 13

85. <UIViewControllerInteractiveTransitioning> //Le contrôlleur d’interractions @protocol UIViewControllerInteractiveTransitioning <NSObject> - (void)startInteractiveTransition:(id <UIViewControllerContextTransitioning>)ctx; @optional - (CGFloat)completionSpeed; - (UIViewAnimationCurve)completionCurve; @end jeudi 24 octobre 13

89. <UIPercentDrivenInteractiveTransition> //La manière la plus simple jeudi 24 octobre 13

90. <UIPercentDrivenInteractiveTransition> //La manière la plus simple // The associated animation controller must animate its transition using UIView animation APIs. @interface UIPercentDrivenInteractiveTransition : NSObject <UIViewControllerInteractiveTransitioning> @property (readonly) CGFloat duration; // The last percentComplete value specified by updateInteractiveTransition: @property (readonly) CGFloat percentComplete; // completionSpeed defaults to 1.0 which corresponds to a completion duration of // (1 - percentComplete)*duration. It must be greater than 0.0. @property (nonatomic,assign) CGFloat completionSpeed; // When the interactive part of the transition has completed, this property can // be set to indicate a different animation curve. @property (nonatomic,assign) UIViewAnimationCurve completionCurve; // Used instead of the corresponding context methods. - (void)updateInteractiveTransition:(CGFloat)percentComplete; - (void)cancelInteractiveTransition; - (void)finishInteractiveTransition; @end jeudi 24 octobre 13

97. UICollectionView interactive transitions jeudi 24 octobre 13

98. UICollectionView interactive transitions - Le suivi de la progression via - jeudi 24 octobre 13 transitionProgress de 0.f à 1.1f (pour l’effet de bouncing)

99. UICollectionView interactive transitions - Le suivi de la progression via - transitionProgress de 0.f à 1.1f (pour l’effet de bouncing) - Nouvelles méthodes sur UICollectionView - (UICollectionViewTransitionLayout *) startInteractiveTransitionToCollectionViewLayout:completion: - (void)finishInteractiveTransition - (void)cancelInteractiveTransition jeudi 24 octobre 13

100. UICollectionView interactive transitions - Le suivi de la progression via - transitionProgress de 0.f à 1.1f (pour l’effet de bouncing) - Nouvelles méthodes sur UICollectionView - (UICollectionViewTransitionLayout *) startInteractiveTransitionToCollectionViewLayout:completion: - (void)finishInteractiveTransition - (void)cancelInteractiveTransition - Enrichissement du delegate - (UICollectionViewTransitionLayout *)collectionView:(UICollectionView*)v transitionLayoutForOldLayout:(UICollectionViewLayout*)o newLayout:(UICollectionViewLayout*)n jeudi 24 octobre 13

101. Quelques trucs... jeudi 24 octobre 13

102. Appearance callbacks (with cancel) jeudi 24 octobre 13

103. Appearance callbacks (with cancel) États de transition d’une interaction Transition annulée Fin de la transition interactive Transition achevée Transition terminée jeudi 24 octobre 13

104. Appearance callbacks (with cancel) États de transition d’une interaction États d’apparance d’un contrôleur Appearing Appeared Disappeared Disappearing Transition annulée Fin de la transition interactive Transition achevée Transition terminée jeudi 24 octobre 13

105. Appearance callbacks (with cancel) États de transition d’une interaction États d’apparance d’un contrôleur Appearing Appeared Disappeared Disappearing Transition annulée Fin de la transition interactive Transition achevée Transition terminée viewDidAppear: jeudi 24 octobre 13 n’est pas toujours appelé après viewWillAppear:

106. <UIViewControllerTransitionCoordinator> //Connaître l’état de votre contrôleur jeudi 24 octobre 13

107. <UIViewControllerTransitionCoordinator> //Connaître l’état de votre contrôleur @protocol UIViewControllerTransitionCoordinator <UIViewControllerTransitionCoordinatorContext> @optional - (BOOL) notifyWhenInteractionEndsUsingBlock: (void (^ (id<UIViewControllerTransitionCoordinatorContext)handler; - (BOOL) animatorAlongsideTransition: (void (^) (id <UIViewControllerTransitionCoordinatorContext)a; completion:(void (^)(id<UIViewControllerTransitionCoordinatorContext)c; - (BOOL) animatorAlongsideTransitionInView:(UIView *)view animation: (void (^) (id<UIViewControllerTransitionCoordinatorContext)a; @end jeudi 24 octobre 13

110. <UIViewControllerTransitionCoordinatorContext> //Le contexte de transition associé jeudi 24 octobre 13

111. <UIViewControllerTransitionCoordinatorContext> //Le contexte de transition associé @protocol UIViewControllerTransitionCoordinatorContext <NSObject> - (UIView *)containerView; (UIViewController *) viewControllerForKey:(NSString *)key; (CGRect) initialFrameForViewController:(UIViewController *)vc; (CGRect) finalFrameForViewController:(UIViewController *)vc; - (BOOL) isCancelled; - (BOOL) initiallyInteractive; - (BOOL) isInteractive; @end jeudi 24 octobre 13

112. <UIViewControllerTransitionCoordinatorContext> //Le contexte de transition associé @protocol UIViewControllerTransitionCoordinatorContext <NSObject> - (UIView *)containerView; (UIViewController *) viewControllerForKey:(NSString *)key; (CGRect) initialFrameForViewController:(UIViewController *)vc; (CGRect) finalFrameForViewController:(UIViewController *)vc; - (BOOL) isCancelled; - (BOOL) initiallyInteractive; - (BOOL) isInteractive; @end jeudi 24 octobre 13

113. viewWillAppear: implementation (in context) //Pour éviter les problèmes jeudi 24 octobre 13

114. viewWillAppear: implementation (in context) //Pour éviter les problèmes - (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]; } }]; } } jeudi 24 octobre 13

118. Communauté : VCTransitionsLibrary jeudi 24 octobre 13

119. Communauté : VCTransitionsLibrary https://github.com/ColinEberhardt/VCTransitionsLibrary pod ‘VCTransitionsLibrary’, ‘~> 1.1’ jeudi 24 octobre 13

120. Références jeudi 24 octobre 13

121. Références - WWDC 2013 : Session 218 - Custom Transitions Using View Controllers by Bruce D. Nilo - Schémas d’interactions / Sample code... - Teehan+lax : Custom UIViewController transitions - VCTransitionLibrary by ColinEberhardt on GitHub - Teehan+lax : Introduction to UIKitDynamics jeudi 24 octobre 13

122. Merci de votre attention jeudi 24 octobre 13

123. Merci de votre attention Des Questions ? jeudi 24 octobre 13

124. CocoaHeads #14 http://cocoaheads.fr/rennes iOS 7 - Controller Transitions Mail : david.bonnet@cocoaheads.fr Twitter : @iGranDav GitHub : http://github.com/iGranDav App : CarMusic (en préparation pour iOS 7) http://carmusicapp.com/ jeudi 24 octobre 13 julien@cocoaheads.fr thomas.dupont@cocoaheads.fr david.bonnet@cocoaheads.fr

CocoaHeads Rennes #14: iOS7 Controllers Transitions

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (12)

Mehr von CocoaHeadsRNS

Mehr von CocoaHeadsRNS (14)

CocoaHeads Rennes #14: iOS7 Controllers Transitions