4umi.com/web/javascript/animation

Ani-mate

Timing Javascript

Explored is how to display of a series of images creating the effect of an animation in a controlled manner.

The image

Controls   Speed:
The image Juggler

The idea

To juggle.

The HTML

<fieldset><legend>Controls</legend>
<input type="button" class="key" value="Slower" onclick="hurry(1);"/>
<input type="button" class="key" value="Faster" onclick="hurry(-1);"/>
&nbsp;
Speed:
<input type="text" class="it" id="speed" size="70" value="frames per second."/>
</fieldset>
<fieldset><legend>The image</legend>
<img src="/image/clipart/juggler0.gif" id="animation" alt="Juggler" width="32" height="32"/>
</fieldset>

The script

var num = 4,  //  number of images
 speed = 200,  //  initial delay
 step = 20,
 min = 20,
 max = 500,
 cur = 0,
 imarray = new Array( num );

function animate() {
  cur = ( cur + 1 ) % num;
  document.images.animation.src = imarray[cur].src;
  gid( 'speed' ).value = ron(1000/speed) + ' frames per second.';
  window.setTimeout( 'animate();', speed );
}

function hurry( n ) {
  speed += step * n;
  if( speed > max ) { speed = max; }
  if( speed < min ) { speed = min; }
}

// preload the required files...
for( var i = 0; i < num; i++ ) {
  imarray[i] = new Image();
  imarray[i].src = '/image/clipart/juggler' + i + '.gif';
}

animate();