This documentation relates to previous versions of Titanium.

To see the latest documentation, visit docs.appcelerator.com.

Skip to end of metadata
Go to start of metadata

Objective

Animation can be "eye-candy" or can direct users to pay attention to some portion of your app. Either way, animations add visual interest and (when used appropriately) add professionalism to your app. In this section, you will learn how to animate the properties of UI components, use 2D and 3D matrices, and implement transitions on iOS.

Contents

Basic animations

Basic animations involve altering the properties of UI elements, such as their top/left coordinates, background colors, opacity, and so forth. You animate these property changes using the animate() method available to any component that inherits from Ti.UI.View. This method accepts two parameters: a Ti.UI.Animation object (or Dictionary) and an optional callback function. The animation object describes the properties the component will have when the animation finishes. The callback function is invoked when the animation finishes.

Alternatively, you could use Animation objects to do the same thing:

We explicitly coded a function to reverse the animation effect to demonstrate how to use the callback parameter. In practice, if all you're doing is reversing an animation, simply set autoreverse=true on the initial animation operation and don't pass the callback function. We use this technique in the matrix transformations below.

Animation objects are most useful when you want to reuse a particular animation effect with multiple objects. You define the animation effect once and simply apply it to each component.

Matrix animations

Matrix animations are also called transformations. Consider the set of x/y coordinates that represent the "edges" of an element. A matrix transformation mathematically alters those coordinates to alter the element. You can perform 2-dimensional transformations (in the x/y plane) and 3-dimensional transformations (in the x/y/z space). With either, you can scale, rotate, move (translate), and skew (shear) a component. (See the API docs for further transformation possibilities.)

2D matrix animations

2D matrix animations are supported in Titanium on both iOS and Android. Such transformations operate in two dimensional space (in the plane represented by the surface of the device).

To implement a transformation, you'll need to create an instance of the Ti.UI.2DMatrix object and set the target properties for your component. Then, you create an Animation object and set its transform property to equal your matrix object.

As shown, you can perform multiple transformations in a single operation. Sometimes, the order in which you do so will control the visual effect created.

3D matrix animations

3D matrix animations are translations in three dimensions. Again, you can rotate, scale, translate and so forth. Keep in mind that you won't be working with 3D virtual objects. So, they will have no "back" sides to show. 3D transformations are supported on iOS only. (As of 1.8, the 3DMatrix object was moved to the Ti.UI.iOS namespace to make this clearer.)

Transitions

Transitions are another iOS-only feature. Transitions are built-in animations that you use when switching between Windows or Views. transition is a property of the Animation object. With transitions, you would define a starting and ending View/Window to show, and set a constant from the Ti.UI.iOS namespace to specify which type of transition to use.

References

  • 2D Transformations from Willamette college course
  • Layer Geometry and Transforms from developer.apple.com
  • [Using Works of Visual Art to Teach Matrix
    Transformations|http://works.bepress.com/cgi/viewcontent.cgi?article=1008&context=bruce_kessler] from Western Kentucky University (lots of math!)
  • Rotation Matrices
  • Lab exercise using animation with sample starting/finished code

Summary

In this section, you learned that you can add visual interest and (when used appropriately) professionalism to your app by using animations. You learned how to animate the basic properties of UI components, how to use 2D and 3D matrix transformations, and how to implement transitions on iOS.

Labels
  • None