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.
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 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. See the Titanium.UI.3DMatrix API reference guide for more information.
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.
To create transition animations for Windows in a NavigationWindow or Tab, use the Window's
transitionAnimation property. This feature is supported on iOS 7 and later on Titanium SDK 3.2.0 and later. Create a transition animation object with the
Titanium.UI.iOS.createTransitionAnimation method to specify animation objects to hide the current window and show the new window.
Dynamic animations are physics-related animations supported on iOS 7 and later on Titanium SDK 3.2.0 and later. With dynamic animations, you set up an Animator object and add behaviors (animation rules), such as gravitational or push forces, and items (view objects) to be animated. See the Titanium.UI.iOS.Animator API reference guide as starting point.
- 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
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.