Class: Animation

b5. Animation


new b5.Animation(timeline, target, property, frames, times, repeat, easing){b5.Animation}

animation/animation.js, line 69

An animation is a collection of key frames that are tweened and applied to a target objects property. A key frame consists of frames and times. Frames are values that the property should be set to and times are the times at which the property should be those values. The values are tweened over the provided times and written to the target objects property.

Generally animations are created and added to a b5.Timeline object which then processes them all automatically.

Animations have the following features:

  • Tweens between multiple key frames with each key frame having its own time value
  • Automatically deleted when animation reaches end unless destroy is set to false
  • Can be paused, played and restarted
  • Easing can be applied between each individual key frame
  • Can repeat a specified number of times or forever
  • Can be played back at different speeds using time scale
  • Can call a user supplied function when an animation repeats or ends
  • Actions can be called when the end of a specific key frame is reached
  • Playback can be delayed by setting time to a negative value

Supports the following event handlers:

  • onEnd() - Called when the animation ends
  • onRepeat() - Called when the animation repeats


Example showing how to create an animation

 var anim = new b5.Animation(null, actor1, “_x”, [0, 200], [0, 2], 0, [b5.Ease.quartin]);

For a complete overview of Animation see Booty5 Animation Overview

Name Type Description

(b5.Timeline) The parent Timeline that will manage this animation

target object

The target object that will have its properties animated

property string

The name of the property that will be animated

frames Array.<object>

An array of key frame values that represent the value of the property at each time slot

times Array.<number>

An array of time values that represent the time at which each key frame should be used

repeat number

The total number of times that the animation should repeat (0 for forever)

easing Array.<number>

An array of easing values (optional) (see b5.Ease)

Name Type Description
timeline b5.Timeline

Parent timeline (internal)

state number

State of playback (default b5.Animation.AS_playing} (internal)

time number

Current time (internal)

repeats_left number

Number of repeats left to play (internal)

index number

Optimisation to prevent searching through all frames (internal)

name string

Animation name

target object

Target object to tween

property string

Property to tween

frames Array.<number> | Array.<string> | Array.<boolean>

Key frame data (array of key frame values)

times Array.<number>

Key frame times (array of key frame times)

easing Array.<number>

Key frame easing functions (array of Tween functions) (see b5.Ease)

repeat number

Total number of times to repeat animation (0 for forever)

destroy boolean

If true then animation will be destroyed when it finishes playing (default is true)

actions Array.<function()>

Array of action functions (called when frame is reached)

time_scale number

Amount to scale time (default is 1.0)

tween boolean

If true then frames will be tweened (default is true)

Type Description
b5.Animation The created animation



Animation is paused


Animation is playing



animation/animation.js, line 106

Pause animation playback


animation/animation.js, line 114

Play animation


animation/animation.js, line 122

Restart the animation from the beginning

setAction(index, action_function)

animation/animation.js, line 235

Sets a function to be caled when the animation reaches the specified frame

Name Type Description
index number

Index of frame

action_function function

A function to call


animation/animation.js, line 223

Set the current time of the animation

Name Type Description
time number

Time in seconds


animation/animation.js, line 135

Per frame update of the animation, carries out tweening, automatically called by the timeline that manages it. If the animation ends and is set to destroy then it will be removed from its timeline parent when it finishes.

Name Type Description
dt number

Time that has passed since this animation was last updated in seconds