Embed Size (px)
Citation preview
CALAYER / CORE ANIMATIONINTRODUCTION AUX ANIMATIONS PERSONNALISÉES
1 MAI 2023 BACKELITE 2
SOMMAIRE
IntroductionLes animations implicitesLes animations explicites
INTRODUCTION
1 MAI 2023 BACKELITE 4
CALAYER
C’est quoi ?
• Gère le contenu visuel dans une vue• Peut être animé
1 MAI 2023 BACKELITE 5
CALAYER
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
1 MAI 2023 BACKELITE 6
CORE ANIMATION
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
1 MAI 2023 BACKELITE 7
CORE ANIMATION
CABasicAnimation CAAnimationGroup CAKeyframeAnimation
Exemples de propriétés :• autoreverses• repeatCount• timingFunction• delegate
Comment ?
LES ANIMATIONS IMPLICITES
1 MAI 2023 BACKELITE 9
LES ANIMATIONS IMPLICITES
• Induite par un changement de propriété
self.customLayer.opacity = 0.2;
• Ne fonctionne pas sur le layer directement rattaché à la vue
1 MAI 2023 BACKELITE 10
CATRANSACTION
• 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];
LES ANIMATIONS EXPLICITES
1 MAI 2023 BACKELITE 12
ANIMATION BASIQUE
• 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"];
1 MAI 2023 BACKELITE 13
LAYER TREE / PRESENTATION TREE
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.
1 MAI 2023 14
PAS DE SYNCHRONISATION DES LAYERS
BACKELITE
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
1 MAI 2023 BACKELITE 15
SYNCHRONISER LE LAYER TREE ET LE PRESENTATION TREE
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"];
1 MAI 2023 16
SYNCHRONISATION DES LAYERS
BACKELITE
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
1 MAI 2023 BACKELITE 17
GROUPE D’ANIMATIONS
• 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
1 MAI 2023 BACKELITE 18
KEY FRAME ANIMATION
• 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;
1 MAI 2023 BACKELITE 19
STOPPER UNE ANIMATION
• Toutes les animations[self.customLayer removeAllAnimations];
• Une animation en particulier[self.customLayer removeAnimationForKey:@"move"];
1 MAI 2023 BACKELITE 20
www.backelite.com
CONTACTEZ-NOUSCOUDSI JulienDéveloppeur iOS
