-1

画像を他の場所にスムーズに移動するための非常に簡単な機能を以下に示します。これはゲームのものなので、たとえばプレイヤーの画像を +30 ピクセル左に移動し、マップも +30 ピクセル左に移動します。

問題は、遅いことを除いてすべて正常に機能しています。私の最新の CPU i7 930 2.8 Ghz では、非常にスムーズで高速ですが、1.8 Ghz CPU を搭載したネットブックでは非常に低速です。また、より優れたローエンドのハードウェアでは、この機能は遅延が大きく (画像の動きがそれほどスムーズではありません)、同じ動きを完了するのにより多くの時間を必要とします。

この関数の CPU 負荷を軽減するにはどうすればよいですか?

var blokada = 0;
var blokada2 = 0;

function translate(elem, x, y, toff, loff, delay2) {
    if (document.getElementById(elem) && blokada == 0) {
        blokada = 1;
        var elem = document.getElementById(elem);
        var left = loff,
            top = toff,
            dx = x,
            dy = y, //top - y,
            i = 1,
            count = delay2,
            delay = delay2 * 2;

        function loop() {
            if (i >= count) {
                blokada = 0;
                return;
            }
            i += 1;
            elem.style.left = (left - (dx * i / count)).toFixed(0) + 'px';
            elem.style.top = (top - (dy * i / count)).toFixed(0) + 'px';
            setTimeout(loop, delay);
        }
        loop();
    }
}

function translate2(elem, x, y, toff, loff, delay2) {

    if (document.getElementById(elem) && blokada2 == 0) {
        blokada2 = 1;
        var elem = document.getElementById(elem);

        var left = loff,
            top = toff,
            dx = left - x,
            dy = top - y,
            i = 1,
            count = delay2,
            delay = delay2;

        function loop() {
            if (i >= count) {
                blokada2 = 0;
                return;
            }
            i += 1;
            elem.style.left = (left - (dx * i / count)).toFixed(0) + 'px';
            elem.style.top = (top - (dy * i / count)).toFixed(0) + 'px';

            setTimeout(loop, delay);
        }
        loop();
    }
}

translate2('player', x, y, 120, 120, 10); //5
translate('map3', x, y, 0, 0, 10);
4

3 に答える 3

3

最新のブラウザーを対象とする場合は、css3 2d transform と translate() を使用できます。絶対位置よりも変換を使用する方が良い理由について、ポール・アイリッシュからの非常に良い説明があります。 / .

コードは次のようになります。

var transform = "translate(" + left + "px," + top + "px)";
element.style.transform = transform;
element.style['-webkit-transform'] = transform;
element.style['-ms-transform'] = transform;
于 2013-04-21T23:03:41.983 に答える
0

これで、元のものよりも少なくとも 60% 高速になるはずです。elem.style をプリフェッチし、整数除算を非常に高速に実行します。そして、それは不十分なブラウザでも動作します:)

var blokada = 0;
var blokada2 = 0;

function translate(elem, x, y, toff, loff, delay2) {
var elem = document.getElementById(elem);  // fetch once
  if (elem && blokada == 0) {
    blokada = 1;
    var sty = elem.style; // fetch once use many...
    // unnecessary assignments use loff and toff directly
    // var left = loff,
    //  top = toff,
    var  dx = x,
         dy = y, //top - y,
         i = 1,
         // unnecessary assignment
         // count = delay2,
         delay = delay2 * 2;

    function loop() {
      if (i >= delay2) {
        blokada = 0;
        return;
      }
      i += 1;
      sty.left = (loff - (~~(dx * i / delay2))) + 'px';
      sty.top = (toff - (~~(dy * i / delay2))) + 'px';
      setTimeout(loop, delay);
    }
    loop();
  }
}

function translate2(elem, x, y, toff, loff, delay2) {
var elem = document.getElementById(elem);  // fetch once
  if (document.getElementById(elem) && blokada2 == 0) {
    blokada2 = 1;
    // unnecessary assignments use loff and toff directly
    // var left = loff,
    //  top = toff,
    var sty = elem.style; // fetch once use many. 
      dx = loff - x,
      dy = toff - y,
      i = 1;
      // unnecessary assignments 
      //count = delay2,
      //delay = delay2;

    function loop() {
      if (i >= delay2) {
        blokada2 = 0;
        return;
      }
      i += 1;
      sty.left = (loff -(~~(dx * i / delay2))) + 'px';
      sty.top = (toff -(~~(dy * i / delay2))) + 'px';

      setTimeout(loop, delay2);
    }
    loop();
  }
}

translate2('player', x, y, 120, 120, 10); //5
translate('map3', x, y, 0, 0, 10);
于 2013-04-21T22:56:36.337 に答える
0

requestAnimationFrame ( http://paulirish.com/2011/requestanimationframe-for-smart-animation/ ) を確認してください。これは、私が少し前に行っていた JavaScript アニメーションを本当に高速化しました。これは基本的に、setTimeout の使用をやめて、次のフレームをいつ計算して描画するのが最適かをブラウザーに判断させることができることを意味します。

于 2013-04-21T22:57:21.867 に答える