Animar apps iOS

“Una app más animada”
Omar Megdadi Núñez
@nsstudent
jueves, 6 de junio de 13

¿De qué vamos a charlar?
¿Por qué es interesante animar tu app?
¿Cómo se anima una vista?.
¿¿Y un Layer??.
¿Preguntas? vuestras y mías XD.

¿ Por qué es interesante animar tu app?
Llaman mucho la atención.
Podemos educar al usuario en las acciones de
nuestra app.
Remarcar un punto de interés.
Crear nuevas experiencias de usuario.
Es divertido.

Animaciones de Vistas
Crea una interpolación en las propiedades
animables
La vista se encarga de “pintar” la animación.
Dos formas
Bloques.
Begin, Commit. (No recomendado ≥ iOS4)

Animaciones de Vistas
+ animateWithDuration:animations:
+ animateWithDuration:animations:completion:
+ animateWithDuration:delay:options:animations:completion:
+ transitionWithView:duration:options:animations:completion:
+ transitionFromView:toView:duration:options:completion:

Propiedades Animables
Frame:
origin
size.
Bounds
Center
Alpha
BackgroundColor
Transform:
mover.
Escalar.
Rotar.
ContentStrech

Ejemplos de animaciones
[UIView animateWithDuration:0.3 animations:^{
[self.exampleView setAlpha:0];
}];
self.exampleView.alpha=0;
} completion:^(BOOL finished) {
self.exampleView.alpha=1;
}];
}];
[UIView animateWithDuration:0.3 delay:0
options:UIViewAnimationOptionBeginFromCurrentState animations:^{
[self.exampleView frameMoveByYDelta:100];
} completion:^(BOOL finished) {
self.isMove=YES;
}];

Tipos de tiempo
UIViewAnimationOptionCurveEaseIn
UIViewAnimationOptionCurveLinear UIViewAnimationOptionCurveEaseOut

Vamos a una demo

Core Animation
Apple presenta a los desarrolladores
CoreAnimation en el 2007.
Es una capa de abstracción que nos evita tener que
bajar a OpenGL para hacer animaciones mas
complejas.
No hace todo lo que se puede hacer con OpenGL

Core Animation
Diferenciamos Varios Casos
CATransaction
CABasicAnimation
CAKeyframeAnimation
CAAnimationGroup

CATransaction
CATransaction es el mecanismo Core Animation
para el procesamiento de operaciones en el árbol
de layers.
Al Cambiar una propiedad de CALayer se produce
aun animación implícita.
Una CATransaction es generada en cada animación
implícita y la podemos modiﬁcar en el momento.

CABasicAnimation
Permite trabajar con la interpolación entre dos
puntos de la misma manera que las animaciones
anteriores, pero esta vez en el CALayer.
CABasicAnimation* fadeAnim = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
fadeAnim.fromValue = [NSNumber numberWithFloat:0.0];
fadeAnim.toValue = [NSNumber numberWithFloat:30.0];
fadeAnim.duration = 1.0;
[self.exampleView.layer addAnimation:fadeAnim forKey:@"cornerRadius"];
// Change the actual data value in the layer to the final value.
self.exampleView.layer.cornerRadius = 30.0;

Propiedades Animables CALayer
anchorPoint
backgroundColor
borderColor
borderWidth
bounds
contents
contentsRect
cornerRadius
frame
position
shadowColor
shadowRadius
transform
zPosition

CATransform3D
1
0
0
0
0
1
0
0
0
0
1
0
0
0
0
1
En Core Animation podemos jugar con las 3D
CATransform3D es una matriz 4x4 que representa
matemáticamente las transformaciones aﬁnes en
un espacio de tres dimensiones
Podemos trasladar,rotar,escalar e incluso jugar con
la perspectiva.

CATransform3D
1
0
0
Tx
0
1
0
Ty
0
0
1
Tz
0
0
0
1
Ex
0
0
0
0
Ey
0
0
0
0
Ez
0
0
0
0
1
cosø
0
-senø
0
0
1
0
0
senø
0
cosø
0
0
0
0
1
1
0
0
0
0
1
0
0
0
0
1
0
0
0
Fp
1
cosø
-senø
0
0
senø
cosø
0
0
0
0
1
0
0
0
0
1
1
0
0
0
0
cosø
-senø
0
0
senø
cosø
0
0
0
0
0
1

CABasicAnimation
CATransform3D transform=self.exampleView.layer.transform;
transform.m34=-1./100.;
self.exampleView.layer.transform=transform;
CGFloat rotation= 2*M_PI ;
CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation
animationWithKeyPath:@"transform.rotation.y"];
rotationAnimation.fromValue = [NSNumber numberWithFloat:
rotation ];
rotationAnimation.duration = 3;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = 1;
[self.exampleView.layer addAnimation:rotationAnimation
forKey:@"rotationAnimation"];

CAKeyframeAnimation
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath,NULL,self.jummperView.center.x,self.jummperView.center.y);
CGPathAddCurveToPoint(thePath,NULL,self.jummperView.center.x,self.jummperView.center.y-200,
self.jummperView.center.x+100,self.jummperView.center.y-200,
self.jummperView.center.x+100,self.jummperView.center.y);
CGPathAddCurveToPoint(thePath,NULL,self.jummperView.center.+100,self.jummperView.center.y-100,
CGPathAddCurveToPoint(thePath,NULL,self.jummperView.center.x+150,self.jummperView.center.y-50,
self.isJummp=YES;
CAKeyframeAnimation * theAnimation;
// Create the animation object, specifying the position property as the key path.
theAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
theAnimation.path=thePath;
theAnimation.duration=1.0;
theAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
// Add the animation to the layer.
[self.jummperView.layer addAnimation:theAnimation forKey:@"position"];
self.jummperView.center=CGPointMake(self.jummperView.center.x+175,self.jummperView.center.y);

CAMediaTimingFunction
theAnimation.timingFunction=[CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseIn];
[PresentationPlayButtonAnimation setTimingFunction:[CAMediaTimingFunction
functionWithControlPoints:0.1 :1 :0.2 :1.1]];

CAAnimationGroup
Esta Clase nos permite anidar varias animaciones
para ejecutarlas a la par en un mismo CALayer
CAAnimationGroup* group = [CAAnimationGroup animation];
group.animations = [NSArray arrayWithObjects:Anim1,Anim2,Anim3, nil];
group.duration = 5.0;
[self.exampleView.layer addAnimation:group forKey:@"allChanges"];

Volvamos a la demo

Enlaces recomendados
UIView Reference
Core Animation Reference
Charla de Nacho Soto de Core Animation
Repositorio FlatUIKit
Repositorio csscagradientlayer
Repositorio de la Demo

¿Preguntas?
??

Demo Extra

Animar apps iOS

Recomendados

Recomendados

Más contenido relacionado

Similar a Animar apps iOS

Similar a Animar apps iOS (20)

Animar apps iOS