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

足够简单的问题（可能是错的）

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

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

编辑：一个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

你应该看看这个： http ： //paulirish.com/2011/requestanimationframe-for-smart-animating/它很容易做到，阅读之后你应该能够做到！ 还有一个例子。

Answer 3

感谢valli-R和Zevan，

我编写了两个使用lerp和requestAnimFrame的答案的混合编码

http://jsbin.com/enobes/6

Answer 4

这对我有用：

HTML：

JS：

 var c = document.getElementById('canvas'); var ctx = c.getContext('2d'); ctx.beginPath(); ctx.moveTo(0, 0); // a ctx.lineTo(100, 100); // b ctx.stroke(); 

Answer 5

尝试一下，不确定它是否是您所追求的，可以解释您不确定的任何事情：

 var frame = function () { // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(function () { callback(+new Date()) }, 10) } }() var canvas = $("#canvas")[0]; var ctx = canvas.getContext("2d"); var easeing = {bouncePast: function (pos) { //just a sample to show easing if (pos < (1 / 2.75)) { return (7.5625 * pos * pos); } else if (pos < (2 / 2.75)) { return 2 - (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75); } else if (pos < (2.5 / 2.75)) { return 2 - (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375); } else { return 2 - (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375); } } } function animate(x1,y1,x2,y2, duration, ease) { //your main animation loop var start = +new Date(); frame(run); function run(t) { var delta =t - start; var pos = delta/duration; if (delta <= duration) { draw(x1,y1,x2,y2, ease, pos) frame(run) } } } function draw(x1,y1,x2,y2,ease, pos) { //does the drawing var easepos= ease(pos) canvas.width = canvas.width; ctx.strokeStyle = "black"; ctx.moveTo(x1, y1); ctx.lineTo(x1 + (x2 - x1) * easepos, y1+ (y2- y1) * easepos); ctx.stroke(); } animate(10,10,150,100, 2000, easeing.bouncePast) 

http://jsfiddle.net/fqtGb/2/ - >演示

- 安迪