6. CORE ANIMATION
22.09.16 BACKELITE 6
C’est quoi ?
• API haut niveau fournie par Apple pour créer des animations
• Gère des animations implicites et explicites
• S’utilise avec un objet CALayer
9. LES ANIMATIONS IMPLICITES
22.09.16 BACKELITE 9
• Induite par un changement de propriété
self.customLayer.opacity = 0.2;
• Ne fonctionne pas sur le layer directement rattaché à la vue
10. CATRANSACTION
22.09.16 BACKELITE 10
• Possibilité de modifier l’animation implicite via une CATransaction
[CATransaction begin];
[CATransaction setAnimationDuration:4];
self.customLayer.opacity = 0.2;
[CATransaction commit];
• On peut aussi désactiver complètement l’animation
[CATransaction setDisableActions:YES];
12. ANIMATION BASIQUE
22.09.16 BACKELITE 12
• Une animation simple qui porte sur une propriété du layer
• Utilise la classe CABasicAnimation
CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
opacityAnimation.fromValue = @1;
opacityAnimation.toValue = @0.2;
opacityAnimation.duration = 1;
[self.customLayer addAnimation:opacityAnimation forKey:@"opacity"];
13. LAYER TREE / PRESENTATION TREE
22.09.16 BACKELITE 13
Layer tree Presentation tree
Model layer Presentation layer
• Visible à l’écran
• Valeurs pendant l’animation
• Ne pas modifier
• Interagit avec l’application
• Valeurs finales des animations
• Modifiable
Le layer tree et le presentation tree doivent être synchronisés.
14. PAS DE SYNCHRONISATION DES LAYERS
22.09.16 BACKELITE 14
Début
Model layer
opacity = 1
Presentation layer
opacity = 1
Model layer
opacity = 1
Presentation layer
opacity = 0.2
Fin
Model layer
opacity = 1
Presentation layer
opacity = 1
Animation retirée
15. SYNCHRONISER LE LAYER TREE ET LE PRESENTATION TREE
22.09.16 BACKELITE 15
1) Modifier l’attribut à animer (model layer)
self.customLayer.opacity = 0.2;
2) Ajouter l’animation explicite (presentation layer)
CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
opacityAnimation.fromValue = @1;
opacityAnimation.duration = 1;
[self.customLayer addAnimation:opacityAnimation forKey:@"opacity"];
16. SYNCHRONISATION DES LAYERS
22.09.16 BACKELITE 16
Début
Model layer
opacity = 0.2
Presentation layer
opacity = 1
Model layer
opacity = 0.2
Presentation layer
opacity = 0.2
Fin
Model layer
opacity = 0.2
Presentation layer
opacity = 0.2
Animation retirée
17. GROUPE D’ANIMATIONS
22.09.16 BACKELITE 17
• Permet de grouper une série d’animations avec CAAnimationGroup
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 3;
animationGroup.animations = @[ /* liste d’animations */ ];
• La durée de l’animation doit être spécifiée et correcte
18. KEY FRAME ANIMATION
22.09.16 BACKELITE 18
• Spécifie une série de valeurs pour une propriété au fil du temps
• Utilise la classe CAKeyframeAnimation
CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation
animationWithKeyPath:@"position.x"];
keyframeAnimation.duration = 0.3;
keyframeAnimation.values = @[ /* Liste de valeurs */ ];
keyframeAnimation.keyTimes = @[ /* Avancement dans le temps */ ];
• Possibilité d’utiliser un CGPath au lieu de values et keyTimes
keyframeAnimation.path = animationPath;
19. STOPPER UNE ANIMATION
22.09.16 BACKELITE 19
• Toutes les animations
[self.customLayer removeAllAnimations];
• Une animation en particulier
[self.customLayer removeAnimationForKey:@"move"];
Tout ce qui est dessiné et animé dans la vue est dans un CALayer
UIView -> UIKit, gestion des interactions utilisateurs par exemple mais tout ce qui est dessin et animations est délégué à CALayer
Ajout = lance l’animation
Pour stopper : on enlève l’animation du layer
Désactivé par UIKit
Montrer que l’animation n’est pas conservée à l’écran
Layers du model tree : accessibles directement dans le code, ceux avec lesquels l’appli interagit le plus, on leur spécifie les valeurs finales que l’on veut obtenir
Layers du presentation tree : layers durant une animation, ne doit pas être modifié. On peut récupérer un presentation layer pour obtenir les valeurs de l’animation courante
Les deux arbres doivent être synchronisés
Utiliser le delegate pour montrer les valeurs
Il n’y a pas deux lancements d’animation séquentiels, mais un seul. En effet, au prochain cycle de rafraichissement de l’écran, l’animation « cornerRadius » sera bien celle définie explicitement qui aura remplacé l’implicite.
Si chaque animation spécifie sa durée et si l'animation du groupe est supérieure au total des durées, c’est OK
Si chaque animation spécifie sa durée et si l'animation du groupe est inférieure au total des durées, alors on en tient compte (animation tronquée)
Si chaque animation ne spécifie pas sa durée, alors l'animation du groupe gère ça à sa sauce
Si chaque animation spécifie sa durée mais pas l'animation de groupe, ça ne marche pas
Montrer un exemple de shake
Montrer un exemple avec un CGPath
Montrer un exemple de shake
Montrer un exemple avec un CGPath