Javascript 中的循环动画和/或快速动画可能吗？答案

【问题标题】：Loop animations and/or fast animations in Javascript possible?Javascript 中的循环动画和/或快速动画可能吗？
【发布时间】：2013-01-28 18:39:21
【问题描述】：

我有这个代码：

var run_anim = "";
var anim_array = ["\animations\pic_1.gif",
                  "\animations\pic_2.gif",
                  "\animations\pic_3.gif",
                  "\animations\pic_4.gif"]

function changeBackgroundURL(elementId, backgroundURL){
    run_anim = "false";
    document.getElementById(elementId).style.background=backgroundURL;
}

function mouseover_anim(elementName){
    run_anim = "true";
    changeBackgroundURL(elementName,anim_array[0]);
    while(run_anim=="true"){
        setTimeout(function(){changeBackgroundURL(elementName,anim_array[1]) parameter = null},30);
        setTimeout(function(){changeBackgroundURL(elementName,anim_array[2]) parameter = null},40);
        setTimeout(function(){changeBackgroundURL(elementName,anim_array[3]) parameter = null},20); 
    }
}

我正在运行这条线：

<area shape="rect" coords="0,0,95,91"
            onMouseOver="mouseover_anim('div_1')" 
            onMouseOut="changeBackground('div_1', 'pic_static.gif')">

当我运行它时，应用程序会占用大量 CPU，我需要关闭浏览器。看起来while循环（总是如此）阻塞了孔系统（但我没有看到任何图片变化）。在浏览器中调试时，我也看不到任何错误消息。我也尝试过预加载图片（代码未在上面发布），但还是不行。

代码仅在我禁用while循环并设置更长的超时时间时有效，如下所示：

function mouseover_anim(elementName){
    changeBackgroundURL(elementName,anim_array[0]);
    setTimeout(function(){changeBackgroundURL(elementName,anim_array[1]) parameter = null},300);
    setTimeout(function(){changeBackgroundURL(elementName,anim_array[2]) parameter = null},400);
    setTimeout(function(){changeBackgroundURL(elementName,anim_array[3]) parameter = null},200); 
}

那么用 Javascript 创建循环动画和/或快速动画是不可能的吗？或者你有什么建议吗？

【问题讨论】：

PS：由于IE中的垃圾收集需要“参数= null”：makemineatriple.com/2007/10/…
300 / 30 毫秒太频繁了 - 尝试将其更改为更有意义的值，例如 3 秒。此外，您不想设置每 X 分钟调用 3 个函数，您想要的是使用 setTimeout，只有一个函数将在图片之间旋转
更有意义？动画至少有 25 pic/sec，所以是 40 毫秒。我需要这些功能，因为不是每张图片都保持相同的时间，这是将动态融入动画所必需的（我更新了...）
关于我的最后一条评论：setInterval 不是setTimeout...

标签： javascript animation background-image settimeout setinterval

【解决方案1】：

@alfasin 如果@Marcus 想要它是一个快速的动画，3 秒的超时太多了，所以可能大约 100 毫秒？第二件事——使用真实，而不是“真实”——你能看出区别吗？ :) 最后也是最重要的一点 - 使用 setInterval 每隔 n 毫秒调用一次你的函数，你不会遇到浏览器崩溃的问题（当然你需要记住 clearInterval，否则它会无休止地运行

由于我有空闲时间，这里是几乎完整的代码：

var intervalId = setInterval(function() {
    // do your stuff here

    // write condition, that when satisfied clears this interval
    //clearInterval(intervalId);
}, 100);

【讨论】：

好吧，我会用“setIntervall”试试，看看它的作用。 ;-)
好吧@Marcus - 它设置了间隔；）
是的，我尝试了您的解决方案，并且有“一些”动作，但看起来 30 毫秒不起作用，而是 100 毫秒或 200 毫秒。太糟糕了。（所以Javascript不能用于快速动画，这是我之前已经想到的）
如果您能接受我的回答，我会很高兴。而关于这 30 毫秒——我依稀记得有些浏览器（如果不是全部的话）将 setInterval 频率限制在 20 毫秒左右。如果您认为，您的图像交换速度太慢，也许您应该尝试预加载它们？您遇到的这种延迟可能是因为 70 毫秒是浏览器需要加载图像的时间？还有一件事——也许只是你的这些图像彼此之间太不同了，因此动画看起来不流畅？作为我的最后一句话 - 使用 jQuery 或其他框架来制作此类动画。
正如我在问题中所说，我已经在预加载它们。您的解决方案仅部分起作用，因此我给了您一些赞成票。 ;D

【解决方案2】：

这对我来说是这样的（我更改了图像名称/路径并在 FF 和 chrome 上进行了本地测试）：

<html>
<head>
 <style type="text/css">  
    div {  
        position: absolute;
        left:   200px;
        top:    200px;
        width:  800px;  
        height: 900px;  
        style: "background: url(\"1.jpg\")";
    }  
</style> 
<script type="text/javascript">
var anim_array = ["url(\"1.jpg\")",
                  "url(\"2.jpg\")",
                  "url(\"3.jpg\")",
                  "url(\"4.jpg\")"]

function changeBackgroundURL(backgroundURL){
    document.getElementById("1").style.backgroundImage = backgroundURL;
}

function mouseover_anim(){
    var bg = document.getElementById("1").style.backgroundImage;
    if(bg === anim_array[0] || bg === ""){
        bg = anim_array[1];
    }
    else if(bg === anim_array[1]){
        bg = anim_array[2];
    }
    else if(bg === anim_array[2]){
        bg = anim_array[3];
    }
    else if(bg === anim_array[3]){
        bg = anim_array[0];
    }
    changeBackgroundURL(bg);    
}

</script>
</head>
<body>
    <div id="1"></div>
    <img src ="1.jpg" width="145" height="126" alt="Planets" usemap="#planetmap">
    <map name="planetmap">
        <area shape="rect" id="1" coords="0,0,200,200" onMouseOver="setTimeout(mouseover_anim,3000);" >
    </map>
</body>
</html>

【讨论】：

同一个链接供您学习如何制作动画（动画 = 图片 x 时间）：youtube.com/watch?v=7sGM63yJUoc
谢谢，但我对学习如何使用 Maya 制作动画不感兴趣...我试图提供帮助 - 但既然您已经想通了，这里没有继续的意义...
这不仅仅是关于如何使用 Maya 制作动画，而是如何使用所有可用工具制作各种动画。如果您想学习如何创建逼真的动画，您需要观看它。 ;-)