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

CocoaHeads Rennes #14: iOS7 Controllers Transitions

Jun 12, 2015

Download

Technology

CocoaHeadsRNS

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…
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: CocoaHeads Rennes #14: iOS7 Controllers Transitions

iOS 7 - Controllers Transitionsvous n’aurez plus d’excuse ;-)

David BonnetOctobre 2013

CocoaHeads Rennes #1424 Octobre 2014

jeudi 24 octobre 13

Page 2: CocoaHeads Rennes #14: iOS7 Controllers Transitions

jeudi 24 octobre 13

Page 3: CocoaHeads Rennes #14: iOS7 Controllers Transitions

iOS 7 - Controller transitions

- Tour d’horizon... What’s new !

jeudi 24 octobre 13

Page 4: CocoaHeads Rennes #14: iOS7 Controllers Transitions

iOS 7 - Controller transitions

- Tour d’horizon... What’s new !

- Controllers Transitions et Custom transitions

jeudi 24 octobre 13

Page 5: CocoaHeads Rennes #14: iOS7 Controllers Transitions

iOS 7 - Controller transitions

- Tour d’horizon... What’s new !

- Controllers Transitions et Custom transitions

- Interactive transitions

jeudi 24 octobre 13

Page 6: CocoaHeads Rennes #14: iOS7 Controllers Transitions

iOS 7 - Controller transitions

- Tour d’horizon... What’s new !

- Controllers Transitions et Custom transitions

- Interactive transitions

-Quelques trucs...

jeudi 24 octobre 13

Page 7: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Tour d’horizon... What’s newjeudi 24 octobre 13

Page 8: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Tour d’horizon... What’s new

jeudi 24 octobre 13

Page 9: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Tour d’horizon... What’s new

UIKit Dynamics UIMotion Effects

Custom Transitions with UIViewControllers UIView Animations

APIs

Easier KeyFrame animations

jeudi 24 octobre 13

Page 10: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Tour d’horizon... What’s new

UIKit DynamicsUIMotion Effects

Custom Transitions with UIViewControllers UIView Animations

APIs

Easier KeyFrame animations

jeudi 24 octobre 13

Page 11: CocoaHeads Rennes #14: iOS7 Controllers Transitions

UIMotion Effects

jeudi 24 octobre 13

Page 12: CocoaHeads Rennes #14: iOS7 Controllers Transitions

UIMotion Effects

jeudi 24 octobre 13

Page 13: CocoaHeads Rennes #14: iOS7 Controllers Transitions

UIKit Dynamics

jeudi 24 octobre 13

Page 14: CocoaHeads Rennes #14: iOS7 Controllers Transitions

UIKit Dynamics

- Arrivée de la physique dans UIKit !

- Gravité / Ressorts / Gestion des collisions...

- Interractions entre éléments

jeudi 24 octobre 13

Page 15: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Custom Transitionsjeudi 24 octobre 13

Page 16: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Custom TransitionsQue peux-t’on personnaliser ?

jeudi 24 octobre 13

Page 17: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Custom TransitionsQue peux-t’on personnaliser ?

Presentationand Dismissals UITabBarController

UINavigationController

UICollectionViewControllerlayout-to-layout transitions

jeudi 24 octobre 13

Page 18: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Custom TransitionsQuelles transitions précisément ?

Presentationand Dismissals UITabBarController

UINavigationController

UICollectionViewControllerlayout-to-layout transitions

jeudi 24 octobre 13

Page 19: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Custom TransitionsQuelles transitions précisément ?

Presentationand Dismissals UITabBarController

UINavigationController

UICollectionViewControllerlayout-to-layout transitions

UIModalPresentationFullScreenUIModalPresentationCustom

jeudi 24 octobre 13

Page 20: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Custom TransitionsQuelles transitions précisément ?

Presentationand Dismissals UITabBarController

UINavigationController

UICollectionViewControllerlayout-to-layout transitions

UIModalPresentationFullScreenUIModalPresentationCustom

setSelectedViewController:(UIViewController*)vcsetSelectedIndex:(NSUInteger)idx

jeudi 24 octobre 13

Page 21: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Custom TransitionsQuelles transitions précisément ?

Presentationand Dismissals UITabBarController

UINavigationController

UICollectionViewControllerlayout-to-layout transitions

UIModalPresentationFullScreenUIModalPresentationCustom

setSelectedViewController:(UIViewController*)vcsetSelectedIndex:(NSUInteger)idx

pushViewController:animated:popViewController:animated:setViewControllers:animated:

jeudi 24 octobre 13

Page 22: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Custom TransitionsQuelles transitions précisément ?

Presentationand Dismissals UITabBarController

UINavigationController

UICollectionViewControllerlayout-to-layout transitions

UIModalPresentationFullScreenUIModalPresentationCustom

setSelectedViewController:(UIViewController*)vcsetSelectedIndex:(NSUInteger)idx

pushViewController:animated:popViewController:animated:setViewControllers:animated:

setUseLayoutToLayoutNavigationTransitions:

jeudi 24 octobre 13

Page 23: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Demojeudi 24 octobre 13

Page 24: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Anatomie d’une transitionDébut de la transition

jeudi 24 octobre 13

Page 25: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Anatomie d’une transition

Parent VC

Child A

View Controllers Views Containment Controllers views Superview

Début de la transition

jeudi 24 octobre 13

Page 26: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Anatomie d’une transition

Parent VC

Child A

Window

Parent View

View

View Controllers Views Containment Controllers views Superview

Début de la transition

jeudi 24 octobre 13

Page 27: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Anatomie d’une transition

Parent VC

Child A

Window

Parent View

Child A View

View View

View Controllers Views Containment Controllers views Superview

Début de la transition

jeudi 24 octobre 13

Page 28: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Anatomie d’une transition

Parent VC

Child A

Window

Parent View

View

Fin de la transition

jeudi 24 octobre 13

Page 29: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Anatomie d’une transition

Parent VC

Child A

Window

Parent View

View

View Controllers Views Containment Controllers views Superview

Fin de la transition

jeudi 24 octobre 13

Page 30: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Anatomie d’une transition

Parent VC

Child A

Child B

Window

Parent View

View

View Controllers Views Containment Controllers views Superview

Fin de la transition

jeudi 24 octobre 13

Page 31: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Anatomie d’une transition

Parent VC

Child A

Child B

Window

Parent View

Child B View

View View

View Controllers Views Containment Controllers views Superview

Fin de la transition

jeudi 24 octobre 13

Page 32: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Anatomie d’une transition

Parent VC

Child A

Child B

Window

Parent View

Child B View

View View

View Controllers Views Containment Controllers views Superview

Child A

View View

Fin de la transition

jeudi 24 octobre 13

Page 33: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Anatomie d’une transitionParent

Child A

Child B

Window

ViewChild B

View View

Child A

View View

Etat intérmédiaire

jeudi 24 octobre 13

Page 34: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Container view

Anatomie d’une transitionParent

Child A

Child B

Window

ViewChild B

View ViewChild A

View View

Etat intérmédiaire

jeudi 24 octobre 13

Page 35: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Container view

Anatomie d’une transitionParent

Child A

Child B

Window

ViewChild B

View View

Child A

View View

Etat intérmédiaire

jeudi 24 octobre 13

Page 36: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Container view

Anatomie d’une transitionParent

Child A

Child B

Window

View

Child B

View View

Child A

View View

Etat intérmédiaire

jeudi 24 octobre 13

Page 37: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Anatomie d’une transition

jeudi 24 octobre 13

Page 38: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 39: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 40: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Code et nouvelles APIsjeudi 24 octobre 13

Page 41: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Custom transitions : les protocols

jeudi 24 octobre 13

Page 42: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 43: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 44: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 45: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 46: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<UIViewControllerContextTransitioning>//Le contexte de transition fourni par iOS

jeudi 24 octobre 13

Page 47: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 48: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 49: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 50: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 51: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 52: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<UIViewControllerAnimatedTransitioning>//Le contrôleur d’animation

jeudi 24 octobre 13

Page 53: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 54: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 55: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 56: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 57: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<UIViewControllerTransitioningDelegate>//Celui qui fourni l’animateur et l’interacteur

jeudi 24 octobre 13

Page 58: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 59: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 60: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 61: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Demojeudi 24 octobre 13

Page 62: CocoaHeads Rennes #14: iOS7 Controllers Transitions

UIView new Animation APIs

jeudi 24 octobre 13

Page 63: CocoaHeads Rennes #14: iOS7 Controllers Transitions

UIView new Animation APIs- Disabling and enabling animations

+(void)setAnimationsEnabled:(BOOL)

+(void)performWithoutAnimation:(void ^(void))actions;

jeudi 24 octobre 13

Page 64: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 65: CocoaHeads Rennes #14: iOS7 Controllers Transitions

UIView new Animation APIs

jeudi 24 octobre 13

Page 66: CocoaHeads Rennes #14: iOS7 Controllers Transitions

UIView new Animation APIs- KeyFrame animations

+(void)animateKeyframesWithDuration... (~ CAKeyFrameAnimation)

+(void)animateWithDuration... (~ CABasicAnimation)

jeudi 24 octobre 13

Page 67: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 68: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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 Dynamicsjeudi 24 octobre 13

Page 69: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Vous savez désormais écrire des transitions de présentation

personnalisées...

jeudi 24 octobre 13

Page 70: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Vous savez désormais écrire des transitions de présentation

personnalisées...

Comment interragir avec elles...?

jeudi 24 octobre 13

Page 71: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Interactive Transitionsjeudi 24 octobre 13

Page 72: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Interactive Transitions

UINavigationControllerInteractive pop gesture sur toutes les apps

iOS 7

jeudi 24 octobre 13

Page 73: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Interactive Transitions

UINavigationControllerInteractive pop gesture sur toutes les apps

iOS 7

Custom interactive transitionsPas forcément pilotées par un geste

Gestion de l’annulation

jeudi 24 octobre 13

Page 74: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Interactive Transitions

UINavigationControllerInteractive pop gesture sur toutes les apps

iOS 7

Custom interactive transitionsPas forcément pilotées par un geste

Gestion de l’annulation

UIPercentDrivenInteractiveTransition

jeudi 24 octobre 13

Page 75: CocoaHeads Rennes #14: iOS7 Controllers Transitions

États d’une transition interactiveÉtats

Acteurs

jeudi 24 octobre 13

Page 76: CocoaHeads Rennes #14: iOS7 Controllers Transitions

États d’une transition interactive

Aucune transition

États

Acteurs

Interactive Event Handler Interactor Animator Context

jeudi 24 octobre 13

Page 77: CocoaHeads Rennes #14: iOS7 Controllers Transitions

États d’une transition interactive

Aucune transition

Début de la transition interactive

États

Acteurs

Interactive Event Handler Interactor Animator Context

jeudi 24 octobre 13

Page 78: CocoaHeads Rennes #14: iOS7 Controllers Transitions

États d’une transition interactive

Aucune transition

Début de la transition interactive

Mise à jour transition interactive

États

Acteurs

Interactive Event Handler Interactor Animator Context

jeudi 24 octobre 13

Page 79: CocoaHeads Rennes #14: iOS7 Controllers Transitions

États d’une transition interactive

Aucune transition

Début de la transition interactive

Mise à jour transition interactive

Fin de la transition interactive

États

Acteurs

Interactive Event Handler Interactor Animator Context

jeudi 24 octobre 13

Page 80: CocoaHeads Rennes #14: iOS7 Controllers Transitions

États d’une transition interactive

Aucune transition

Début de la transition interactive

Mise à jour transition interactive

Fin de la transition interactive

Transition annulée

Transition terminée

États

Acteurs

Interactive Event Handler Interactor Animator Context

jeudi 24 octobre 13

Page 81: CocoaHeads Rennes #14: iOS7 Controllers Transitions

États d’une transition interactive

Aucune transition

Début de la transition interactive

Mise à jour transition interactive

Fin de la transition interactive

Transition annulée

Transition terminée

États

Acteurs

Interactive Event Handler Interactor Animator Context

jeudi 24 octobre 13

Page 82: CocoaHeads Rennes #14: iOS7 Controllers Transitions

États d’une transition interactive

Aucune transition

Début de la transition interactive

Mise à jour transition interactive

Fin de la transition interactive

Transition annulée

Transition terminée

Transition achevée

États

Acteurs

Interactive Event Handler Interactor Animator Context

jeudi 24 octobre 13

Page 83: CocoaHeads Rennes #14: iOS7 Controllers Transitions

États d’une transition interactive

Aucune transition

Début de la transition interactive

Mise à jour transition interactive

Fin de la transition interactive

Transition annulée

Transition terminée

Transition achevée

États

Acteurs

Interactive Event Handler Interactor Animator Context

jeudi 24 octobre 13

Page 84: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<UIViewControllerInteractiveTransitioning>//Le contrôlleur d’interractions

jeudi 24 octobre 13

Page 85: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<UIViewControllerInteractiveTransitioning>//Le contrôlleur d’interractions

@protocol UIViewControllerInteractiveTransitioning <NSObject>

- (void)startInteractiveTransition:(id <UIViewControllerContextTransitioning>)ctx;

@optional

- (CGFloat)completionSpeed;

- (UIViewAnimationCurve)completionCurve;

@end

jeudi 24 octobre 13

Page 86: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<UIViewControllerInteractiveTransitioning>//Le contrôlleur d’interractions

@protocol UIViewControllerInteractiveTransitioning <NSObject>

- (void)startInteractiveTransition:(id <UIViewControllerContextTransitioning>)ctx;

@optional

- (CGFloat)completionSpeed;

- (UIViewAnimationCurve)completionCurve;

@end

jeudi 24 octobre 13

Page 87: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<UIViewControllerInteractiveTransitioning>//Le contrôlleur d’interractions

@protocol UIViewControllerInteractiveTransitioning <NSObject>

- (void)startInteractiveTransition:(id <UIViewControllerContextTransitioning>)ctx;

@optional

- (CGFloat)completionSpeed;

- (UIViewAnimationCurve)completionCurve;

@end

jeudi 24 octobre 13

Page 88: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<UIViewControllerInteractiveTransitioning>//Le contrôlleur d’interractions

@protocol UIViewControllerInteractiveTransitioning <NSObject>

- (void)startInteractiveTransition:(id <UIViewControllerContextTransitioning>)ctx;

@optional

- (CGFloat)completionSpeed;

- (UIViewAnimationCurve)completionCurve;

@end

jeudi 24 octobre 13

Page 89: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<UIPercentDrivenInteractiveTransition>//La manière la plus simple

jeudi 24 octobre 13

Page 90: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 91: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 92: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 93: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 94: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 95: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 96: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Demojeudi 24 octobre 13

Page 97: CocoaHeads Rennes #14: iOS7 Controllers Transitions

UICollectionView interactive transitions

jeudi 24 octobre 13

Page 98: CocoaHeads Rennes #14: iOS7 Controllers Transitions

UICollectionView interactive transitions- Le suivi de la progression via transitionProgress

- de 0.f à 1.1f (pour l’effet de bouncing)

jeudi 24 octobre 13

Page 99: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 100: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 101: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Quelques trucs...jeudi 24 octobre 13

Page 102: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Appearance callbacks (with cancel)

jeudi 24 octobre 13

Page 103: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Appearance callbacks (with cancel)

Fin de la transition interactive

Transition annulée

Transition terminée

Transition achevée

États de transition d’une interaction

jeudi 24 octobre 13

Page 104: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Appearance callbacks (with cancel)

Fin de la transition interactive

Transition annulée

Transition terminée

Transition achevée

États de transition d’une interaction

Appearing Appeared

DisappearingDisappeared

États d’apparance d’un contrôleur

jeudi 24 octobre 13

Page 105: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Appearance callbacks (with cancel)

Fin de la transition interactive

Transition annulée

Transition terminée

Transition achevée

États de transition d’une interaction

Appearing Appeared

DisappearingDisappeared

États d’apparance d’un contrôleur

viewDidAppear: n’est pas toujours appelé après viewWillAppear:jeudi 24 octobre 13

Page 106: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<UIViewControllerTransitionCoordinator>//Connaître l’état de votre contrôleur

jeudi 24 octobre 13

Page 107: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 108: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 109: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 110: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<UIViewControllerTransitionCoordinatorContext>//Le contexte de transition associé

jeudi 24 octobre 13

Page 111: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 112: CocoaHeads Rennes #14: iOS7 Controllers Transitions

<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

Page 113: CocoaHeads Rennes #14: iOS7 Controllers Transitions

viewWillAppear: implementation (in context)//Pour éviter les problèmes

jeudi 24 octobre 13

Page 114: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 115: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 116: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 117: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 118: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Communauté : VCTransitionsLibrary

jeudi 24 octobre 13

Page 119: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Communauté : VCTransitionsLibrary

https://github.com/ColinEberhardt/VCTransitionsLibrary

pod ‘VCTransitionsLibrary’, ‘~> 1.1’

jeudi 24 octobre 13

Page 120: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Références

jeudi 24 octobre 13

Page 121: CocoaHeads Rennes #14: iOS7 Controllers Transitions

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

Page 122: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Merci de votre attention

jeudi 24 octobre 13

Page 123: CocoaHeads Rennes #14: iOS7 Controllers Transitions

Merci de votre attention

Des Questions ?

jeudi 24 octobre 13