HTML5/js - 如何在两个坐标之间设置直线动画？

Question

足够简单的问题(可能是错的)

我希望使用HTML5和/或Jquery在一条直线上的两个点之间进行动画制作.

ctx.beginPath();
ctx.moveTo(0, 0); // a
ctx.lineTo(100, 100); // b
ctx.stroke();

http://jsbin.com/enobes

编辑:我正在为路径动画开发的jquery插件http://lazylinepainter.info/

Answer 1

您可以使用线性插值或lerp.像这样的东西.这是jsfiddle的一个例子:http://jsfiddle.net/UtmTh/,这里是主要代码:

var canvas = $("#paper")[0];
var c = canvas.getContext("2d");

var startX = 50;
var startY = 50;
var endX = 100;
var endY = 100;
var amount = 0;
setInterval(function() {
    amount += 0.05; // change to alter duration
    if (amount > 1) amount = 1;
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.strokeStyle = "black";
    c.moveTo(startX, startY);
    // lerp : a  + (b - a) * f
    c.lineTo(startX + (endX - startX) * amount, 
             startY + (endY - startY) * amount);
    c.stroke();
}, 30);?

Answer 2

谢谢 valli-R 和 Zevan，

我已经编写了您的两个答案的混合体，它使用 lerp 和 requestAnimFrame

http://jsbin.com/enobes/6