Fatal编程技术网
  • javascript/
  • 是否可以在Javascript中循环动画和/或快速动画？

是否可以在Javascript中循环动画和/或快速动画？

javascript animation

是否可以在Javascript中循环动画和/或快速动画？,javascript,animation,background-image,settimeout,setinterval,Javascript,Animation,Background Image,Settimeout,Setinterval,我有以下代码： 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, background

我有以下代码：

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')">
那么，用Javascript创建循环动画和/或快速动画是不可能的吗？或者你有什么建议吗？

@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);
这就是我的工作方式（我更改了图像名称/路径，并在FF和chrome上进行了本地测试）：


div{
位置：绝对位置；
左：200px；
顶部：200px；
宽度：800px；
高度：900px；
样式：“背景：url（\“1.jpg\”）；
}  
var anim\u数组=[“url（\'1.jpg\”），
“url（\'2.jpg\”），
“url（\'3.jpg\”），
“url（\“4.jpg\”）]
函数changeBackgroundURL（backgroundURL）{
document.getElementById（“1”）.style.backgroundImage=backgroundURL；
}
函数mouseover_anim（）{
var bg=document.getElementById（“1”）.style.backgroundImage；
if（bg==anim_数组[0]| | bg===“”）{
bg=anim_数组[1]；
}
else if（bg==动画数组[1]）{
bg=anim_数组[2]；
}
else if（bg==动画数组[2]）{
bg=anim_数组[3]；
}
else if（bg==动画数组[3]）{
bg=anim_数组[0]；
}
changeBackgroundURL（bg）；
}
PS：“参数=null”由于IE中的垃圾收集，需要：300/30毫秒太频繁-尝试将其更改为更有意义的值，如3秒。此外，您不希望设置每X分钟调用3个函数，您需要使用的是
setTimeout
，其中只有一个函数将在picsMore sense之间旋转？动画ion至少有25张图片/秒，所以这是40毫秒。我需要这些功能，因为不是每个图片都保持相同的时间，这是动画中的动态所必需的（我更新了它…）在上一条评论中，我的意思是：
setInterval
not
setTimeout
…好吧，我用“setIntervall”试试看它有什么作用。；-）Well@Marcus-它设置了间隔；）是的，我试过你的解决方案，有“一些”运动，但看起来30毫秒不起作用，而不是100毫秒或200毫秒。太糟糕了。（所以Javascript不适用于快速动画，这是我之前已经想到的）如果您能接受我的答案，我将非常高兴。大约30毫秒——我模糊地记得有些浏览器（如果不是全部的话）将setInterval频率限制在20毫秒左右。如果您认为，您的图像交换太慢，也许您应该尝试预加载它们？您遇到的延迟可能是因为浏览器加载图像所需的时间为70毫秒？还有一件事-也许只是你的这些图像彼此太不一样了，正因为如此，动画看起来并不平滑？最后一句话——使用jQuery或其他框架制作此类动画。正如我在问题中所说，我已经在预加载它们了。你的解决方案只起了部分作用，所以我给了你一些赞成票；D学习如何设置动画的链接（动画=图片x时间）：谢谢，但我对学习如何使用Maya设置动画不感兴趣。。。我试图提供帮助，但既然你已经弄明白了这一点，在这里继续下去就没有意义了……这不仅仅是关于如何使用Maya设置动画，而是关于如何使用每个可用工具设置各种动画的动画。如果你想学习如何创建逼真的动画，你需要观看。；-） 
var intervalId = setInterval(function() {
    // do your stuff here

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

<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>