0

从单个图像开始，我希望它在每次单击图像时循环播放三个动画。我创建了这个开关：

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

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

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

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

我尝试使用多种方法将它们插入我的交换机，但似乎无法正常工作。有小费吗？谢谢！

4

1 回答 1

0

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

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

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

对不起，如果我不在这儿。在一个重要的假设上运行：您正在使用 setTimeout() 来调用 switcher()。

我希望这有帮助。

于 2013-05-12T08:58:29.643 回答