javascript - Toggling setInterval animation on/off -


new js , learning lot in research can't quite right.
goal:
1: have image1
2: when clicked on runs setinterval function between image2 , image3, animating it.
3: when clicked on again clearinterval , goes static image1.

bonus: no audio when static, plays audio when animate.
caught on thirdstep.

onclick function

function clickio()  {  element=document.getelementbyid('myimage')  if (element.src.match("image2.png","image3.png"))    {    clearinterval("animate()");    element.src="image1.png";    audiofile.pause();    }  else    {    audiofile.play();    setinterval("animate()", 500)    } } 

animate function

function startfire() {  element=document.getelementbyid('myimage')  if (element.src.match("flame1.png"))    {    element.src="flame2.png";    }  else    {    element.src="flame1.png";    } } 

example at: audibreeze

another issue playing audio via various browsers.
used html5 <audio> tag had fall <embed> tag doesn't seem work.

this should solve animation problem.

var animinterval = null;  var clickio = function( event ){     var element = document.getelementbyid( 'myimage' );     if( interval ){         clearinterval( animinterval );         element.src = "image1.png";         audiofile.pause();     }     else{         audiofile.play();         animinterval = setinterval( startfire , 500 );     } } 

but have few suggestions might wanna take account.

  1. when creating animations it's better use window.requestanimationframe if use html5 or function mimics (like this:)

    window.requestanimframe = (function(){     return  window.requestanimationframe   ||          window.webkitrequestanimationframe ||          window.mozrequestanimationframe    ||          window.orequestanimationframe      ||          window.msrequestanimationframe     ||          function( callback ){             window.settimeout(callback, 1000 / 60);         }; })(); 
  2. consider preloading images before animate them, or put images in same file (sprite) , changing background position.


Comments

Popular posts from this blog

Perl - how to grep a block of text from a file -

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

javascript - Animating array of divs; only the final element is modified -