You are here: Animation API
Animation API
Using the Animation API, you can create animations and 3D transformations on widgets that support animations. You can transform objects, define animations, and configure various properties of an animation. To associate an animation to a widget, the animation configuration object, the animation definition object, and the callbacks are passed to the methods of the widgets such as addAll, addDataAt, and addSectionAt.
The Animation API contains the following Namespaces and API elements:
| Key | Description |
|---|---|
| delay | This key defines when the animation will start. |
| direction | This key defines whether the animation must play in reverse on some or all cycles. |
| duration | This key defines the time in seconds that an animation takes to complete one cycle. |
| fillMode | This key defines what values are applied to the widget state by the animation outside the time it is executing. |
| iterationCount | This key specifies the number of times an animation cycle is played. |
| Function | Description |
|---|---|
| voltmx.ui.createAnimation | Creates an object that defines an animation. |
| voltmx.ui.makeAffineTransform | Creates a transformation object that can be used in an animation definition. |
| Constant | Description |
|---|---|
| Animation Effect Constants | These constants are used to select what type of animation will take place. |
| Animation Fill Mode Constants | Specifies the fill mode being used when performing widget animations. |
| Method | Description |
|---|---|
| rotate | Returns an affine transformation matrix constructed by rotating receivers affine transform. |
| rotate3D | Rotates the widget by angle on the unit directional vector formed by rx, ry, and rz. |
| scale | Returns an affine transformation matrix constructed by scaling receivers affine transform. |
| scale3D | Scales a widget in three dimensions (x, y, z) coordinate system. |
| setPerspective | Sets the perspective and sets the vanishing point at the center of the widget. |
| translate | Returns an affine transformation matrix constructed by translating receivers affine transform. |
| translate3D | Translates the widget from present location to new location by x, y, z amount. |
Transform Objects: Create a transform object by using the voltmx.ui.makeAffineTransform function. Using the transform object, you can set 2D and 3D transformations to a widget. You can rotate the widget usingrotate and rotate3D methods; scale the widget using scale and scale3D methods; and translate the widget using translate and translate3D method. You can also set the perspective and the vanishing point using the setPerspective method.
Animation Definition Object: Create an animation definition object by using the voltmx.ui.createAnimation function. The animation definition object defines the state of the widget at any specified point of time. Then configure properties of the animation by using the animation configuration object.
Animation Configuration Object: The animation configuration object has various key-value pairs that determine properties of the animation. You can set the animation delay, duration, direction, iterationCount, and the fillMode properties that determine the state of the widget at the end of the animation.