Télécharger pour lire hors ligne
![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](https://image.slidesharecdn.com/cocoaheadscalayercoreanimation-160922155842/75/CA-Layer-Core-Animation-Cocoaheads-Montpellier-5-2048.jpg)
![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];](https://image.slidesharecdn.com/cocoaheadscalayercoreanimation-160922155842/75/CA-Layer-Core-Animation-Cocoaheads-Montpellier-10-2048.jpg)
![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"];](https://image.slidesharecdn.com/cocoaheadscalayercoreanimation-160922155842/75/CA-Layer-Core-Animation-Cocoaheads-Montpellier-12-2048.jpg)
![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"];](https://image.slidesharecdn.com/cocoaheadscalayercoreanimation-160922155842/75/CA-Layer-Core-Animation-Cocoaheads-Montpellier-15-2048.jpg)
![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](https://image.slidesharecdn.com/cocoaheadscalayercoreanimation-160922155842/75/CA-Layer-Core-Animation-Cocoaheads-Montpellier-17-2048.jpg)
![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;](https://image.slidesharecdn.com/cocoaheadscalayercoreanimation-160922155842/75/CA-Layer-Core-Animation-Cocoaheads-Montpellier-18-2048.jpg)
![STOPPER UNE ANIMATION
22.09.16 BACKELITE 19
• Toutes les animations
[self.customLayer removeAllAnimations];
• Une animation en particulier
[self.customLayer removeAnimationForKey:@"move"];](https://image.slidesharecdn.com/cocoaheadscalayercoreanimation-160922155842/75/CA-Layer-Core-Animation-Cocoaheads-Montpellier-19-2048.jpg)
Téléchargé parIdean France
CA Layer / Core Animation {Cocoaheads Montpellier}
Ce document présente une introduction aux animations personnalisées via Core Animation et CALayer, expliquant les concepts d'animations implicites et explicites. Il décrit également les principales propriétés des calayers, les classes d'animation disponibles, ainsi que les méthodes de synchronisation entre le model layer et le presentation layer. En outre, il aborde la création et la gestion des animations à l'aide de CAAnimationGroup et CAKeyframeAnimation.
CA Layer / Core Animation {Cocoaheads Montpellier}
- 1. CALAYER / COREANIMATION INTRODUCTION AUX ANIMATIONS PERSONNALISÉES
- 2. SOMMAIRE Introduction Les animations implicites Lesanimations explicites 22.09.16 BACKELITE 2
- 3.
- 4. CALAYER 22.09.16 BACKELITE 4 C’estquoi ? • 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 BACKELITE6 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 BACKELITE7 CABasicAnimation CAAnimationGroup CAKeyframeAnimation Exemples de propriétés : • autoreverses • repeatCount • timingFunction • delegate Comment ?
- 8.
- 9. LES ANIMATIONS IMPLICITES 22.09.16BACKELITE 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.
- 12. ANIMATION BASIQUE 22.09.16 BACKELITE12 • 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 SYNCHRONISATIONDES 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 LAYERTREE 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.16BACKELITE 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 BACKELITE17 • 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.16BACKELITE 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.16BACKELITE 19 • Toutes les animations [self.customLayer removeAllAnimations]; • Une animation en particulier [self.customLayer removeAnimationForKey:@"move"];
- 20.
Notes de l'éditeur
- #5 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
- #7 Ajout = lance l’animation Pour stopper : on enlève l’animation du layer
- #10 Désactivé par UIKit
- #13 Montrer que l’animation n’est pas conservée à l’écran
- #14 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
- #15 Utiliser le delegate pour montrer les valeurs
- #16 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.
- #18 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
- #19 Montrer un exemple de shake Montrer un exemple avec un CGPath
- #20 Montrer un exemple de shake Montrer un exemple avec un CGPath