使移动矩形更加流畅

Question

我希望使我的矩形的“动画”更加流畅。目前它非常卡顿。我知道原因是其中一个坐标先到达目标值，另一个坐标则会滞后。

例如，如果我当前在（0,0），需要移动到（150,75）并且每秒钟增加相同的量，那么y坐标将比x坐标更早到达目标值。

var canvas = document.getElementById('canvas');
var ctx = document.getElementById('canvas').getContext('2d');

var aniTimer;

var x;
var y;

var tx = tx || 0;
var ty = ty || 0;

var xDir;
var yDir;

function followMouse(e) {
  x = e.offsetX;
  y = e.offsetY;
  cancelAnimationFrame(aniTimer);
  moveObject();
}

function moveObject() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  if (x < tx) {
    xDir = -1;
  } else {
    xDir = 1;
  }
  if (y < ty) {
    yDir = -1;
  } else {
    yDir = 1;
  }
  tx = tx != x ? tx + xDir : tx;
  ty = ty != y ? ty + yDir : ty;
  
  
  ctx.fillRect(tx - 25 , ty + 25, 50, 10);
  if ( tx != x || ty != y ) {
    aniTimer = window.requestAnimationFrame(moveObject);
  }
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

canvas.addEventListener('mousemove', _.throttle(function(e) {
  followMouse(e);
}, 100));

window.addEventListener('resize', resizeCanvas, false);

resizeCanvas();

html,
body {
  margin: 0;
  height: 100%;
}

canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<canvas id="canvas"></canvas>

- Paran0a

---

你想实现什么样的动画？目前还不是很清楚。 - Regis Portalez

我会添加代表图片，只需要给我一分钟。 - Paran0a

Answer 1

这是因为你设置的 dir [+-1, +-1] 并非实际位移 [dx, dy]，两者并不总是成比例关系。

看一下修改后的代码片段：

var canvas = document.getElementById('canvas');
var ctx = document.getElementById('canvas').getContext('2d');

var x;
var y;

var tx = tx || 0;
var ty = ty || 0;

var xDir;
var yDir;

function followMouse(e) {
  x = e.pageX;
  y = e.pageY;
  moveObject();
}

function moveObject() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var scale =  0.2 * Math.max(canvas.width, canvas.height);
  xDir = (x - tx) / scale;
  yDir = (y - ty) / scale;
  tx = tx != x ? tx + xDir : tx;
  ty = ty != y ? ty + yDir : ty;


  ctx.fillRect(tx - 25, ty + 25, 50, 10);
  if (tx != x || ty != y) {
    window.requestAnimationFrame(moveObject);
  }
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

canvas.addEventListener('mousemove', _.throttle(function(e) {
  followMouse(e);
}, 100));

window.addEventListener('resize', resizeCanvas, false);

resizeCanvas();

html,
body {
  margin: 0;
  height: 100%;
}
canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<canvas id="canvas" style="border: 1px solid black"></canvas>

- Regis Portalez

---

我会花一些时间来尝试理解你的回答。然后我会将其标记为正确。你知道它为什么在你移动鼠标后开始出现滞后吗？试着上下/左右移动鼠标20秒钟，之后你会发现移动不再那么流畅了。至少在我的情况下是如此。 - Paran0a

它有点卡顿，因为100毫秒的延迟相当大。将其改为30毫秒以获得更流畅的效果。但说实话，我并没有尝试修复整个代码，只是解决了你提到的方向问题。 - Regis Portalez

好的，只是想知道你是否知道。不过还是谢谢你的答案！ - Paran0a