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:

OAT.AnimationSize(element, optionsObject)

Animates element's size. Properties of optionsObject:

OAT.AnimationPosition(element, optionsObject)

Animates element's position. Properties of optionsObject:

OAT.AnimationOpacity(element, optionsObject)

Animates element's opacity. Properties of optionsObject:

OAT.AnimationCSS(element, optionsObject)

Animates element's CSS property. Properties of optionsObject:

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

CategoryDocumentation CategoryOAT CategoryOpenSource