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動畫在放大和縮小時無法正常工作

回答

相關問題