JavaScript中的連續動畫

我正在嘗試使用HTML5畫布和Javascript創建動畫。我對Javascript的知識很少。動畫的第一部分是製作一個圓，直到邊緣接觸到十字。十字然後沿着圓的邊緣移動。單獨地，這些部分工作正常，但是，因爲我使用的是setInterval()，兩個動畫同時播放，而不是在開始第二個動畫之前等待第一個完成。JavaScript中的連續動畫

最簡單的方法是什麼？我會很高興使用HTML按鈕，但<button onclick="setInterval(aRot,30);">Next Step</button>似乎不工作。

的代碼我的「orrible」 odgepodge已上http://jsfiddle.net/jtYkN/12/

來源

2012-07-10 user1515199

你可以使用沿着[拉斐爾（http://raphaeljs.com/）線的東西，使您的生活更輕鬆。 – egasimus 2012-07-10 15:35:30

最簡單的方法取決於您當前如何執行動畫。我們可能看到你的代碼？ – 2012-07-10 15:36:26

爲什麼不執行一個簡單的檢查來確定第一個動畫完成時間，然後_運行第二個動畫？我錯過了什麼嗎？ – biril 2012-07-10 15:39:02

首先，你真的想用requestAnimationFrame而不是setInterval的。它專門爲動畫製作。 According to paul irish ..

我爲什麼要用它？

瀏覽器可以將並發動畫合併爲一個單獨的迴流和重繪週期，從而實現更高的保真度動畫。例如，對於示例，基於JS的動畫與CSS轉換或SVIL SMIL同步。另外，如果您在非可見的選項卡中運行動畫循環，瀏覽器將無法繼續運行，這意味着較少的CPU，GPU，內存使用量，從而延長電池使用時間。

繼承人如何我會實現你說什麼

// all credit to paul irish on this part 
window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame  || 
      window.msRequestAnimationFrame  || 
      function(callback){ 
      window.setTimeout(callback, 1000/60); 
      }; 
})(); 


function growCircle() { 
    // code to make the circle bigger 
} 


function rotateCross() { 
    // code to make the cross rotate 
} 

(function animate(){ 
    requestAnimFrame(animate); 
    if (/* code to tell if the circle has finished growing */) { 
    rotateCross(); 
    } else { 
    growCircle(); 
    } 
})();

來源

2012-07-10 15:54:12

謝謝！這工作得很好。經過一些重構之後，我在animate（）函數的字符串'phase'中使用了一個switch語句。以防萬一你好奇，http://jsfiddle.net/SSW29/ – user1515199 2012-07-10 21:03:34

JavaScript中的連續動畫

回答

相關問題