CocoaHeads Rennes #14: iOS7 Controllers Transitions

3,450 views
3,425 views

Published on

La traditionnelle mise à jour annuelle de nos petits bijoux de poche est moins discrète cette année avec une remise à plat de son design … Mais il y a aussi de très nombreuses nouveautés pour les développeurs. UIKit Dynamics, les motions events et les custom transitions en font partie. Elles renouvellent notre expérience des interfaces UIKit.
David Bonnet (créateur de CarMusic) est venu nous parler des custom transitions. Après une courte introduction et quelques exemples, vous devriez repartir avec plein d’idées pour personnaliser votre app…

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,450
On SlideShare
0
From Embeds
0
Number of Embeds
2,475
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CocoaHeads Rennes #14: iOS7 Controllers Transitions

  1. 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. 2. jeudi 24 octobre 13
  3. 3. iOS 7 - Controller transitions - Tour d’horizon... What’s new ! jeudi 24 octobre 13
  4. 4. iOS 7 - Controller transitions - Tour d’horizon... What’s new ! - Controllers Transitions et Custom transitions jeudi 24 octobre 13
  5. 5. iOS 7 - Controller transitions - Tour d’horizon... What’s new ! - Controllers Transitions et Custom transitions - Interactive transitions jeudi 24 octobre 13
  6. 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. 7. Tour d’horizon... What’s new jeudi 24 octobre 13
  8. 8. Tour d’horizon... What’s new jeudi 24 octobre 13
  9. 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. 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. 11. UIMotion Effects jeudi 24 octobre 13
  12. 12. UIMotion Effects jeudi 24 octobre 13
  13. 13. UIKit Dynamics jeudi 24 octobre 13
  14. 14. UIKit Dynamics - Arrivée de la physique dans UIKit ! - Gravité / Ressorts / Gestion des collisions... - Interractions entre éléments jeudi 24 octobre 13
  15. 15. Custom Transitions jeudi 24 octobre 13
  16. 16. Custom Transitions Que peux-t’on personnaliser ? jeudi 24 octobre 13
  17. 17. Presentation and Dismissals UITabBarController UINavigationController UICollectionViewController layout-to-layout transitions Custom Transitions Que peux-t’on personnaliser ? jeudi 24 octobre 13
  18. 18. Presentation and Dismissals UITabBarController UINavigationController UICollectionViewController layout-to-layout transitions Custom Transitions Quelles transitions précisément ? jeudi 24 octobre 13
  19. 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. 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. 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. 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. 23. Demo jeudi 24 octobre 13
  24. 24. Anatomie d’une transition Début de la transition jeudi 24 octobre 13
  25. 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. 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. 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. 28. Anatomie d’une transition Fin de la transition Window Parent VC Child A jeudi 24 octobre 13 Parent View View
  29. 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. 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. 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. 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. 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. 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. 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. 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. 37. Anatomie d’une transition jeudi 24 octobre 13
  38. 38. 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, ...) jeudi 24 octobre 13
  39. 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. 40. Code et nouvelles APIs jeudi 24 octobre 13
  41. 41. Custom transitions : les protocols jeudi 24 octobre 13
  42. 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. 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. 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. 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. 46. <UIViewControllerContextTransitioning> //Le contexte de transition fourni par iOS jeudi 24 octobre 13
  47. 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
  48. 48. <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
  49. 49. <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
  50. 50. <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
  51. 51. <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. 52. <UIViewControllerAnimatedTransitioning> //Le contrôleur d’animation jeudi 24 octobre 13
  53. 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
  54. 54. <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
  55. 55. <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
  56. 56. <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. 57. <UIViewControllerTransitioningDelegate> //Celui qui fourni l’animateur et l’interacteur jeudi 24 octobre 13
  58. 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
  59. 59. <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
  60. 60. <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
  61. 61. Demo jeudi 24 octobre 13
  62. 62. UIView new Animation APIs jeudi 24 octobre 13
  63. 63. UIView new Animation APIs - Disabling and enabling animations +(void)setAnimationsEnabled:(BOOL) +(void)performWithoutAnimation:(void ^(void))actions; jeudi 24 octobre 13
  64. 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. 65. UIView new Animation APIs jeudi 24 octobre 13
  66. 66. UIView new Animation APIs - KeyFrame animations +(void)animateKeyframesWithDuration... (~ CAKeyFrameAnimation) +(void)animateWithDuration... jeudi 24 octobre 13 (~ CABasicAnimation)
  67. 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. 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. 69. Vous savez désormais écrire des transitions de présentation personnalisées... jeudi 24 octobre 13
  70. 70. Vous savez désormais écrire des transitions de présentation personnalisées... Comment interragir avec elles...? jeudi 24 octobre 13
  71. 71. Interactive Transitions jeudi 24 octobre 13
  72. 72. UINavigationController Interactive pop gesture sur toutes les apps iOS 7 Interactive Transitions jeudi 24 octobre 13
  73. 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. 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. 75. États d’une transition interactive États Acteurs jeudi 24 octobre 13
  76. 76. États d’une transition interactive États Aucune transition Acteurs Interactive Event Handler jeudi 24 octobre 13 Interactor Animator Context
  77. 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. 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. 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. 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. 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. 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. 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. 84. <UIViewControllerInteractiveTransitioning> //Le contrôlleur d’interractions jeudi 24 octobre 13
  85. 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
  86. 86. <UIViewControllerInteractiveTransitioning> //Le contrôlleur d’interractions @protocol UIViewControllerInteractiveTransitioning <NSObject> - (void)startInteractiveTransition:(id <UIViewControllerContextTransitioning>)ctx; @optional - (CGFloat)completionSpeed; - (UIViewAnimationCurve)completionCurve; @end jeudi 24 octobre 13
  87. 87. <UIViewControllerInteractiveTransitioning> //Le contrôlleur d’interractions @protocol UIViewControllerInteractiveTransitioning <NSObject> - (void)startInteractiveTransition:(id <UIViewControllerContextTransitioning>)ctx; @optional - (CGFloat)completionSpeed; - (UIViewAnimationCurve)completionCurve; @end jeudi 24 octobre 13
  88. 88. <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. 89. <UIPercentDrivenInteractiveTransition> //La manière la plus simple jeudi 24 octobre 13
  90. 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
  91. 91. <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
  92. 92. <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
  93. 93. <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
  94. 94. <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
  95. 95. <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
  96. 96. Demo jeudi 24 octobre 13
  97. 97. UICollectionView interactive transitions jeudi 24 octobre 13
  98. 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. 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. 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. 101. Quelques trucs... jeudi 24 octobre 13
  102. 102. Appearance callbacks (with cancel) jeudi 24 octobre 13
  103. 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. 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. 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. 106. <UIViewControllerTransitionCoordinator> //Connaître l’état de votre contrôleur jeudi 24 octobre 13
  107. 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
  108. 108. <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
  109. 109. <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. 110. <UIViewControllerTransitionCoordinatorContext> //Le contexte de transition associé jeudi 24 octobre 13
  111. 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. 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. 113. viewWillAppear: implementation (in context) //Pour éviter les problèmes jeudi 24 octobre 13
  114. 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
  115. 115. 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
  116. 116. 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
  117. 117. 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. 118. Communauté : VCTransitionsLibrary jeudi 24 octobre 13
  119. 119. Communauté : VCTransitionsLibrary https://github.com/ColinEberhardt/VCTransitionsLibrary pod ‘VCTransitionsLibrary’, ‘~> 1.1’ jeudi 24 octobre 13
  120. 120. Références jeudi 24 octobre 13
  121. 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. 122. Merci de votre attention jeudi 24 octobre 13
  123. 123. Merci de votre attention Des Questions ? jeudi 24 octobre 13
  124. 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

×