单击动画循环播放 [英] cycle through animations on click

问题描述

从单个图像开始，我希望每次单击图像时都有三个动画循环显示。
我创建了此开关：

starting with a single image, I have three animations I want it to cycle through each time the image is clicked. I created this switch:

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个动画状态。

1 static state + 3 animated states.

我使用的动画使用Paul Irish的requestAnimframe Polyfill
然后：

The animation I have uses Paul Irish's requestAnimframe Polyfill then:

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

每个动画基本上都是相同的代码，但是图像不同。
该代码在我直接测试时有效，但是当我将其复制到交换机中时将不起作用。

each animation is basically this same code but with different Images. The code works when I test it directly but when I copy into the switch it won't work.

我试图使用多种方法，似乎无济于事。
有什么提示吗？
谢谢！

I have tried to plug these into my switch using multiple methods and can't seem to get anything to work. any tips? Thank you!

推荐答案

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

I am unclear as to how you are calling the switcher() method but I suspect that the problem may have to do with the way Javascript handles setTimeout().

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

Keep in mind that when you call setTimeout() in Javascript that the script itself does not halt until your timeout is ended. Instead, it spawns a process to deal with the specified timeout and then continues chugging through your code.

如果您使用一种方法和一个计数器（在调用该方法的过程中仍然存在）链接动画，以便在调用该方法时执行它的动画，然后检查是否计数器小于2才可以使用setTimeout（）再次调用自己，您应该可以。

If you chain your animations using one method and a counter(something persisted across calls to the method) such that when the method is called it performs it's animation and then checks if the counter is less than 2 before it calls itself again using setTimeout(), you should be ok.

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

Sorry if I'm off base here. Operating on a significant assumption: You are using setTimeout() to call switcher().

我希望这会有所帮助。

这篇关于单击动画循环播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！