Javascript动画在放大和缩小时无法正常工作

我在javascript中创建了一个动画，它使用setTimeout通过计时来更改各种元素的css属性，但我只注意到放大和缩小时，超时函数继续，但动画停止/减慢导致元素堆叠在一起，然后它会在所有动画完成后，停止缩放（类似于选项卡处于非活动状态时，动画似乎停止并在您返回之前运行动画的选项卡时恢复）虽然它不是一个问题，因为当你停止缩放时，它回到正常的流程，这只是令人烦恼。Javascript动画在放大和缩小时无法正常工作

这是正常的事情吗？或者我的代码中有些东西需要修复？

编辑：这里是一个示例代码

var scaleRegEx = new RegExp(/scale\([\s\S]+?\)/i); 

    function moveThis(el, xpos, ypos){ 
     el.style.left = xpos + 'px'; 
     el.style.top = ypos + 'px'; 
    } 

    function scaleThis(el, xscale, yscale){ 
     if (scaleRegEx.test(el.style.transform) === false){ 
      el.style.transform += " scale(" + xscale + "," + yscale + ")"; 
     } else { 
      el.style.transform = el.style.transform.replace(
       scaleRegEx, "scale(" + xscale + "," + yscale + ")" 
      ); 
     } 
    } 

    function setClip(el, x, y, width, height){ 
     el.style.clip = "rect(" + y + "px," + (x+width) + "px," + (y+height) + "px," + x + "px)"; 
    } 

    var images = new Array(
     "assets/bg.png", 
     "assets/box-open.png", 
     "assets/box-closed.png", 
     "assets/link.png", 
     "assets/cursor.png", 
     "assets/product-big.png", 
     "assets/text1.png", 
     "assets/text2.png", 
     "assets/text3.png", 
     "assets/logo.png", 
     "assets/box-openback.png" 
    ); 

    var loadedImage = 0; 
    for (var i = 0; i <= images.length - 1; i++) { 
     imageObj = new Image(); 
     imageObj.src = images[i]; 
     imageObj.addEventListener("load", iLoad, false) 
    } 

    function iLoad() { 
     loadedImage++; 
     if (images.length == loadedImage) { 

      bg.style.background   = "url('" + images[0] + "') no-repeat"; 
      boxOpen.style.background = "url('" + images[1] + "') no-repeat"; 
      boxClosed.style.background = "url('" + images[2] + "') no-repeat"; 
      link.style.background  = "url('" + images[3] + "') no-repeat"; 
      cursorIcon.style.background = "url('" + images[4] + "') no-repeat"; 
      productBig.style.background = "url('" + images[5] + "') no-repeat"; 
      text1.style.background  = "url('" + images[6] + "') no-repeat"; 
      text2.style.background  = "url('" + images[7] + "') no-repeat"; 
      text3.style.background  = "url('" + images[8] + "') no-repeat"; 
      logo.style.background  = "url('" + images[9] + "') no-repeat"; 
      boxBack.style.background = "url('" + images[10] + "') no-repeat"; 

      setClip(productBig, 0, 0, 615, 631); 
      setClip(text2, 0, 0, 768, 90); 

      setTimeout(startScene1, 2000); 
     } 
    } 

    // zoom out the product 
    function startScene1(){ 
     text1.style.opacity = 0; 

     //fade out big product 
     scaleThis(productBig, 0.13, 0.13); 
     moveThis(productBig, 235, -45); 

     scaleThis(boxOpen, 1.0, 1.0); 
     moveThis(boxOpen, 0, 0); 

     scaleThis(boxBack, 1.0, 1.0); 
     moveThis(boxBack, 0, 0); 

     // put the product inside box 
     setTimeout(function(){ 
      productBig.className += " productTransition"; 
      productBig.style.top = "30px"; 
      setClip(productBig, 0, 0, 615, 0); 
     }, 3000); 

     // show text 2 
     setTimeout(function(){ 
      text2.style.opacity = 1; 
     }, 1000); 

     // dispose text2 
     setTimeout(function(){ 
      text2.style.left = "-728px"; 
     }, 4000); 
    }

来源

2015-10-21 Don

哦，是的，对不起。等待编辑。 – Don

你遇到的是，浏览器必须暂停动画的渲染，以使变焦但遗憾的是没有暂停超时。你应该做的，而不是仅仅依靠你的超时来说下一个动画开始你应该检查，以确保以前的动画已完成或在某个进度点。例如，您有一个动画可以淡出元素，然后是另一个淡入淡出的元素。在启动第二个动画之前，请检查animatedElement1.style.opacity == 0;如果没有设置另一个超时或甚至循环直到不透明== 0

来源

2015-10-21 01:53:20 PC3TJ

我明白了..所以这主要是浏览器的错误，我需要稍微调整我的代码来补偿这一点。谢谢（你的）信息。我会更加注意这个问题。 – Don

是的某些浏览器事件可能导致动画偏离轨道。如果检测到它落后但不是全部，某些浏览器会补偿并跳过部分动画。但是，在执行另一个依赖于第一个完成的动画之前，总是验证动画是否完整，这是一种很好的做法。有一百万件和一件事可能会导致第一个动画失败，并且您想知道在启动第二个动画之前是否发生了这种情况。 – PC3TJ

Javascript动画在放大和缩小时无法正常工作

回答

相关问题