Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

Controls modifying values over time.

You can create an animtion 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
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.

destroyOnComplete

Destroy the animation once it completes?

Type
Boolean
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.

tween

The way the value moves through time.

Type
Function
Default
linear tween
Optional
Yes
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()
});

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.

Type
Number

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 & detatches 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
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.

Synopsis

myAnimation.isPlaying();

Returns

resume

Resumes the animation from where it was stopped.

Synopsis

myAnimation.resume();

Returns

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.

Synopsis

myAnimation.stop();

Returns

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

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.

Documentation generated by JsDoc Toolkit 2.1.0 on Mon Jul 20 2009 14:55:28 GMT+0100 (BST)

BBC navigation

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.