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
Standard_Extension  
Updated Dec 15, 2007 by satoshi....@gmail.com

Standard Extension

iAnimeEx is the standard extension for iAnime, which implements a following set of animation effects:

fadein, fadeout

These effect will change the opacity of the specified DOM object.

  • fadein: changes the opacity from 0% to 100%
  • fadeout: changes the opacity from 100% to 0%

Example:

anime.add({id:'foo', effect:'fadein', duration:1000});
anime.add({id:'bar', effect:'fadeout', duration:1000});

easein, easeout, easeout

These effects changes the animation speed.

  • easein: starts slowlly and accelerate toward the end.
  • easeout: starts fast and decelerate toward the end.
  • easeinout: starts slowly, accelerate, then decelerate toward the end.

Example:

anime.add({id:'foo', effect:'easein', x:240, y:320, duration:1000});
anime.add({id:'bar', effect:'easeout', x:300, duration:500});

bouce, elastic

These effects add some characters to the animation.

  • bounce: the object bounces back a few times.
  • elastic: the object moves as if it's on a rubber band.

Example:

anime.add({id:'foo', effect:'bounce', y:500, duration:1000});
anime.add({id:'bar', effect:'elastic', x:300, y:300, duration:500});

jump, jumpbounce

These effects makes the specified DOM object 'jump' from the straight line. The property "x_height" specifies the height of the jump (positive height = clockwise).

  • jump: makes the object jump
  • jumpbounce: makes the object jumps a few times

Example:

anime.add({id:'foo', effect:'jump', x:500, x_height:-100, duration:1000});
anime.add({id:'bar', effect:'jumpbounce', x:500, x_height:-100, duration:500});

blink

This effect makes the object blink for the specified amount time by x_times. Example:

anime.add({id:'foo', effect:'blink', x:500, x_times:4, duration:1000});

style

This effect gradually changes a set of style values. The "from" property specifies a set of style values to start from, and the "to" property specifies the end values. The style value must be surrounded by ' (unlike CSS). The style name that contains '-' such as 'font-stle' needs to be surrounded by '. The color value must have a format of #rrggbb.

Example:

anime.add({id:'foo', effect:'style', 
           from:{'font-size':'10pt'; color:'#eeffff' },
           to:{'font-size':'20pt'; color:'#00ffff' },
           duration:1000});
Powered by Google Project Hosting