Core animation pour les nul ls et les moins nuls

CoreAnimation pour les
NULLs et les moins nuls

Romain Vincens
romain@nomadplanet.fr

CoreAnimation
c’est quoi?
• QuartzCore.framework
• Visualisation de données
• Accélération GPU
• Threads séparés
• Développements simpliﬁé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

EaseIn

EaseOut

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
• OS 4.0 et +

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


Enchainements
• Syntaxe «classique»
- (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];
}


Enchainements
• Syntaxe des blocs
- (void) anim1 {
delay:0.0
animations:^{
// animate stuff
}
animations:^{
// animate something else
}];
}];
}


• Passage de blocs en paramètres
- (void) someMethod {
...
[self animateWithCompletionBlock:^{
[object1 removeFromSuperview];
}];
...
}

- (void) animateWithCompletionBlock:(void (^)(void))block {
delay:0.0
animations:^{
// animate
}
if(block != nil) {
block();
}
}];
}

Animations
niveau 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 Animation
Vue d’ensemble


Les animations
• CAPropertyAnimation
• keypath : la propriété à animer

• CABasicAnimation
• fromValue, toValue, byValue

• CAKeyframeAnimation
• values/path

• keytimes, timingFunctions, calculationModes

• CAAnimationGroup

Animatable properties
shadowOpacity
shadowOffset
contentsRect
compositingFilter
sublayers transform
doubleSided
borderWidth
anchorPoint
opacity
contents zPosition
backgroundColor cornerRadius
shadowColor masksToBounds
ﬁlters
frame position borderColor
hidden
backgroundFilters bounds
sublayerTransform mask shadowRadius

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]];

• Que fais CoreAnimation?
• Création de toutes les frames, par interpolation
• addAnimation joue l’animation, frame par frame
ce sont les presentationLayer
• En ﬁn d’animation, la layer prendra la valeur
spéciﬁée après l’ajout de l’animation

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
État État
presentationLayers
initial ﬁnal

0.5s

Transactions
• Implicites vs explicites
• Les transactions explicites permettent
• d’overrider les propriétés des animations
• de spéciﬁer 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
layer.opaque = YES;

• Mais dans certains cas on ne peut faire autrement

Démo

(ça sent la ﬁn)


One more thing

parce que moi aussi je le vaux bien !


Des questions?

Merci


Core animation pour les nul ls et les moins nuls

Core animation pour les nul ls et les moins nuls

Recommandé

Contenu connexe

Similaire à Core animation pour les nul ls et les moins nuls

Similaire à Core animation pour les nul ls et les moins nuls(15)

Plus de Mathieu Vaidis

Plus de Mathieu Vaidis(8)

Core animation pour les nul ls et les moins nuls