• Topic
  • Discussion
  • OATWikiWeb.OATDOCanimation(Last) -- Owiki? , 2016-08-19 14:58:49 Edit owiki 2016-08-19 14:58:49


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


    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



    Starts the animation.


    Stops the animation.



    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);


    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

    Referenced by...