Animazione > Play/Stop

Le 12 immagini, tratte da Processing.org, realizzano un’animazione se visualizzate una dopo l’altra.
Agisci sui comandi di play e stop.


Animazione


<img alt="Animazione" id="animazione" /><br/> 
<input type="button" value="PLAY" onClick="funPlay()" /> <input type="button" value="STOP" onClick="funStop()" />
<script>
   var PATH    ="https://www.valcon.it/javascript/wp-content/uploads/a";
   var EXT     =".gif";
   var FRAME   =12; 
   var frame   =0;
   var codice  =0;
   var immagine=document.getElementById("animazione");

   function cambia()
   {
      frame=frame+1;
      if(frame == FRAME)
         frame=0;
      immagine.src=PATH+frame+EXT;
   }
   function funPlay() 
   { 
      if(codice == 0)
         codice=setInterval("cambia()", 200);
   }
   function funStop() 
   { 
      clearInterval(codice);
      codice=0;
   }

   cambia();
</script>

Lascia un commento