Version 1.7 glow.anim.Animation
API Quick Reference
JavaScript is required to use the quick reference
Controls modifying values over time.
You can create an animation instance using the constructor, or use one of the helper methods in glow.anim.
Once you have created your animation instance, you can use events such as "frame" to change values over time.
Constructor
new glow.anim.Animation(duration, opts)-
Parameters
- duration
-
- Type
Length of the animation in seconds / frames.
Animations which are given a duration in seconds may drop frames to finish in the given time.
- opts
-
- Type
Object of options.
- destroyOnComplete
-
Destroy the animation once it completes?
- Type
- Default
- false
- Optional
- Yes
This will free any DOM references the animation may have created. Once the animation completes, you won't be able to start it again.
- onComplete
-
Shortcut for adding a "complete" event listener
- Type
- Optional
- Yes
- onFrame
-
Shortcut for adding a "frame" event listener
- Type
- Optional
- Yes
- onResume
-
Shortcut for adding a "resume" event listener
- Type
- Optional
- Yes
- onStart
-
Shortcut for adding a "start" event listener
- Type
- Optional
- Yes
- onStop
-
Shortcut for adding a "stop" event listener
- Type
- Optional
- Yes
- tween
-
The way the value moves through time.
- Type
- Default
- linear tween
- Optional
- Yes
See glow.tweens.
- useSeconds
-
Specifies whether duration should be in seconds rather than frames.
- Type
- Default
- true
- Optional
- Yes
Examples
var myAnim = new glow.anim.Animation(5, { tween:glow.tweens.easeBoth() });
Properties
- duration
-
Length of the animation in seconds / frames.
- Type
- position
-
Seconds since starting, or current frame.
- Type
- tween
-
The tween used by the animation.
- Type
- useSeconds
-
Indicates whether duration is in seconds rather than frames.
- Type
- value
-
Current tweened value of the animation, usually between 0 & 1.
- Type
Description
The value may become greater than 1 or less than 0 depending on the tween used.
glow.tweens.elasticOut for instance will result in values higher than 1, but will still end at 1.
Methods
- destroy
-
Destroys the animation & detaches references to DOM nodes
Synopsis
myAnimation.destroy();Returns
Description
Call this on animations you no longer need to free memory.
- goTo
-
Goes to a specific point in the animation.
Synopsis
myAnimation.goTo(pos);Parameters
- pos
-
- Type
Position in the animation to go to.
This should be in the same units as the duration of your animation (seconds or frames).
Returns
this
Example
var myAnim = new glow.anim.Animation(5, { tween:glow.tweens.easeBoth() }); //attach events here //start the animation from half way through myAnim.goTo(2.5).resume(); - isPlaying
-
Returns true if the animation is playing.
Synopsis
myAnimation.isPlaying();Returns
- resume
-
Resumes the animation from where it was stopped.
- start
-
Starts playing the animation from the beginning.
Synopsis
myAnimation.start();Returns
Example
var myAnim = new glow.anim.Animation(5, { tween:glow.tweens.easeBoth() }); //attach events here myAnim.start(); - stop
-
Stops the animation playing.
Events
- start
-
Fired when the animation is started from the beginning.
Synopsis
glow.events.addListener(myAnimation, "start", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.Event
Event Object
Example
var myAnim = new glow.anim.Animation(5, { tween:glow.tweens.easeBoth() }); glow.events.addListener(myAnim, "start", function() { alert("Started animation which lasts " + this.duration + " seconds"); }); myAnim.start(); - frame
-
Fired in each frame of the animation.
Synopsis
glow.events.addListener(myAnimation, "frame", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.Event
Event Object
Description
This is where you'll specify what your animation does.
Example
var myAnim = new glow.anim.Animation(5, { tween:glow.tweens.easeBoth() }); var myDiv = glow.dom.get("#myDiv"), divStartHeight = myDiv.height(), divEndHeight = 500, divHeightChange = divEndHeight - divStartHeight; glow.events.addListener(myAnim, "frame", function() { myDiv.height(divStartHeight + (divHeightChange * this.value)); }); myAnim.start(); - stop
-
Fired when the animation is stopped before its end.
Synopsis
glow.events.addListener(myAnimation, "stop", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.Event
Event Object
Description
If your listener prevents the default action (for instance, by returning false) the animation will not be stopped.
- complete
-
Fired when the animation ends.
Synopsis
glow.events.addListener(myAnimation, "complete", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.Event
Event Object
- resume
-
Fired when the animation resumes after being stopped.
Synopsis
glow.events.addListener(myAnimation, "resume", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.Event
Event Object
Description
If your listener prevents the default action (for instance, by returning false) the animation will not be resumed.
