day6

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

4 thoughts on “Seven days with Titanium – day 6 – animations and transforms”

  1. Hi and thanks for explaining the animations.
    I have an app where I have a stopwatch and using your descriptions I’ve managed to get the hand to rotate perfectly. Thanks!
    However, I would like to shade the portion of the stopwatch where the hand has passed. I’ve searched everywhere on how to do this, but cant figure out how to show just a portion of an overlay based upon the time.
    Any hints would be greatly appreciated.

  2. This is a tough one :) The only way I’m seeing this is to try to use multiple images with the shaded zone for each step of the hand, and set each of them as the url of an underlaying image.

  3. Hi, I’m working on some stuff with Titanium and I am using animation.curve = Titanium.UI.ANIMATION_LINEAR, but it still seems that the animation eases out in start and the end. Any ideas? (looks like the constants are undefined)

Comments are closed.