2012-07-10 154 views
1

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

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

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

+1

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

+0

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

+0

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

回答

1

首先,你真的想用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(); 
    } 
})(); 
+1

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