通过单击动画循环

从单个图像开始，我有三个动画，我希望它在每次单击图像时循环。我建立这个开关：通过单击动画循环

function switcher() { 
// counts to 4 then resets to 0 
x = x+1 
if (x>3) {x = 0} 

// Fire OFF 
if (x == 0) { 
    // animation code ? 
} 

// Fire LARGE 
if (x == 1) { 
// animation code ?  
} 

// Fire MEDIUM 
if (x == 2) { 
// animation code ? 
} 

// Fire SMALL 
if (x == 3) { 
// animation code ? 
}}

1个静态+ 3个动画状态。

动画我用保罗爱尔兰的requestAnimframe填充工具则：

function animate() 
    { 
    setTimeout(function() 
     { 
     requestAnimFrame(animate);   
     draw(); 
     }, 1000/2); 
    } 

function draw()  
    { 
    flame=document.getElementById('myimage') 
    if (flame.src.match("Images/lfire1.png")) 
     { 
     flame.src="Images/lfire2.png"; 
     } 
    else 
     { 
     flame.src="Images/lfire1.png"; 
     }  
    }

每个动画基本是相同的代码，但是有不同的图像。当我直接测试它时，代码正常工作，但是当我复制到开关中时，它不起作用。

我试图用多种方法将这些插入到我的交换机中，并且似乎无法获得任何工作。任何提示？谢谢！

来源

2013-05-12 user2350700

我刚刚在过去的两周里开始学习javascript，所以我对它仍然有点无知。我试图将开关状态指向动画功能，但没有成功。如果（x == 1）{animate（）;};}}。 “我无法想象任何与我对JS知道的东西。 – user2350700 2013-05-12 07:59:19

我不清楚你如何调用switcher（）方法，但我怀疑这个问题可能与JavaScript处理setTimeout（）的方式有关。

请记住，当您在Javascript中调用setTimeout（）时，脚本本身不会停止，直到超时结束。相反，它产生了一个处理指定超时的进程，然后继续通过你的代码。

如果您使用一种方法和一个计数器（在方法调用中持续存在某些东西）链接您的动画，以便在调用该方法时执行动画，然后在再次调用自身之前检查计数器是否小于2使用setTimeout（），你应该没问题。

对不起，如果我在这里偏离基地。基于一个重要假设进行操作：您正在使用setTimeout（）来调用switcher（）。

我希望这会有所帮助。

来源

2013-05-12 08:58:29 bool32

谢谢，从img的onclick命令调用切换器，以便动画被点击它改变。 – user2350700 2013-05-12 10:11:37

通过单击动画循环

回答

相关问题