CA Layer / Core Animation {Cocoaheads Montpellier}

50 %
50 %
Information about CA Layer / Core Animation {Cocoaheads Montpellier}

Published on September 22, 2016

Author: BackeliteAgency

Source: slideshare.net

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

Add a comment