animation.js

Implements basic animation framework, as well as some pre-defined animation effects.

Objects

OAT.Animation(element, optionsObject)

Creates animation of element. All parameters are specified in optionsObject; for most use cases, it is more suitable to use some pre-defined Animation* object. Properties of optionsObject:

• delay - in msec
• startFunction - to be executed when animation starts
• conditionFunction - checked every step
• stepFunction - executed every step
• stopFunction - executed when conditionFunction returns true (and animation stops)

OAT.AnimationSize(element, optionsObject)

Animates element's size. Properties of optionsObject:

• delay - in msec
• width - final width; -1 to ignore
• height - final height; -1 to ignore
• speed - speed of animation (in pixels)

OAT.AnimationPosition(element, optionsObject)

Animates element's position. Properties of optionsObject:

• delay - in msec
• left - final left coordinate; -1 to ignore
• top - final top coordinate; -1 to ignore
• speed - speed of animation (in pixels)

OAT.AnimationOpacity(element, optionsObject)

Animates element's opacity. Properties of optionsObject:

• delay - in msec
• opacity - final opacity in 0..1
• speed - speed of animation (in opacity steps)

OAT.AnimationCSS(element, optionsObject)

Animates element's CSS property. Properties of optionsObject:

• delay - in msec
• property - name of CSS property
• start - initial value
• step - per-step value
• stop - final value

Methods

OAT.Animation::start()

Starts the animation.

OAT.Animation::stop()

Stops the animation.

Messages

OAT.MSG.ANIMATION_STOP

OAT emits this message (by its own means, not when stopped by stop()) containing animation object when animation finishes.

REMARK: When attaching message listeners to Animation* derivatives, attach them to the .animation property instead. Example:

var as = new OAT.AnimationSize("myDiv");
OAT.MSG.attach(as.animation, OAT.MSG.ANIMATION_STOP, myCallback);

Example

var div = Dom.create("div");
var a = new OAT.AnimationOpacity(div, {opacity:0.5, delay:50, speed: 0.02});
a.start(); // will slowly make <div> element 50% transparent