Extends Animation

Animation.Custom

A custom animation allows you to execute code once per frame (usually 60 times a second) to implement custom animation behavior.

Custom animations are not the standard way to create animations in Zing, and generally have worse performance than the other builtin animation types. Where possible, prefer using the standard animation elements or the state system to implement animation.

property Int timeread only

This property holds the number of milliseconds since the animation begun, or 0 if it is not running.

property Int deltaread only

This property holds the number of milliseconds since the last animate event fired. As a custom animation runs once per frame, this value is typically between 16 and 17 ms on a device running at 60fps.

When animating, you should always factor the delta value into your calculations to ensure that your animations run at the same percieved rate even when a device is dropping frames. The following example advances the target's x property at a rate of 100 points per second regardless of the framerate.

Animation.Custom {
    running: true
    on animate {
        var speed = 100 // 100 points per second
        var advance = speed * (delta / 1000)

        target.x += advance
    }
}

event animate()

The animate event is emitted once per frame when the animation is running. Handle this event to implement the custom animation behavior.

Animation.Custom {
    running: true
    // Fires once per frame
    on animate {
        // Logic goes here
    }
}