Skip to content

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:

AnimationConfiguration Object

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.

voltmx.ui Namespace

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.

voltmx.anim Namespace

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.

Transform Object

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.