CALAYER / CORE ANIMATION
INTRODUCTION AUX ANIMATIONS PERSONNALISÉES
SOMMAIRE
Introduction
Les animations implicites
Les animations explicites
22.09.16 BACKELITE 2
INTRODUCTION
CALAYER
22.09.16 BACKELITE 4
C’est quoi ?
• Gère le contenu visuel dans une vue
• Peut être animé
CALAYER
22.09.16 BACKELITE 5
Comment ?
CALayer *customLayer = [CALayer layer];
CALayer *viewLayer = self.view.layer;
[self...
CORE ANIMATION
22.09.16 BACKELITE 6
C’est quoi ?
• API haut niveau fournie par Apple pour créer des animations
• Gère des ...
CORE ANIMATION
22.09.16 BACKELITE 7
CABasicAnimation CAAnimationGroup CAKeyframeAnimation
Exemples de propriétés :
• autor...
LES ANIMATIONS IMPLICITES
LES ANIMATIONS IMPLICITES
22.09.16 BACKELITE 9
• Induite par un changement de propriété
self.customLayer.opacity = 0.2;
• ...
CATRANSACTION
22.09.16 BACKELITE 10
• Possibilité de modifier l’animation implicite via une CATransaction
[CATransaction b...
LES ANIMATIONS EXPLICITES
ANIMATION BASIQUE
22.09.16 BACKELITE 12
• Une animation simple qui porte sur une propriété du layer
• Utilise la classe CA...
LAYER TREE / PRESENTATION TREE
22.09.16 BACKELITE 13
Layer tree Presentation tree
Model layer Presentation layer
• Visible...
PAS DE SYNCHRONISATION DES LAYERS
22.09.16 BACKELITE 14
Début
Model layer
opacity = 1
Presentation layer
opacity = 1
Model...
SYNCHRONISER LE LAYER TREE ET LE PRESENTATION TREE
22.09.16 BACKELITE 15
1) Modifier l’attribut à animer (model layer)
sel...
SYNCHRONISATION DES LAYERS
22.09.16 BACKELITE 16
Début
Model layer
opacity = 0.2
Presentation layer
opacity = 1
Model laye...
GROUPE D’ANIMATIONS
22.09.16 BACKELITE 17
• Permet de grouper une série d’animations avec CAAnimationGroup
CAAnimationGrou...
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 ...
STOPPER UNE ANIMATION
22.09.16 BACKELITE 19
• Toutes les animations
[self.customLayer removeAllAnimations];
• Une animatio...
julien.coudsi@backelite.com
www.backelite.com
CONTACTEZ-NOUS
COUDSI Julien
Développeur iOS
22.09.16 BACKELITE 20
Prochain SlideShare
Chargement dans…5
×

CA Layer / Core Animation {Cocoaheads Montpellier}

222 vues

Publié le

Introduction aux animations personnalisées avec CALayer et CAAnimation.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
222
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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
  • CA Layer / Core Animation {Cocoaheads Montpellier}

    1. 1. CALAYER / CORE ANIMATION INTRODUCTION AUX ANIMATIONS PERSONNALISÉES
    2. 2. SOMMAIRE Introduction Les animations implicites Les animations explicites 22.09.16 BACKELITE 2
    3. 3. INTRODUCTION
    4. 4. CALAYER 22.09.16 BACKELITE 4 C’est quoi ? • Gère le contenu visuel dans une vue • Peut être animé
    5. 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. 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. 7. CORE ANIMATION 22.09.16 BACKELITE 7 CABasicAnimation CAAnimationGroup CAKeyframeAnimation Exemples de propriétés : • autoreverses • repeatCount • timingFunction • delegate Comment ?
    8. 8. LES ANIMATIONS IMPLICITES
    9. 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. 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. 11. LES ANIMATIONS EXPLICITES
    12. 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. 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. 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. 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. 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. 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. 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. 19. STOPPER UNE ANIMATION 22.09.16 BACKELITE 19 • Toutes les animations [self.customLayer removeAllAnimations]; • Une animation en particulier [self.customLayer removeAnimationForKey:@"move"];
    20. 20. julien.coudsi@backelite.com www.backelite.com CONTACTEZ-NOUS COUDSI Julien Développeur iOS 22.09.16 BACKELITE 20

    ×