YUI AS Component Documentation |
Class Animation

Package | com.yahoo.astra.animation
Class | public class Animation
Inheritance | Animation flash.events.EventDispatcher

An ultra lightweight animation engine.

Example
The following code animates a Shape from its current location to a new location over a period of two seconds:

      // create the square
      var square:Shape = new Shape();
      square.graphics.beginFill( 0xcccccc );
      square.graphics.drawRect( 0, 0, 20, 20 );
      square.graphics.endFill();
      square.x = 20;
      square.y = 20;
      this.addChild( square );

      // animate the square's position
      var animation:Animation = Animation.create( square, 2000, { x: 100, y: 200 } );

The following code will draw a circle and use an Animation instance to change its alpha property from 0.0 to 1.0 over a period of 1.5 seconds. It will set the easingFunction property to `Back.easeOut`, which is an easing function included with Flash CS3. In order to implement this example, you will need to save this code as a class file and set it as the Document Class of your flash application.

       package
       {
        import fl.motion.easing.Back;
        import flash.display.Shape;
        import flash.display.Sprite;
        import com.yahoo.astra.animation.Animation;
        import com.yahoo.astra.animation.AnimationEvent;

        public class AnimationExample extends Sprite
        {
         public function AnimationExample()
         {
          // Create a simple circular display object
          this.circle = new Shape();
          this.circle.graphics.beginFill(0xcccccc);
          this.circle.graphics.drawEllipse(0, 0, 50, 50);
          this.circle.graphics.endFill();
          this.addChild(circle);

          // Create the instance animating over 1500ms from 0 to 1
          this.animation = new Animation( 1500, { alpha: 0.0 }, { alpha: 1.0 } );

          // Use an easing equation
          this.animation.easingFunction = Back.easeOut;

          // Listen for events to update our circle's values
          this.animation.addEventListener( AnimationEvent.UPDATE, animationUpdateHandler );
          this.animation.addEventListener( AnimationEvent.COMPLETE, animationCompleteHandler );
         }

         // Should be a member variable so that the garbage collector doesn't
         // remove the instance from memory before it finishes
         private var animation:Animation;

         // The display object whose properties we will animate
         private var circle:Shape;

         private function animationUpdateHandler(event:AnimationEvent):void
         {
          this.circle.alpha = event.parameters.alpha;
         }

         private function animationCompleteHandler(event:AnimationEvent):void
         {
          this.animationUpdateHandler(event);

          // Set the animation instance to null to ensure garbage collection
          this.animation = null;
         }
        }
       }

Public Properties

| Property | Defined by
--- | --- | ---
|  | active : Boolean [read-only] If true, the animation is currently running. | Animation
|  | duration : int [read-only] The duration in milliseconds that the animation will run. | Animation
|  | easingFunction : Function The easing function which is used with the tween. | Animation

Public Methods

| Method | Defined by
--- | --- | ---
|  | Animation(duration:int, start:Object, end:Object, autoStart:Boolean = true) Constructor. | Animation
|  | create(target:Object, duration:int, parameters:Object, autoStart:Boolean = true, clearAllRunning:Boolean = false):Animation [static] Animates one or more properties of a target object. | Animation
|  | end():void Forces a tween to its completion values. | Animation
|  | kill(animation:Animation):void [static] Immediately destroys an animation instantiated with `create()`. | Animation
|  | pause():void Pauses a tween so that it may be restarted again with the same timing. | Animation
|  | start():void Starts the tween. | Animation
|  | yoyo():void Swaps the start and end parameters and restarts the animation. | Animation

Events

| Event | Summary | Defined by
--- | --- | --- | ---
|  | complete | Dispatched when the Animation instance has finished. | Animation
|  | pause | Dispatched when the Animation instance is paused. | Animation
|  | start | Dispatched when the Animation instance starts. | Animation
|  | update | Dispatched when the Animation instance has changed. | Animation

Property detail

active | property

`active:Boolean` [read-only]

If true, the animation is currently running.

Implementation
`public function get active():Boolean`

duration | property |

`duration:int` [read-only]

The duration in milliseconds that the animation will run.

Implementation
`public function get duration():int`

easingFunction | property |

`easingFunction:Function` [read-write]

The easing function which is used with the tween.

Implementation
`public function get easingFunction():Function`
`public function set easingFunction(value:Function):void`
Constructor detail

Animation | () | constructor

`public function Animation(duration:int, start:Object, end:Object, autoStart:Boolean = true)`

Constructor.

Parameters

| `duration:int` — the time in milliseconds that the tween will run
| `start:Object` — the starting values of the tween
| `end:Object` — the ending values of the tween
| `autoStart:Boolean` (default = `true`)`` — if false, the tween will not run until start() is called

Method detail

create | () | method

`public static function create(target:Object, duration:int, parameters:Object, autoStart:Boolean = true, clearAllRunning:Boolean = false):Animation`

Animates one or more properties of a target object. Uses the current values of these properties as the starting values.

Parameters

| `target:Object` — the object whose properties will be animated.
| `duration:int` — the time in milliseconds over which the properties will be animated.
| `parameters:Object` — an object containing keys of property names on the object and the ending values.
| `autoStart:Boolean` (default = `true`)`` — if true (the default), the animation will begin automatically. if false, the returned Animation object will not automatically begin, and one must call the `start()` function to make it run.
| `clearAllRunning:Boolean` (default = `false`)`` — If true, all other animations started with `create()` for this target will be cleared.

Returns

| `Animation` — The newly-created Animation instance

end | () | method |

`public function end():void`

Forces a tween to its completion values.

kill | () | method |

`public static function kill(animation:Animation):void`

Immediately destroys an animation instantiated with `create()`.

Parameters

| `animation:Animation`

pause | () | method |

`public function pause():void`

Pauses a tween so that it may be restarted again with the same timing.

start | () | method |

`public function start():void`

Starts the tween. Should be used to restart a paused tween, or to start a new tween with autoStart disabled.

yoyo | () | method |

`public function yoyo():void`

Swaps the start and end parameters and restarts the animation.

Event detail

complete | event

Event object type: `com.yahoo.astra.animation.AnimationEvent`
AnimationEvent.type property = `com.yahoo.astra.animation.AnimationEvent.COMPLETE`

Dispatched when the Animation instance has finished.

pause | event |

Event object type: `com.yahoo.astra.animation.AnimationEvent`
AnimationEvent.type property = `com.yahoo.astra.animation.AnimationEvent.PAUSE`

Dispatched when the Animation instance is paused.

start | event |

Event object type: `com.yahoo.astra.animation.AnimationEvent`
AnimationEvent.type property = `com.yahoo.astra.animation.AnimationEvent.START`

Dispatched when the Animation instance starts.

update | event |

Event object type: `com.yahoo.astra.animation.AnimationEvent`
AnimationEvent.type property = `com.yahoo.astra.animation.AnimationEvent.UPDATE`

Dispatched when the Animation instance has changed.