javascript - HTML canvas move circle from a to b with animation - Stack Overflow

admin管理员组

文章数量:1329825

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

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.

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 is wele 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();

/

Thanks :)

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

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.

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 is wele 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/1g18rsqy/

Thanks :)

• javascript
• html
• animation
• canvas

Share Improve this question Follow asked Apr 26, 2017 at 6:07 Jack M.Jack M. 2,03155 gold badges2626 silver badges3636 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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);

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>

本文标签： javascriptHTML canvas move circle from a to b with animationStack Overflow