%META:TOPICPARENT{name="OATDOCIndex"}%
---+ animation.js
Implements basic animation framework, as well as some pre-defined animation effects.
%TOC%
---++ 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
CategoryDocumentation CategoryOAT CategoryOpenSource