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

Question

简单的问题（可能是错误的）

希望使用HTML5和/或Jquery在直线上的两个点之间建立动画。

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

http://jsbin.com/enobes

编辑：我最终为svg路径动画http://lazylinepainter.info/开发了一个库”>

简单的问题（可能是错误的，我想使用HTML5和/或Jquery在一条直线上的两个点之间设置动画。 ctx.beginPath（）; ctx.moveTo（0，0）; // ctx.lineTo（100，100）; // b ...

Answer 1

您可以使用线性插值或lerp。这样的事情。这是jsfiddle上的示例：http://jsfiddle.net/UtmTh/，这是主要代码：

Answer 2

您应该检查一下：http://paulirish.com/2011/requestanimationframe-for-smart-animating/，这很容易做到，阅读后应该可以做到！还有一个例子。

Answer 3

感谢valli-R和Zevan，

Answer 4

这对我有用：

Answer 5

尝试一下，不确定是否是您想要的，可以解释您不确定的任何事情：