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 CategoryDocumentation CategoryOAT CategoryOpenSource