Index | OAT homepage | OpenLink Software

# OATDOCanimation

- OATDOCanimation
- _ _ animation.js
- _ _ _ _ Objects
- _ _ _ _ _ _ OAT.Animation(element, optionsObject)
- _ _ _ _ _ _ OAT.AnimationSize(element, optionsObject)
- _ _ _ _ _ _ OAT.AnimationPosition(element, optionsObject)
- _ _ _ _ _ _ OAT.AnimationOpacity(element, optionsObject)
- _ _ _ _ _ _ OAT.AnimationCSS(element, optionsObject)
- _ _ _ _ Methods
- _ _ _ _ _ _ OAT.Animation::start()
- _ _ _ _ _ _ OAT.Animation::stop()
- _ _ _ _ Messages
- _ _ _ _ _ _ OAT.MSG.ANIMATION_STOP
- _ _ _ _ Example

## 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

Copyright (C) 2005-2008 OpenLink Software