Core animation pour les nul ls et les moins nuls

CoreAnimation pour les NULLs et les moins nuls

Romain [email protected]

mailto:[email protected]

mailto:[email protected]

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


Courbes

Linéaire

EaseOut

EaseIn


EaseInOut

Animations niveau UIKit

• OS 2.0 et +


[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


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

• OS 4.0 et +

Enchainements


- (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»


- (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


• 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


Core AnimationVue d’ensemble


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


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


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


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


• 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


Animer des propriétés custom

• Hériter de CALayer

• 3 méthodes indispensables à implémenter


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

Démo

c’est mieux qu’un long discours


Performances

• Très bonnes (GPU)

• Du moment que les layers restent opaques

• Mais dans certains cas on ne peut faire autrement


layer.opaque = YES;

Démo

(ça sent la fin)


One more thing

parce que moi aussi je le vaux bien !


Des questions?

Merci


Documents

Core animation pour les nul ls et les moins nuls