Question

我看过2个移动策略：

使用时间：

point = function(x) {
  this.x = x;
  this.moveTo = function(x, originalX, speed, startTime) {
    var direction = x > originalX ? 1 : (x < originalX ? -1 : 0);
    if(direction == 0) return;
    // speed is px/seconds, so divide time by 1k
    var dt = (new Date().getTime() - startTime) / 1000;
    var speedX = speed * direction;
    var newX = originalX + speedX * dt;
    if (direction == 1 && newX => x || direction == -1 && newX <= x) {
      // we went past, stay put and finish this
      this.x = x;
      return;
    }
    requestAnimationFrame(function(){
      this.moveTo(x, originalX, speed, startTime);
    });
  }
}

或者每帧使用百分比？

point = function(x) {
  this.x = x;
  this.moveTo = function(x, originalX, percentagePerFrame, p) {
    if (p >= 1) return;
    var dx = (x - originalX) * p;
    this.x = x + dx;
    requestAnimationFrame(function(){
      this.moveTo(x, originalX, percentagePerFrame, p + percentagePerFrame);
    });
  }
}

这无关紧要吗？我可以说使用时间和速度较慢，但是......这有关系吗？有更好的方法吗？

Answer 1

只是一些想法：

如果系统繁忙，

requestAnimationFrame（“RAF”）将跳过帧。

因此，如果您需要动画来调整跳过的帧，请使用第一个示例中的已用时间。

如果你只想让一个物体随着每一帧移动而且错过帧造成的“抖动”不会影响你的设计，那么你的第二个例子就可以了。

请注意，现代浏览器中的RAF会为您提供经过的时间，因此您不需要在第一个示例中完成的手动变量和计算。

画布中哪种线性“运动策略”更好？

1 个答案: