Playing With User Interface Feature » Yahoo! UI Library http://williamduff.name Thu, 10 May 2012 15:21:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Yahoo! UI Library: YAHOO.util.Anim http://williamduff.name/yahoo-ui-library-yahoo-util-anim/ http://williamduff.name/yahoo-ui-library-yahoo-util-anim/#comments Sat, 02 Aug 2008 13:37:32 +0000 william http://williamduff.name/?p=16 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.
Returns: void

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.
Returns: HTMLElement

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)
Returns: void

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).
Returns: void

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.
Returns: void

setEl

void setEl ( )

Changes the animated element
Returns: void

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
Returns: void

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.
Returns: void

toString

String toString ( )

Provides a readable name for the Anim instance.
Returns: String

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)
]]> http://williamduff.name/yahoo-ui-library-yahoo-util-anim/feed/ 0