HTML畫布使用動畫從a移動到b

Question

我想知道使用平滑動畫從A點移動到B點的最佳方式是什麼？

我每秒鐘都會獲得新的座標，並希望在第二秒期間動畫從最後一點移動到新點。

我已經在這個小提琴中看到了設置的外觀。爲了這個測試目的，我用手動按鈕輸入取代了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/

謝謝:)

Answer 1

可以計算動畫的當前時間之間的時間增量，其啓動時間。然後，你就必須由差到移動原來的位置和它的下一個位置，再乘以該時間增量之間的循環：

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

您可以從​​回調傳入的參數直接得到這個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>