1. CALAYER / CORE ANIMATION
INTRODUCTION AUX ANIMATIONS PERSONNALISÉES

2. SOMMAIRE
Introduction
Les animations implicites
Les animations explicites
22.09.16 BACKELITE 2

3. INTRODUCTION

4. CALAYER
22.09.16 BACKELITE 4
C’est quoi ?
• Gère le contenu visuel dans une vue
• Peut être animé

5. CALAYER
22.09.16 BACKELITE 5
Comment ?
CALayer *customLayer = [CALayer layer];
CALayer *viewLayer = self.view.layer;
[self.view.layer addSublayer:newLayer];
[newLayer removeFromSuperlayer];
Exemples de propriétés :
• cornerRadius
• borderWith
• backgroundColor
• shadowRadius

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

7. CORE ANIMATION
22.09.16 BACKELITE 7
CABasicAnimation CAAnimationGroup CAKeyframeAnimation
Exemples de propriétés :
• autoreverses
• repeatCount
• timingFunction
• delegate
Comment ?

8. LES ANIMATIONS IMPLICITES

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];

11. LES ANIMATIONS EXPLICITES

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"];

20. julien.coudsi@backelite.com
www.backelite.com
CONTACTEZ-NOUS
COUDSI Julien
Développeur iOS
22.09.16 BACKELITE 20