API: animation YAHOO.util.Anim (YUI Library)

# Yahoo! UI Library

### animation 2.8.1

Yahoo! UI Library > animation > YAHOO.util.Anim
Search:
Filters Show Private Show Protected Show Deprecated

## Class YAHOO.util.Anim

Known Subclasses:
  YAHOO.util.ColorAnim

Base animation class that provides the interface for building animated effects.

Usage: var myAnim = new YAHOO.util.Anim(el, { width: { from: 10, to: 100 } }, 1, YAHOO.util.Easing.easeOut);

### Constructor

YAHOO.util.Anim `( el , attributes , duration , method )`

Parameters:
  `el <String | HTMLElement>` Reference to the element that will be animated
  `attributes <Object>` The attribute(s) to be animated. Each attribute is an object with at minimum a "to" or "by" member defined. Additional optional members are "from" (defaults to current value), "units" (defaults to "px"). All attribute names use camelCase.
  `duration <Number>` (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
  `method <Function>` (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)

### Properties

#### _onComplete - `private object`

Custom event that fires after onComplete

#### _onStart - `private object`

Custom event that fires after onStart, useful in subclassing

#### _onTween - `private object`

Custom event that fires after onTween

#### actualFrames - `private Int`

The number of frames this animation was able to execute.

#### attributes - `Object`

The collection of attributes to be animated. Each attribute must have at least a "to" or "by" defined in order to animate. If "to" is supplied, the animation will end with the attribute at that value. If "by" is supplied, the animation will end at that value plus its starting value. If both are supplied, "to" is used, and "by" is ignored. Optional additional member include "from" (the value the attribute should start animating from, defaults to current value), and "unit" (the units to apply to the values).

#### currentFrame - `Int`

The location of the current animation on the timeline. In time-based animations, this is used by AnimMgr to ensure the animation finishes on time.

#### duration - `Number`

The length of the animation. Defaults to "1" (second).

#### el - `private HTMLElement`

The element to be animated.

#### isAnimated - `private Boolean`

Whether or not the animation is running.

#### method - `Function`

The method that will provide values to the attribute(s) during the animation. Defaults to "YAHOO.util.Easing.easeNone".

#### startTime - `private Date`

A Date object that is created when the animation begins.

#### totalFrames - `Int`

The total number of frames to be executed. In time-based animations, this is used by AnimMgr to ensure the animation finishes on time.

#### useSeconds - `Boolean`

Whether or not the duration should be treated as seconds. Defaults to true.

### Methods

#### animate

`void animate ( )`
Starts the animation by registering it with the animation manager.

#### doMethod

`Number doMethod ( attr , start , end )`
Returns the value computed by the animation's "method".

Parameters:
  `attr <String>` The name of the attribute.
  `start <Number>` The value this attribute should start from for this animation.
  `end <Number>` The value this attribute should end at for this animation.

Returns: `Number`
  The Value to be applied to the attribute.

#### getAttribute

`Number getAttribute ( attr )`
Returns current value of the attribute.

Parameters:
  `attr <String>` The name of the attribute.

Returns: `Number`
  val The current value of the attribute.

#### getDefaultUnit

`String getDefaultUnit ( attr )`
Returns the unit to use when none is supplied.

Parameters:
  `attr <attr>` The name of the attribute.

Returns: `String`
  The default unit to be used.

#### getEl

`HTMLElement getEl ( )`
Returns a reference to the animated element.

#### getStartTime

`Date getStartTime ( )`
Returns the animation start time.

Returns: `Date`
  current value of startTime.

#### init

`void init ( el , attributes , duration , method )`
Constructor for Anim instance.

Parameters:
  `el <String | HTMLElement>` Reference to the element that will be animated
  `attributes <Object>` The attribute(s) to be animated. Each attribute is an object with at minimum a "to" or "by" member defined. Additional optional members are "from" (defaults to current value), "units" (defaults to "px"). All attribute names use camelCase.
  `duration <Number>` (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
  `method <Function>` (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)

#### isAnimated

`Boolean isAnimated ( )`
Checks whether the element is currently animated.

Returns: `Boolean`
  current value of isAnimated.

#### onTween

`private void onTween ( )`
Feeds the starting and ending values for each animated attribute to doMethod once per frame, then applies the resulting value to the attribute(s).

#### setAttribute

`void setAttribute ( attr , val , unit )`
Applies a value to an attribute.

Parameters:
  `attr <String>` The name of the attribute.
  `val <Number>` The value to be applied to the attribute.
  `unit <String>` The unit ('px', '%', etc.) of the value.

#### setEl

`void setEl ( )`
Changes the animated element

#### setRuntimeAttribute

`private void setRuntimeAttribute ( attr )`
Sets the actual values to be used during the animation. Should only be needed for subclass use.

Parameters:
  `attr <Object>` The attribute object

#### stop

`void stop ( finish )`
Stops the animation. Normally called by AnimMgr when animation completes.

Parameters:
  `finish <Boolean>` (optional) If true, animation will jump to final frame.

#### toString

`String toString ( )`
Provides a readable name for the Anim instance.

### Events

#### onComplete

`onComplete ( )`
Custom event that fires when animation ends Listen via subscribe method (e.g. myAnim.onComplete.subscribe(someFunction)

#### onStart

`onStart ( )`
Custom event that fires when animation begins Listen via subscribe method (e.g. myAnim.onStart.subscribe(someFunction)

#### onTween

`onTween ( )`
Custom event that fires between each frame Listen via subscribe method (e.g. myAnim.onTween.subscribe(someFunction)

Copyright © 2010 Yahoo! Inc. All rights reserved.