|
Animation_Instruction
The "animation instruction" - the key concept
Animation InstructionAn 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 Propertiesid: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 Propertieseffect: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. Samplesanime.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). |