使用JavaScript更有效地動畫圖像

Question

我的網站有一個簡單的JS動畫。它動畫了包含在#frame1中的一組照片，然後無限期地在屏幕上循環。 #frame1實際上是一個1920x1080的區域，它一直是一個旋轉的照片顯示。

Chrome在Chrome中的內存佔用不斷增長。它在這個速度下快速增長（50），而在100的速度變慢。這似乎是因爲大量像素被移動。有沒有什麼方法可以提高此應用的內存性能，而不會降低間隔的速度？

function start_scroll() { 
    var elem1 = document.getElementById("frame1"); 
    var pos1 = 0;     // Starting position of box1. 
    var id = setInterval(frame, 50); // Set speed here. 
    function frame() { 
    if (pos1 == frameheight * -1) { // If it just disappeared, move it to the bottom and populate it with the next series of pics. 
     pos1 = frameheight; 
     populate(1);     // Populate the first frame with the next set of pics. 
    } else {      // Otherwise, keep on moving up. 
     pos1--; 
     elem1.style.top = pos1 + 'px'; 
    } 
    } 
} 

Answer 1

更換setInterval()與requestAnimationFrame()。這將有效地將動畫與監視器更新同步。

function start_scroll() { 
    var elem1 = document.getElementById("frame1"); 

    var pos1 = 0; 
    //var id = setInterval(frame, 50); // don't use setInterval 
    requestAnimationFrame(frame);  // start once, using rAF 
    function frame() { 
     if (pos1 == frameheight * -1) { 
      pos1 = frameheight; 
      populate(1);the next set of pics. 
     } else { 
      pos1--; 
      elem1.style.top = pos1 + 'px'; 
     } 
     requestAnimationFrame(frame); // loop using rAF 

    } 
} 

動畫可以使用cancelAnimationFrame(timeRef)或一個標誌停止。

​​

在循環內部：

timeRef = requestAnimationFrame(frame); // loop using rAF 

典型的幀速率是每秒60幀。在一些高端顯示器上可能更多。您可以使用提供的時間戳來調節這一點。

function loop(timestamp) { 
    // compare time here 
    requestAnimationFrame(loop); // loop 
} 
requestAnimationFrame(loop); // start 

Answer 2

你感冒使用​​或多或少像這樣：

function start_scroll() { 
    var elem1 = document.getElementById("frame1"); 

    var pos1 = 0; // Starting position of box1. 
    var id = setTimeout(frame, 50); // Set speed here. 
    function frame() { 
     requestAnimationFrame(frame); 
     if (pos1 == frameheight * -1) { // If it just disappeared, move it to the bottom and populate it with the next series of pics. 
      pos1 = frameheight; 
      populate(1); // Populate the first frame with the next set of pics. 
     } else { // Otherwise, keep on moving up. 
      pos1--; 
      elem1.style.top = pos1 + 'px'; 
     } 

    } 
} 

當然，我一直沒能測試，但你可以在這裏找到一個全面的嘖嘖：http://creativejs.com/resources/requestanimationframe/