Class: Timeline

b5. Timeline

b5.Timeline

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

animation/timeline.js, line 56

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
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)

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
name string

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
animation b5.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
dt number

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