HTML画布用动画将圆圈从a移动到b答案

【问题标题】：HTML canvas move circle from a to b with animationHTML画布用动画将圆圈从a移动到b
【发布时间】：2017-09-23 09:19:35
【问题描述】：

我想知道使用平滑动画将圆从 A 点移动到 B 点的最佳方法是什么。

我每秒都会使用 websocket 获得新坐标，并希望在那一秒内将圆从最后一个点移动到新点。

我已经在这个小提琴中想象了设置的外观。为了这个测试目的，我用手动按钮输入替换了 ws 端，但它缺少移动圆圈的功能。

jQuery 也是受欢迎的。

var x = 100;
var y = 50;
var r = 10;

var WIDTH = 600;
var HEIGHT = 400;

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

function circle(x, y, r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2, true);
  ctx.fill();
}

function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function draw() {
  clear(WIDTH, HEIGHT);
  ctx.fillStyle = "purple";
  circle(x, y, r);
}

draw();

https://jsfiddle.net/1g18rsqy/

谢谢:)

【问题讨论】：

标签： javascript html animation canvas

【解决方案1】：

您可以计算动画当前时间与其开始时间之间的时间差。然后，您只需将圆移动其原始位置和下一个位置之间的差值，乘以这个增量时间：

var deltaTime = (currentTime - startTime) / duration;
var currentX = prevX + ((nextX - prevX) * deltaTime);

您可以直接从requestAnimationFrame 回调中传递的参数中获取此time。

var x = 100;
var y = 50;
var r = 10;
var duration = 1000; // in ms
var nextX, nextY;
var startTime;

function anim(time) {
  if (!startTime) // it's the first frame
    startTime = time || performance.now();

  // deltaTime should be in the range [0 ~ 1]
  var deltaTime = (time - startTime) / duration;
  // currentPos = previous position + (difference * deltaTime)
  var currentX = x + ((nextX - x) * deltaTime);
  var currentY = y + ((nextY - y) * deltaTime);

  if (deltaTime >= 1) { // this means we ended our animation
    x = nextX; // reset x variable
    y = nextY; // reset y variable
    startTime = null; // reset startTime
    draw(x, y); // draw the last frame, at required position
  } else {
    draw(currentX, currentY);
    requestAnimationFrame(anim); // do it again
  }
}

move.onclick = e => {
  nextX = +x_in.value || 0;
  nextY = +y_in.value || 0;
  anim();
}

// OP's code

var WIDTH = 600;
var HEIGHT = 400;

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

function circle(x, y, r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2, true);
  ctx.fill();
}

function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function draw(x, y) {
  clear(WIDTH, HEIGHT);
  ctx.fillStyle = "purple";
  circle(x, y, r);
}

draw(x, y);

#canvas {
  border: 1px solid black;
}

<label>X: </label><input type="number" id="x_in">
<label>Y: </label><input type="number" id="y_in">
<input type="button" id="move" value="MOVE">
<canvas id="canvas" width=600 height=400></canvas>

【讨论】：