CA Layer / Core Animation {Cocoaheads Montpellier}
•Télécharger en tant que PPTX, PDF•
0 j'aime•676 vues
Introduction aux animations personnalisées avec CALayer et CAAnimation.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (20)
Plus de Idean France
Plus de Idean France (12)
CA Layer / Core Animation {Cocoaheads Montpellier}
- 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 ?
- 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"];
Notes de l'éditeur
- 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