My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
Animation_Instruction  
The "animation instruction" - the key concept
Updated Dec 6, 2007 by satoshi....@gmail.com

Animation Instruction

An animation instruction (or instruction) is an object with a set of properties, which specifies a unit of animation. A unit of animation is typically associated with a DOM object, and describes its movement or style change.

Standard Properties

id:string

The id property specifies the id of the DOM element to be animated. When the id is sepecified, the element property will be ignored.

element:object

The element property specifies the DOM element. When the id is sepecified, the element property will be ignored.

duration:number

The duration property specifies the duration of the animation in msec. If the duration property is omitted, the animation will be done instantly (in one animation frame).

x:number

The x property specifies the horizontal position (i.e., style.left) to where the specified DOM object needs to be moved to from the current position. If the x property is omitted, the DOM object will not move horizontally.

y:number

The y property specifies the vertical position (style.top) to where the specified DOM object needs to be moved to from the current position. If the y property is omitted, the DOM object will not move vertically.

cp:array of points

The cp property specifies a set of control points - an array of objects with x, y property. When n control points are specified, the DOM object will be animated over the n+1-dimentional Bezier curve specified by the start position, those control points, and the end position. If the cp property is omitted, the DOM object will move along the straight line from the start position to the end position.

onComplete:function

The onComplete property specifies the function to be called when the animation specified by this animation instruction was completed.

Extended Properties

effect:string

The effect property specifies the name of the animation effect implemented by an iAnime extension or the application itself. If the effect with the specified name exists in an extension, the animation engine will coordinate with that extension to achieve the specified visual effect during the animation. If the effect property is omitted or the specified effect does not exist, the specified DOM object will move to the specified location with no special effect. Visit the standard extensions to see the set of standard animation effects implementd by the standard iAnime extension.

Samples

anime.add({ id:'foo', x:100, y:100, duration:500 });

will move the DOM object with id='foo' to (x=100, y=100) in 500ms.

var obj = document.getElementById('foo');
anime.add({ element:obj, x:100, y:100, duration:500 });

has the exact same effect as the previous example.

It is possible to omit some parameters. For example,

anime.add({ id:'foo', y:100, duration:500 });

will move the object horizontally, but not vertically.

You can even omit the 'duration' property.

anime.add({ id:'foo', x:100, y:100 });

Then, the engine will move the specified object immediately.

You could even omit both 'id' and 'element'. For this reason,

anime.add({});

does nothing, but still a valid animation instruction.

'duration' only animation instruction, such as {duration:500} does nothing if it's passed to add method, but means "wait for the specified amount of time before performing the next instruction" in case of addSequence method. For example,

anime.addSequence([
    { id:'foo', x:100, duration:500 },
    { duration:300 ),
    { id:'foo', y:100, duration:500 }
]);

will move the DOM object 'foo' horizontally to x=100, wait for 300ms, then move it vertically to y=200.

In order to move an DOM object along a Bezier curve, you need to specify one or more control points. For example,

anime.add({
    id: 'foo',
    x: 200, y:200,
    cp: [{x:100,y:0}, {x:0, y:100}],
    duration: 10000
});

will animate the DOM object 'foo' along the 3-dimentional Bezier curve specified by the original location of the object, (100,0), (0,100) and (200,200).

Powered by Google Project Hosting