开启/关闭setInterval动画

Question

新来的js和学习很多，但在我所有的研究中，我无法得到这个很正确。
目标：
1：我有图像1
2：当点击时运行image2和image3之间的setinterval函数，动画它。
3：当再次点击clearinterval并转到静态image1。

优点：静态时无音频，动画时播放音频。
我被抓住了第三步。

的onclick功能

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

动画功能

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

的例子：Audibreeze

另一个问题是通过各种浏览器播放音频。
我使用了HTML5 <audio>标签 ，但有一个下降到<embed>标签似乎不工作。

Answer 1

这应该解决您的动画问题。

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

但我有几点建议可能要考虑。

1. 当创建动画，它通常是更好，如果你使用HTML5或函数使用window.requestAnimationFrame模仿的是（像这样:)

   window.requestAnimFrame = (function(){ 
       return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.oRequestAnimationFrame  || 
        window.msRequestAnimationFrame  || 
        function(callback){ 
         window.setTimeout(callback, 1000/60); 
        }; 
   })(); 
   

2. 考虑预加载图像设置动画之前，甚至把所有的图像放在同一个文件（精灵）和改变背景位置。