Desarrollo iOS: Animaciones simples con UIView

Las animaciones son un arma importante a la hora de definir la interfaz de usuario. Muchos piensan que son simples decoraciones para que la experiencia del usuario sea mas agradable. Pero tienen una segunda cara, a mi juicio, más importante: le dan al usuario un feedback bien claro de lo que está sucediendo.

Por ejemplo, cuando en Safari de Snow Leopard hacíamos el gesto de página anterior, no había ninguna animación: veíamos que se cargaba una pagina y luego la pagina anterior aparecía. A más de un usuario novato le pudo haber llevado un tiempito darse cuenta de lo que estaba sucediendo.

En cambio en Safari para Lion, el gesto de ‘Atrás‘ está acompañado de una animación (transición) que desplaza la pagina actual mostrando debajo de ella a la anterior. Es contundente, no hay ninguna duda de la operación que acabamos de hacer. Este es el valor de las animaciones.

En iOS hay 2 formas de implementarlas: una fácil y otra más compleja. La segunda se basa en Core Animation, la librería destinada a realizar transiciones y animaciones. Obviamente con ella tenemos todo el poder que nos permitirá conseguir los mejores resultados. La forma “fácil”, en cambio, está basada en UIView, que lleva las animaciones a la mínima expresión, definiendo un par de métodos y ciertas propiedades “animatables”: transform, frame, backgroundColor, center, alpha, contentStretch y bounds . El resultado: con una sola sentencia logramos generar animaciones.

Veamos algunos casos.

Ensanchar

Una animación por excelencia de iOS es la UISearchBar de Safari, cuando le damos el foco y se agranda para hacer más fácil el ingreso de texto. Para conseguirlo usaremos la propiedad animatable frame, aumentando su size.width. Con esto alcanza para agrandarla y sola se moverá a la izquierda (lo usual es que esté precedida por un Flexible Space):

[UIView animateWithDuration: 0.3 // duración en segundos

delay: 0.0 // sin retardo antes de comenzar

options: UIViewAnimationCurveLinear

animations:^{

searchBar.frame = CGRectMake( searchBar.frame.origin.x,

searchBar.frame.origin.y,

searchBar.frame.size.width+50,

searchBar.frame.size.height);

}

completion:nil];

Latido

Compliquemos un poquito. Sea un botón que al presionarlo se infla y luego vuelve a su tamaño normal. Es una suerte de latido que puede servir para dar feedback de que el botón fue presionado. La propiedad animatable que usaremos es transform, asignándole una matriz que escala el botón un 15% más de su tamaño. Usaremos la opción Autoreverse que ejecuta la animación inversa (visualmente vuelve el botón a su tamaño original). Y cuando la animación termina, forzamos la matriz Identidad, para que realmente transform vuelva a su valor original.

[UIView animateWithDuration: 0.2 // duración en segundos

delay: 0.0 // no hay retardo para comenzar

options: UIViewAnimationOptionAutoreverse // autoreverse

animations:^{

// seteo la matriz al 115%

btnLatido.transform = CGAffineTransformMakeScale(1.15, 1.15);

}

completion:^(BOOL finished){

// vuelvo a la matriz normal

btnLatido.transform = CGAffineTransformIdentity;

}];

Fade in, fade out

Sea una UIImageView a la que tenemos que asignarle una nueva imagen, que mejor que hacer un efecto para desvanecer la primera y que la segunda aparezca suavemente?. La propiedad animatable en este caso es alpha que primero la llevaremos a 0.0 (transparente), asignamos la nueva imagen y luego la volvemos a 1.0. Esto requiere un encadenamiento de animaciones. Una vez que termina la primera (desvanecimiento), se especifica la nueva imagen y se dispara la segunda animación:

[UIView animateWithDuration: 0.5 // medio segundo

animations:^{

image.alpha = 0.0; // alfa a 0.0

}

completion:^(BOOL finished){

if (finished) {

// asigno nueva imagen

image.image = ;

// segunda animacion

[UIView animateWithDuration: 0.5

animations:^{

image.alpha = 1.0;

}];

}

}];

Borrar Imagen

Esta es una animación que representa el borrado de una imagen, similar a la del borrado de emails en iOS 3, pero mas simple: la imagen se reduce al 20% y luego se mueve hacia el botón Borrar, desapareciendo. Este ejemplo combina 3 animatables: transform, center y alpha en 2 animaciones combinadas. Obviamente se puede aplicar para cualquier UIView, no solo unas imágenes:

[UIView animateWithDuration: 0.5

delay: 0.0

options: UIViewAnimationCurveLinear

animations:^{

image.transform = CGAffineTransformMakeScale(0.2, 0.2);

image.alpha = 0.5;

}

completion:^(BOOL finished){

[UIView animateWithDuration: 0.5

animations:^{

image.center = btnBorrar.center;

image.alpha = 0.0;

}];

}];

Como pueden observar, no es un tema complejo que se presta para jugar, probar e inventar. Y luego aplicar en nuestras aplicaciones.

Un artículo de Angel Traversi

0 0 votos
Article Rating
Subscribe
Notify of
0 Comments
Opiniones Inline
Ver todos los comentarios
0
Me encantaría saber tu opinión, por favor, deja un comentariox
()
x