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