kony.anim Namespace

The kony.anim namespace is part of the Animation API. It provides the following API elements.

Constants

The kony.anim namespace provides the following constants.

Animation Effect Constants

These constants are used to select what type of animation will take place.

Constant	Description
kony.anim.ANIMATION_EFFECT_AUTOMATIC	Use the default animation style.
kony.anim.ANIMATION_EFFECT_BOTTOM	Add the new data at the bottom.
kony.anim.ANIMATION_EFFECT_FADE	Fade new data into the current location.
kony.anim.ANIMATION_EFFECT_LEFT	Add the new data in from the left.
kony.anim.ANIMATION_EFFECT_MIDDLE	Move existing data below the add point downward and insert the new data into the middle.
kony.anim.ANIMATION_EFFECT_NONE	No animation effect.
kony.anim.ANIMATION_EFFECT_TOP	Add the new data from the top.

The following constants are used to define the velocity of animation.

Constant	Description
kony.anim.EASE	Ensures that the timing of your animations matches that of most system animations.
kony.anim.EASE_IN	Animation begins slowly and then speeds up as it progresses.
kony.anim.EASE_OUT	Animation begins quickly and then slows down as it progresses.
kony.anim.EASE_IN_OUT	Animation begins slowly, accelerates through the middle of its duration, and then slow again before completing.
kony.anim.Linear	Animation to occur evenly over its duration.

Remarks

These constants are usable with the following widget methods, which are documented in the Quantum Visualizer> Widget Programmer's Guide. These methods are available on all widgets that support animation.

addDataAt
addAll
addSectionAt
removeAt
removeAll
removeSectionAt
setDataAt
setSectionAt
SetData

Currently, animations are supported for the SegmentedUI widget.

Example 1

animation = kony.anim.ANIMATION_EFFECT_LEFT;
form.segments.addAt(data, sectionIndex, rowIndex, animation);

Example 2

function animateWidget() {
    <Widget>.animate(kony.ui.createAnimation({
        "100": {
            "stepConfig": {
                "timingFunction": kony.anim.EASE_IN_OUT
            },
            "width": "20%",
            "height": "5%"
        }
    }), {
        "delay": 0,
        "iterationCount": 1,
        "fillMode": kony.anim.FILL_MODE_FORWARDS,
        "duration": 1.5
    }, {
        "animationEnd": null
    });
}

Animation Fill Mode Constants

Specifies the fill mode being used when performing widget animations.

Constant	Description
kony.anim.FILL_MODE_BACKWARDS	The values configured in the first step of animation definition are applied to the widget at the beginning of the animation (even before the delay ends). At the end of animation, values are reset to the values, that were there before the start of the animation. Therefore, the widget returns to its starting point after the animation ends.
kony.anim.FILL_MODE_BOTH	The animation is applied twice on the widget. First at the beginning of the animation, before the animation delay with the values configured in the first step of the animation, and second at the end of the animation, with the values configured in the last step of the animation definition.
kony.anim.FILL_MODE_FORWARDS	The values configured in the last step of animation definition are the final values that are applied to the widget at the end of animation. So the widget stays where it is at the end of the animation.
kony.anim.FILL_MODE_NONE	The values in animation definition are never set to the actual widget. In this case, the widget comes back to original state after the animation is completed. This is the default.

Example

function animConfig() {
    var config = {
        "duration": 1,
        "iterationCount": 1,
        "delay": 0,
        "fillMode": kony.anim.FILL_MODE_FORWARDS
    };
    return config;
}