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.