[英]cycle through animations on click
从单个图像开始,每次单击图像时,我都希望有三个动画循环播放。 我创建了此开关:
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";
}
}
每个动画基本上都是相同的代码,但具有不同的图像。 当我直接对其进行测试时,该代码有效,但是当我将其复制到交换机中时,它将无法工作。
我试图使用多种方法将它们插入我的交换机,但似乎什么也无法工作。 有小费吗? 谢谢!
我不清楚您如何调用switcher()方法,但我怀疑问题可能与Javascript处理setTimeout()的方式有关。
请记住,当您在Javascript中调用setTimeout()时,脚本本身不会暂停直到超时结束。 相反,它会生成一个处理指定超时的进程,然后继续处理您的代码。
如果您使用一种方法和一个计数器(某些情况在调用该方法时仍然存在)链接动画,以便在调用该方法时执行动画,然后在使用setTimeout()再次调用自身之前检查计数器是否小于2。 ,您应该可以。
抱歉,如果我不在这里。 在一个重要的假设上进行操作:您正在使用setTimeout()来调用switcher()。
我希望这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.