Professional Documents
Culture Documents
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