Tag Archives: animation events

Seven days with Titanium – day 6 – animations and transforms

Almost any UI element can be animated and transformed, allowing you to add to your application some eye candy or simply take advantage of predefined elements to give them a new role. For those familiar with CSS3 animations this will come very easy as the concept it’s pretty the same.

Animations

Pointless to say, an animation will change one or more properties of an element form the current stage to another (set by us) in a period of time.

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

The simple code above will animate the height of my_view from 20 to 100.

You can complicate the things more adding more properties to animate (like the background color, opacity, etc), a duration (that needs to be in ms) and a curve (like ease-out or liniar, etc)

Some examples

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
});

If you need to make an animation to come back to the element’s original state and repeat it several times, there are 2 properties that might interest you :repeat and autoreverse

The below code will make the view “pulse” 3 times.

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
});

The animations have 2 events: start and complete.The complete event is very useful because we can chain more animations one after another or start some other actions when the current one stops.

Transforms

Similar to CSS3 transforms, in Titanium you can use 2D or 3D transforms.

Basically you create a 2D or a 3D matrix for the transform or use the predefined “shortcuts” – (like scale or rotate) and pass this transform to the object you are creating or to the animation.

An example with transforms

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
});

The best resources to see how everything works are the examples provided by the Appcelerator team in the KitchenSink, the entry point being here:http://bit.ly/eiow0B

These animations and transforms are not suited to a very intensive usage (like games) but they can be used with success to improve the apps’ look and feel – and with this, the user experience.

As always, I wait for your questions, suggestions and what are you come up with 🙂
Check the Spanish version of this post:
Siete días con Titanium – día 6 – animaciones y transformaciones