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.
 

kony.ui Namespace

FunctionDescription
kony.ui.createAnimationCreates an object that defines an animation.
kony.ui.makeAffineTransformCreates a transformation object that can be used in an animation definition.

kony.anim Namespace

ConstantDescription
Animation Effect ConstantsThese constants are used to select what type of animation will take place.
Animation Fill Mode ConstantsSpecifies the fill mode being used when performing widget animations.
 

Transform Object

MethodDescription
rotate Returns an affine transformation matrix constructed by rotating receivers affine transform.
rotate3DRotates the widget by angle on the unit directional vector formed by rx, ry, and rz.
scaleReturns an affine transformation matrix constructed by scaling receivers affine transform.
scale3D Scales a widget in three dimensions (x, y, z) coordinate system.
setPerspectiveSets the perspective and sets the vanishing point at the center of the widget.
translateReturns an affine transformation matrix constructed by translating receivers affine transform.
translate3DTranslates the widget from present location to new location by x, y, z amount.
 

Transform Objects: Create a transform object by using the kony.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 kony.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.

To view the functionality of the Animation API in action, download the sample application from the link below. Once the application is downloaded, build and preview the application using the Quantum App.