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});