Version 1.3 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
- Number
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
Object of options.
- tween
The way the value moves through time.
- Type
- Function
- Default
- linear tween
- Optional
- Yes
See glow.tweens.
- useSeconds
Specifies whether duration should be in seconds rather than frames.
- Type
- Boolean
- 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
- Number
- position
Seconds since starting, or current frame.
- Type
- Number
- tween
The tween used by the animation.
- Type
- Function
- useSeconds
Indicates whether duration is in seconds rather than frames.
- Type
- Boolean
- value
Current tweened value of the animtion, usually between 0 & 1.
Methods
- goTo
Goes to a specific point in the animation.
Synopsis
myAnimation.goTo(pos);Parameters
- pos
- Type
- Number
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.
- 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
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
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
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
- resume
Fired when the animation resumes after being stopped.
Synopsis
glow.events.addListener(myAnimation, "resume", function(event) { // ... });Arguments
- event
Description
If your listener prevents the default action (for instance, by returning false) the animtion will not be resumed.
