-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() 。Paul Irish 很好地解释了为什么使用翻译比使用绝对位置更好：http: //paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft /。

您的代码如下所示：

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-animating/ ) 它确实加快了我不久前正在做的 javascript 动画。它基本上意味着您可以停止使用 setTimeout 并让浏览器决定何时最好计算和绘制下一帧。

于 2013-04-21T22:57:21.867 回答