core animation pour les nul ls et les moins nuls

CoreAnimation pour les NULLs et les moins nuls

Romain Vincensromain@nomadplanet.fr

CoreAnimationc’est quoi?

• QuartzCore.framework

• Visualisation de données

• Accélération GPU

• Threads séparés

• Développements simplifiés

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

Pour le développeur

• État de départ / état d’arrivée

• Interpolation automatique: «Générateur d’états intermédiaires»courbes-fonction du temps

• Niveau UIView / Niveau CALayer

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

Courbes

Linéaire

EaseOut

EaseIn

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

EaseInOut

Animations niveau UIKit

• OS 2.0 et +

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

[UIView beginAnimations:nil context:nil];[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];[UIView setAnimationDuration:0.5];[UIView setAnimationDelegate:myView];[UIView setAnimationDidStopSelector:@selector(removeFromSuperview)];

[myView setAlpha:0.0];

[UIView commitAnimations];

Animations niveau UIKit

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ [myView setAlpha:0.0]; } completion:^(BOOL finished) { [myView removeFromSuperview]; }];

• OS 4.0 et +

Enchainements

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

- (void) anim1 { [UIView beginAnimations:nil context:nil]; [UIView setAnimationCurve:UIViewAnimationCurveLinear]; [UIView setAnimationDuration:0.3]; [UIView setAnimationDelegate:self]; if(someConditions) { [UIView setAnimationDidStopSelector:@selector(anim2)]; } else { [UIView setAnimationDidStopSelector:@selector(anim3)]; } // Animations [UIView commitAnimations];}

• Syntaxe «classique»

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

- (void) anim1 { [UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ // animate stuff } completion:^(BOOL finished) { [UIView animateWithDuration:0.5 animations:^{ // animate something else }]; }];}

Enchainements

• Syntaxe des blocs

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

• Passage de blocs en paramètres

- (void) someMethod { ... [self animateWithCompletionBlock:^{

[object1 removeFromSuperview]; }]; ...} - (void) animateWithCompletionBlock:(void (^)(void))block { [UIView animateWithDuration:0.5

delay:0.0 options:UIViewAnimationOptionCurveEaseInOut

animations:^{ // animate

} completion:^(BOOL finished) {

if(block != nil) { block(); } }];

}

Animationsniveau CALayer

• Toute UIView a une layer non nulle

• Cette layer est un CALayer

• UIView est une couche d’abstraction au-dessus de CALayer

ex: myView.alpha = 0.0; <~> myView.layer.opacity = 0.0;

• Sublayers

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

Core AnimationVue d’ensemble

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

Les animations• CAPropertyAnimation

• keypath : la propriété à animer

• CABasicAnimation

• fromValue, toValue, byValue

• CAKeyframeAnimation

• values/path

• keytimes, timingFunctions, calculationModes

• CAAnimationGroupCoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

Animatable properties

anchorPoint

backgroundColor

backgroundFilters

borderColor

borderWidth

bounds

compositingFilter

contents

contentsRect

cornerRadius

doubleSided

filtersframe

hidden

mask

masksToBounds

opacity

position

shadowColor

shadowOffset shadowOpacity

shadowRadius

sublayers

sublayerTransform

transform

zPosition

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

Les animations

• Que fais CoreAnimation?

• Création de toutes les frames, par interpolation

• addAnimation joue l’animation, frame par framece sont les presentationLayer

• En fin d’animation, la layer prendra la valeur spécifiée après l’ajout de l’animation

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"opacity"];anim.duration = 0.5;anim.fromValue = [NSNumber numberWithFloat:1.0];anim.toValue = [NSNumber numberWithFloat:0.1];[myLayer addAnimation:theAnimation forKey:@"animateOpacity"];[myLayer setOpacity:[NSNumber numberWithFLoat:0.1]];

Les animations

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"opacity"];anim.duration = 0.5;anim.fromValue = [NSNumber numberWithFloat:1.0];anim.toValue = [NSNumber numberWithFloat:0.1];[myLayer addAnimation:theAnimation forKey:@"animateOpacity"];[myLayer setOpacity:[NSNumber numberWithFLoat:0.1]];

Exemple sur une animation linéaire

0.5s

Étatinitial

Étatfinal

presentationLayers

Transactions

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

• Implicites vs explicites

• Les transactions explicites permettent

• d’overrider les propriétés des animations

• de spécifier un bloc de completion

[CATransaction begin];[CATransaction setAnimationDuration:0.3];[CATransaction setCompletionBlock:^{ [self doSomething];}];// Add animation to layer[CATransaction commit];

Animer des propriétés custom

• CoreAnimation peut animer des propriétés qui ne font pas partie des animatable properties

• Du moment qu’elles représentent des nombres (types primitifs ou NSNumbers)

• A charge au développeur de dire à quoi correspondent ces propriétés

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

Animer des propriétés custom

• Hériter de CALayer

• 3 méthodes indispensables à implémenter

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

- (id)initWithLayer:(id)layer;+ (BOOL)needsDisplayForKey:(NSString*)key;- (void)drawInContext:(CGContextRef)ctx;

Démo

c’est mieux qu’un long discours

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

Performances

• Très bonnes (GPU)

• Du moment que les layers restent opaques

• Mais dans certains cas on ne peut faire autrement

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

layer.opaque = YES;

Démo

(ça sent la fin)

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

One more thing

parce que moi aussi je le vaux bien !

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011

Des questions?

Merci

CoreAnimation - Romain Vincens - Cocoaheads - 10 mars 2011