Version 1.2 glow.anim.Animation
API Quick Reference
JavaScript is required to use the quick reference
Controls modifying values over time.
This is the low-level way of creating an animation. If you simply want to animate an element's CSS properties, see glow.anim.css.
Once you have created your animation instance, you can listen to events such as "frame" which is fired on every frame.
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.
- 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()});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();var myAnim = new glow.anim.Animation(5, {tween:glow.tweens.easeBoth()}), 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();
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 animtion, usually between 0 & 1.
- Type
Description
Begins at 0 at the start of the animation and ends at 1.
Methods
- 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
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
Description
If your listener prevents the default action (for instance, by returning false) the animtion will not be started.
- frame
-
Fired in each frame of the animation.
Synopsis
glow.events.addListener(myAnimation, "frame", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.Event
Description
This is where you'll specify what your animation does.
- stop
-
Fired when the animation is stopped before its end.
Synopsis
glow.events.addListener(myAnimation, "stop", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.Event
Description
If your listener prevents the default action (for instance, by returning false) the animtion will not be stopped.
- complete
-
Fired when the animation ends.
Synopsis
glow.events.addListener(myAnimation, "complete", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.Event
- resume
-
Fired when the animation resumes after being stopped.
Synopsis
glow.events.addListener(myAnimation, "resume", function(event) { // ... });Arguments
- event
-
- Type
- glow.events.Event
Description
If your listener prevents the default action (for instance, by returning false) the animtion will not be resumed.
