javascript - 线性插值的速度动画不一致

Question

我正在尝试在两个计算点之间的 Canvas 周围对对象进行动画处理。但是，我使用的方法似乎没有考虑点之间的距离。例如，远距离的动画制作时间与短距离的动画制作时间相同。

以一致的速度对对象进行动画处理的最佳方法是什么？

/**
 * Update function that is called in a setInterval. Moves boid to a new position
 *
 **/
this.update = function(){
    context.clearRect(0,0,canvas.width,canvas.height);


    this.amount += 0.005;
    if (this.amount > 1) this.kill();

    this.x = this.origX + (this.destX - this.origX) * this.amount;
    this.y = this.origY + (this.destY - this.origY) * this.amount;

    this.drawBoid();

    //console.log(this.x + ' ' + this.y);




}

Answer 1

您需要采取一种方法，根据自上一帧以来的耗时以及您想要制作动画的速度(以距离单位为单位)来制作动画-每单位时间。

计算所用时间时必须非常小心；仅仅因为您安排 setInterval 每 n 毫秒触发一次，并不意味着您的代码将在那个时间触发。更糟糕的是，无论如何，setInterval 的最小延迟为 4ms。 Really !相反，依赖时钟代码运行时的时间。

更好的是，现代浏览器有一个名为 requestAnimationFrame() 的方法，每当重绘即将发生时，它都会调用一段代码。您向它传递一个回调，它会使用时间戳作为第一个参数来调用该方法。

// Find your browser's implementation of requestAnimationFrame
window.requestAnimationFrame =
  window.requestAnimationFrame || 
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame || 
  window.msRequestAnimationFrame;

// The update method
var update = function(timestamp) {
  context.clearRect(0, 0, canvas.width, canvas.height);

  // How much time has elapsed since the start of the animation?
  var elapsedTime = timestamp - startTime;

  // How far have we moved at that time?
  var distanceTravelled = elapsedTime * speed;
  if (distanceTravelled >= totalDistance) distanceTravelled = totalDistance; // Don't overshoot

  // How far have we moved in each component?
  var distanceTravelledX = xPerUnitDistance * distanceTravelled;
  var distanceTravelledY = yPerUnitDistance * distanceTravelled;

  // Move there!
  this.x = Math.round(origin.x + distanceTravelledX);
  this.y = Math.round(origin.y + distanceTravelledY);

  // Draw!
  this.drawBoid();

  if (distanceTravelled < totalDistance) {
    // Schedule update to be called just before the next repaint
    requestAnimationFrame(update);
  }
}

// The distance you want to move
var distance = 1; // In distance units

// Speed you want to move at
var speed = 0.005 / 1000; // In distance units per millisecond

// Storage for the time when your animation started
var startTime;

// The start point, in distance units
var origin = {
  x: 0,
  y: 0
};

// The destination, in distance units
var destination = {
  x: 100,
  y: 75
};

// Distance to travel
var deltaX = (destination.x - origin.x);
var deltaY = (destination.y - origin.y);
var totalDistance = Math.sqrt( Math.pow(deltaX, 2) + Math.pow(deltaY, 2) );

// Storage for the contribution of each component per unit distance
var xPerUnitDistance,
    yPerUnitDistance;

if (totalDistance > 0) { 
  // Start animating!
  xPerUnitDistance = deltaX / totalDistance;
  yPerUnitDistance = deltaY / totalDistance;

  // Get the start time
  startTime = window.performance.now ?
              // Some browsers use high-precision timers
              (performance.now() + performance.timing.navigationStart) : 
              Date.now(); // A fallback for those that don't

  update(startTime);
}

更新:Adam指出Chrome uses a high precision timer 。代码已更新。