HTML画布使用动画从a到b移动圆圈 [英] HTML canvas move circle from a to b with animation

问题描述

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

I was wondering what would be the best way to move a circle from point A to point B using smooth animation.

我每秒钟都会得到一个带有websocket的新坐标想要在第二个点期间将圆圈从最后一个点移动到新点。

I get new coordinates with websocket every second and would like to animate the circle move from last point to the new point during that second.

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

I have visualized in this fiddle how the setup would look. I replaced the ws side with manual button input for this test purpose but its missing the function to move the circle.

jQuery也是受欢迎的。

jQuery is welcome too.

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/

谢谢：）

推荐答案

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

You can calculate the delta time between the current time of your animation, and its starting time. Then, you just have to move your circle by the difference between its original position and its next position, multiplied by this delta time :

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

你可以直接从这个时间获得参数在 requestAnimationFrame 回调中传递。

You can get this time directly from the argument passed in requestAnimationFrame callback.

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>

这篇关于HTML画布使用动画从a到b移动圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！