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