new b5.Timeline(target, property, frames, times, repeat, easing){b5.Timeline}
Animation is accomplished using timelines, a Timeline manages a collection of b5.Animation's. A timeline is a collection of animations with each animation targeting a specific property of a specific object. Multiple frames of animation can be attached to the same animation.
Once an animation has been created it should be added to either an actor / scene b5.TimelineManager or the global app b5.TimelineManager in order for it to be processed. This enables fone control of animation on an actor / scene basis.
Examples
Example of creating a simple fire and forget timeline with 4 key frames
timeline = new b5.Timeline(my_object, "x", [0, 100, 300, 400], [0, 5, 10, 15], 0, [b5.Ease.quartin, b5.Ease.quartin, b5.Ease.quartin]);The above creates a timeline that targets the x property of my_object with 4 key frames spaced out every 5 seconds and using QuarticIn easing to ease between each frame
Example of creating a more complex timeline animation:
var timeline = new b5.Timeline();
var anim = timeline.add(this, "x", [0, 100, 300, 400], [0, 5, 10, 15], 0, [b5.Ease.quartin, b5.Ease.quartin, b5.Ease.quartin]);
anim.setAction(0,function() { console.log("Hit frame 0"); });
anim.setAction(1,function() { console.log("Hit frame 1"); });
anim.setAction(2,function() { console.log("Hit frame 2"); });
anim.onEnd = function() { console.log("Animation ended"); };
anim.onRepeat = function() { console.log("Animation repeated"); };The above creates a timeline that targets the x property of my_object with 4 key frames spaced out every 5 seconds and using QurticIn easing to ease between each frame. A callback function will be called each time the timeline hits a specific frame, callbacks functions will also be called when the animation ends and repeats For a complete overview of Animation see Booty5 Animation Overview
| Name | Type | Description |
|---|---|---|
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 |
|---|---|---|
anims |
Array.<b5.Animation> | Array of animations (internal) |
manager |
b5.TimelineManager | Parent timeline manager that manages this timeline |
name |
string | Name of timeline |
Returns:
| Type | Description |
|---|---|
| b5.Timeline | The created timline |
Methods
-
add(target, property, frames, times, repeat, easing){b5.Animation}
animation/timeline.js, line 77 -
Creates and adds an animation to the timeline
Name Type Description targetobject The target object that will have its properties animated
propertystring The name of the property that will be animated
framesArray.<object> An array of key frame values that represent the value of the property at each time slot
timesArray.<number> An array of time values that represent the time at which each key frame should be used
repeatnumber The total number of times that the animation should repeat (0 for forever)
easingArray.<number> An array of easing values (optional) (see b5.Ease)
Returns:
Type Description b5.Animation The created animation -
find(name){b5.Animation}
animation/timeline.js, line 113 -
Searches the timeline for the named animation
Name Type Description namestring The name of the animation to find
Returns:
Type Description b5.Animation The animation ot null if not found -
pause()
animation/timeline.js, line 128 -
Pauses playback of the timeline and all of its contained animations
-
play()
animation/timeline.js, line 138 -
Sets the timeline playing the timeline playing all contained animations, if timeline is paused then it will be un-paused
-
remove(animation)
animation/timeline.js, line 94 -
Removes the specified animation from the timeline
Name Type Description animationb5.Animation The animation to remove
-
restart()
animation/timeline.js, line 148 -
Restarts the timeline restarting all animations contained within the it from their beginning
-
update(dt)
animation/timeline.js, line 173 -
Updates all animations that are managed by this timeline, automatically called by the timeline manager that manages it If the timeline has no animations left then it will remove itself ftrom its parent manager.
Name Type Description dtnumber Time that has passed since this timeline was last updated in seconds