The Animation object defines an animation that can be applied to a view.
An animation object describes the properties of an animation. At its most basic, an animation object represents a single-phase animation with an end state and a duration.
When animate is called on a View, the view is animated from its current state to the state described by the animation object. The properties that can be animated include the view's position, size, colors, transformation matrix and opacity.
Animations can be set to reverse themselves automatically on completion, and to repeat a given number of times. For more complicated effects, multiple animations can be combined in sequence, starting one animation when the previous animation completes.
Use the Titanium.UI.createAnimation method to create an animation object.
Note that when you animate a view's size or position, the actual layout properties (such as
top, left, width, height) are not changed by the animation. See the description of the
animate method for more information.
iOS supports both 2D and 3D matrix transformations in animations.
In iOS, you can also specify an animation curve or easing function to control the pace of the
animation. To use an easing function, set the animation's curve property to one of the
ANIMATION_CURVE constants defined in Titanium.UI. For example,
ANIMATION_CURVE_EASE_IN specifies an animation that
starts slowly and then speeds up.
Finally, iOS also supports transitions between windows or views. You can create a transition
by creating an animation object and setting the view property to the view you want to
transition to. The transition property specifies the transition effect to apply. Use one of
the transition style constants defined in Titanium.UI.iOS.AnimationStyle.
Android supports 2D matrix transformations. Note that the 2DMatrix.rotate method operates differently on Android. Called with a single argument, it rotates from zero to the specified angle. That is, it ignores any existing rotation. Called with two arguments, it interprets the first argument as a "from" angle and the second argument as a "to" angle.
Android doesn't support any animation curves or easing functions. Animations always interpolate linearly between the start state and the end state.
Create a simple animation and apply it to the view. In this example, the view will animate from red to black to orange over 2 seconds.
var view = Titanium.UI.createView({
backgroundColor:'red'
});
var animation = Titanium.UI.createAnimation();
animation.backgroundColor = 'black';
animation.duration = 1000;
var animationHandler = function() {
animation.removeEventListener('complete',animationHandler);
animation.backgroundColor = 'orange';
view.animate(animation);
};
animation.addEventListener('complete',animationHandler);
view.animate(animation);
The following example uses a transformation matrix to animate a view when the view is clicked. The animation rotates and scales the view, then returns it to its original size and position. The entire animation is repeated three times.
var box = Ti.UI.createView({
backgroundColor : 'red',
height : '100',
width : '100'
});
win.add(box);
box.addEventListener('click', function() {
var matrix = Ti.UI.create2DMatrix();
matrix = matrix.rotate(180);
matrix = matrix.scale(2, 2);
var a = Ti.UI.createAnimation({
transform : matrix,
duration : 2000,
autoreverse : true,
repeat : 3
});
box.animate(a);
});
win.add(box);
Create a button and a blue square view. For each click of the button, apply a 90 degree rotation animation pivoted at one of a series of anchor points. In particular, note that an anchor point is configured using the anchorPoint property for Android and the Titanium.UI.View.anchorPoint property for iOS.
var animationType = [
{ name: 'Top Left', anchorPoint: {x:0, y:0} },
{ name: 'Top Right', anchorPoint: {x:1, y:0} },
{ name: 'Bottom Left', anchorPoint: {x:0, y:1} },
{ name: 'Bottom Right', anchorPoint: {x:1, y:1} },
{ name: 'Center', anchorPoint: {x:0.5, y:0.5} }
];
var animationTypeLength = animationType.length;
var animationCount = 0;
var animationTypePointer = 0;
var t = Ti.UI.create2DMatrix();
t = t.rotate(90);
// animation properties
var a = {
transform: t,
duration: 2000,
autoreverse: true
};
Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow();
var view = Ti.UI.createView({
backgroundColor:'#336699',
width:100, height:100
});
win.add(view);
var button = Ti.UI.createButton({
title:'Animate ' + animationType[animationTypePointer].name,
height: (Ti.UI.Android) ? 80 : 40,
width: (Ti.UI.Android) ? 300 : 200,
top:30
});
win.add(button);
function updateButton(name){
button.title = 'Animate ' + name;
}
button.addEventListener('click', function(){
// set new anchorPoint on animation for Android
a.anchorPoint = animationType[animationTypePointer].anchorPoint;
// set new anchorPoint on view for iOS
view.anchorPoint = animationType[animationTypePointer].anchorPoint;
animationCount++;
// determine position of next object in animationType array or return to first item
// using modulus operator
animationTypePointer = animationCount % animationTypeLength;
// animate view, followed by callback to set next button title
view.animate(a, function(){
updateButton(animationType[animationTypePointer].name);
});
});
win.open();
Coordinate of the view about which to pivot an animation.
Coordinate of the view about which to pivot an animation.
Used on Android only. For iOS, use Titanium.UI.View.anchorPoint.
Anchor point is specified as a fraction of the view's size. For example, {0, 0} is at
the view's top-left corner, {0.5, 0.5} at its center and {1, 1} at its bottom-right
corner.
See the "Using an anchorPoint" example for a demonstration.
The name of the API that this proxy corresponds to.
The name of the API that this proxy corresponds to.
The value of this property is the fully qualified name of the API. For example, Button
returns Ti.UI.Button.
Specifies if the animation should be replayed in reverse upon completion.
Default: false
Value of the backgroundColor property at the end of the animation, as a color name
or hex triplet.
Value of the backgroundColor property at the end of the animation, as a color name
or hex triplet.
For information about color values, see the "Colors" section of Titanium.UI.
Value of the bottom property at the end of the animation.
Value of the bottom property at the end of the animation.
Indicates if the proxy will bubble an event to its parent.
Some proxies (most commonly views) have a relationship to other proxies, often established by the add() method. For example, for a button added to a window, a click event on the button would bubble up to the window. Other common parents are table sections to their rows, table views to their sections, and scrollable views to their views. Set this property to false to disable the bubbling to the proxy's parent.
Default: true
Value of the center property at the end of the animation.
Value of the center property at the end of the animation.
Value of the color property at the end of the animation, as a color name or hex triplet.
Value of the color property at the end of the animation, as a color name or hex triplet.
For information about color values, see the "Colors" section of Titanium.UI.
Animation curve or easing function to apply to the animation.
This API can be assigned the following constants:
Delay, in milliseconds before starting the animation.
Delay, in milliseconds before starting the animation.
Duration of the animation, in milliseconds.
Duration of the animation, in milliseconds.
Value of the height property at the end of the animation.
Value of the height property at the end of the animation.
Value of the left property at the end of the animation.
Value of the left property at the end of the animation.
The Window or TabGroup whose Activity lifecycle should be triggered on the proxy.
The Window or TabGroup whose Activity lifecycle should be triggered on the proxy.
If this property is set to a Window or TabGroup, then the corresponding Activity lifecycle event callbacks will also be called on the proxy. Proxies that require the activity lifecycle will need this property set to the appropriate containing Window or TabGroup.
Value of the opacity property at the end of the animation.
Value of the opacity property at the end of the animation.
Value of the opaque property at the end of the animation.
Value of the opaque property at the end of the animation.
Number of times the animation should be performed.
If autoreverse is true, then one repeat of the animation consists of the animation
being played once forward, and once backward.
Default: 1 (no repeat)
Value of the right property at the end of the animation.
Value of the right property at the end of the animation.
Value of the top property at the end of the animation.
Value of the top property at the end of the animation.
Animate the view from its current tranform to the specified transform.
Animate the view from its current tranform to the specified transform.
Over the course of the animation, the view interpolates from its current transform to the specified transform.
3D transforms are only supported on iOS.
Transition type to use during a transition animation.
Transition type to use during a transition animation.
The new view being transitioned to should NOT be a child of another view or of the animating view. The animation replaces the current view from the view heirarchy and adds the new view to it.
This API can be assigned the following constants:
New view to transition to.
New view to transition to.
Specify the transition property with one of the transition style constants defined
in Titanium.UI.iOS.AnimationStyle to select the effect to apply.
The new view being transitioned to should NOT be a child of another view or of the animating view. The animation replaces the current view from the view heirarchy and adds the new view to it.
Value of the visible property at the end of the animation.
Value of the visible property at the end of the animation.
Value of the width property at the end of the animation.
Value of the width property at the end of the animation.
Value of the zIndex property at the end of the animation.
Value of the zIndex property at the end of the animation.
Refer to Titanium.UI.View.zIndex for an explanation of z-index.
Adds the specified callback as an event listener for the named event.
Name of the event.
Callback function to invoke when the event is fired.
Applies the properties to the proxy.
Properties are supplied as a dictionary. Each key-value pair in the object is applied to the proxy such that myproxy[key] = value.
A dictionary of properties to apply.
Fires a synthesized event to any registered listeners.
Name of the event.
A dictionary of keys and values to add to the Titanium.Event object sent to the listeners.
Removes the specified callback as an event listener for the named event.
Multiple listeners can be registered for the same event, so the
callback parameter is used to determine which listener to remove.
When adding a listener, you must save a reference to the callback function in order to remove the listener later:
var listener = function() { Ti.API.info("Event listener called."); }
window.addEventListener('click', listener);
To remove the listener, pass in a reference to the callback function:
window.removeEventListener('click', listener);
Name of the event.
Callback function to remove. Must be the same function passed to addEventListener.
Sets the value of the anchorPoint property.
New value for the property.
Sets the value of the autoreverse property.
New value for the property.
Sets the value of the backgroundColor property.
New value for the property.
Sets the value of the bottom property.
New value for the property.
Sets the value of the bubbleParent property.
New value for the property.
Sets the value of the center property.
New value for the property.
Sets the value of the color property.
New value for the property.
Sets the value of the curve property.
New value for the property.
Sets the value of the delay property.
New value for the property.
Sets the value of the duration property.
New value for the property.
Sets the value of the height property.
New value for the property.
Sets the value of the lifecycleContainer property.
New value for the property.
Sets the value of the opacity property.
New value for the property.
Sets the value of the opaque property.
New value for the property.
Sets the value of the repeat property.
New value for the property.
Sets the value of the right property.
New value for the property.
Sets the value of the transform property.
New value for the property.
Sets the value of the transition property.
New value for the property.
Sets the value of the view property.
New value for the property.
Sets the value of the visible property.
New value for the property.
Fired when the animation completes.
Source object that fired the event.
Name of the event fired.
True if the event will try to bubble up if possible.
Set to true to stop the event from bubbling.
Fired when the animation starts.
Source object that fired the event.
Name of the event fired.
True if the event will try to bubble up if possible.
Set to true to stop the event from bubbling.