Siete días con Titanium – día 6 – animaciones y transformaciones

Casi cualquier elemento de la interfaz de usuario puede ser animado y transformado, permitiéndote añadir a tu aplicación ciertas mejoras visuales o simplemente aprovechar las ventajas de los elementos predefinidos y darles un nuevo rol. Para aquellos familiarizados con las animaciones CSS3 esto se les hará fácil porque los conceptos son prácticamente los mismos.

Animaciones

Está de más decir que una animación cambiará uno o más propiedades de la forma de un elemento del actual estado a otro (establecido por nosotros) en un período de tiempo.

var my_view =  Titanium.UI.createView({
    backgroundColor:'#f00',
    height:20
});
my_view.animate({height:100});

El código de arriba animará el alto de la forma My_view de 20 a 100.

Puedes complicar las cosas más al añadirle más propiedades que animar (como el fondo, color, opacidad, etc), una duración (que tiene que ser en ms) y una curva (como ease-out o lineal, etc)

Algunos ejemplos

var view = Titanium.UI.createView({
	width:100,
	height:20,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:300, 
	backgroundColor:'#00f', 
	duration:3000, 
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

Si necesitas hacer una animación para hacer volver los elementos a su estado original y repetirlo varias veces, hay dos propiedades que podrían interesarte: repeat y autoreverse.

El código siguiente hará que la vista “pulse” 3 veces.

var view = Titanium.UI.createView({
	width:100,
	height:100,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:130,
	width:130,
	repeat:3,
	autoreverse:true,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

Las animaciones tienen 2 eventos: start (iniciar) y complete (completo). El evento complete es muy útil porque podemos encadenar más animaciones, una detrás de la otra, o iniciar algunas otras acciones cuando la actual finalice.

Transformaciones

Similar a las transformaciones CSS3, en Titanium puedes usar transformaciones en 2D o 3D.

Básicamente puedes crear una matriz 2D o 3D para la transformación o usar los “atajos” predeterminados – (como escalar “scale” o rotar “rotate“) y pasar esta transformación al objeto que estás creando o a la animación.

Un ejemplo de transformaciones

var tr_start = Titanium.UI.create2DMatrix();
tr_start = tr_start.rotate(30);
 
var tr_end = Titanium.UI.create2DMatrix();
tr_end = tr_end.rotate(-30);
tr_end = tr_end.scale(2);
 
var view = Titanium.UI.createView({
	width:100,
	height:100,
	transform:tr_start,
	backgroundColor:'#f00',
});
 
win.add(view);
 
view.animate({
	transform:tr_end,
	repeat:3,
	autoreverse:true,
	duration:500,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

Los mejores recursos para ver cómo todo funciona son los ejemplos provistos por el equipo de Appceletaror en el KitchenSink:http://bit.ly/eiow0B

Estas animaciones y transformaciones no son apropiadas para un uso intenso (como juegos) pero pueden ser utilizadas exitosamente para mejorar la apariencia de las apps – y con esto, la experiencia del usuario.

Como siempre, espero sus preguntas, sugerencias y lo que se les ocurra 🙂

2 thoughts on “Siete días con Titanium – día 6 – animaciones y transformaciones”

Comments are closed.