Javascriptで画像をより効率的にアニメーション化する

Question

私のウェブサイトにはシンプルなJSアニメーションがあります。それは#frame1に含まれている写真の束をアニメーション化し、画面の周りを無限にループします。 #frame1は実際には1920x1080の領域で、常に回転するフォトディスプレイです。

この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'; 
     } 

    } 
} 

私はそれをテストすることができていないが、あなたはここで包括的TUTを読むことができる：http://creativejs.com/resources/requestanimationframe/