YUI Library: Animation 2011-3-21 v2.

9
Simple Use Case Interesting Moments in Animation YAHOO.util.Anim:
Event Fires... Arguments Properties
myAnimObj = new YAHOO.util.Anim("myDiv", {width: {to:
100}, height: {to: 100}}); onStart ...when anim begins attributes (obj)
myAnimObj.animate(); currentFrame (int)
onTween ...on every frame
Makes the HTML element whose id attribute is "myDiv" resize to a [0] {frames: total frames, fps: duration (num)
onComplete ...when anim ends
height and width of 100 pixels. frames per second, duration: of totalFrames (int)
animation in miliseconds} useSeconds (b)
These are Custom Event members of YAHOO.util.Anim; use these by subscribing:
Constructor (YAHOO.util.Anim, ColorAnim, etc.) myAnimInstance.onComplete.subscribe(myOnCompleteHandler);
YAHOO.util.Anim:
YAHOO.util.Anim(str | element target, obj
attributes[, num duration, obj easing]); Using the Motion Subclass Methods
Arguments: Use the Motion subclass to define animations to/from a specific point, animate()
(1) Element id or reference: HTML ID or element reference for the using (optional) bezier control points. getEl()
element being animated. var attributes = { getStartTime()
(2) Attributes object: Defines the qualities being animated; see below. points: { isAnimated()
(3) Duration: Approximate, in seconds. to: [250, 450], stop(bFinish) if true, advances
control: [[100, 800], [-100, 200], [500, 500]]}}; to last frame of animation
(4) Easing: Reference to an easing effect, member of
var anim = new YAHOO.util.Motion(element,
YAHOO.util.Easing. attributes, 1, YAHOO.util.Easing.easeIn); Easing Effects
Members of YAHOO.util.Easing
Attributes Object Using the ColorAnim Subclass
backBoth
animAttributes = { Use the ColorAnim subclass to background, text or border colors. backIn
animatedProperty: {
by: 100, //start at current, change by this much var myAnim = new YAHOO.util.ColorAnim(element, {back backOut
to: 100, //start at current, go to this groundColor: { to: '#dcdcdc' } }); bounceBoth
from: 100, //ignore current; start from this myAnim.animate(); bounceIn
unit: 'em' //can be any legal numeric unit bounceOut
} Using the Scroll Subclass easeBoth
} easeBothStrong
Note: Do not include to and by for the same animation property. Use the Scroll subclass to animate horizontal or vertical scrolling of an
easeIn
overflowing page element.
easeInStrong
Animation Properties var attributes = { easeNone default; no easing
scroll: { to: [220, 0] } easeOut
Use Animation to apply gradual transitions to these properties*: }; easeOutStrong
borderWidth height var anim = new YAHOO.util.Scroll(element,
attributes, 1, YAHOO.util.Easing.easeOut); elasticBoth
bottom margin elasticIn
fontSize opacity elasticOut
left lineHeight Solutions
right padding Subscribe to an API method:
top width myAnimObj = new YAHOO.util.Anim(element, {width:
*or to any other member of an element's style object that takes a numeric value {to: 100}, height: {to: 100}});
myHandler = function(type, args) {
Dependencies someDiv.innerHTML = args[0].fps; //gets frames-
per-second from the onComplete event}
Animation requires the YAHOO Global Object, Dom Collection, and myAnimObj.onComplete.subscribe(myHandler);
Event Utility. myAnimObj.animate();