new b5.Animation(timeline, target, property, frames, times, repeat, easing){b5.Animation}
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
Examples
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 |
|---|---|---|
timeline |
(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) |
Properties:
| 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) |
Returns:
| Type | Description |
|---|---|
| b5.Animation | The created animation |
Members
-
staticb5.Animation.AS_pausednumber
-
Animation is paused
-
staticb5.Animation.AS_playingnumber
-
Animation is playing
Methods
-
pause()
animation/animation.js, line 106 -
Pause animation playback
-
play()
animation/animation.js, line 114 -
Play animation
-
restart()
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 indexnumber Index of frame
action_functionfunction A function to call
-
setTime(time)
animation/animation.js, line 223 -
Set the current time of the animation
Name Type Description timenumber Time in seconds
-
update(dt)
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 dtnumber Time that has passed since this animation was last updated in seconds