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

足够简单的问题（可能是错误的）HTML5/js - 如何动画两个坐标之间的直线？

即时通讯使用HTML5和/或Jquery在直线上的两点之间寻找动画。

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

http://jsbin.com/enobes

编辑：一个jQuery插件，我正在开发的路径动画http://lazylinepainter.info/

example

来源

2012-03-18 Cam

你想与*动画*说什么？ – 2012-03-18 22:44:28

ummm插值？ – Cam 2012-03-18 22:50:10

我会画一个图...一个时刻 – Cam 2012-03-18 22:51:24

感谢VALLI-R和Zevan，

我编写它使用线性插值与requestAnimFrame

你的两个答案的汞合金

http://jsbin.com/enobes/6

来源

2012-03-19 08:52:06 Cam

访问http://lazylinepainter.info/ – Cam 2013-01-19 23:29:20

这个工作对我来说：

HTML：

<html> 
<head> 
</head> 
<body> 
    <canvas id="canvas"> 
    </canvas> 
</body> 
</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();

来源

2012-03-18 22:42:46 user813182

是啊，这画线，但不动画之间的两点... http://jsbin.com/enobes/这将是理想的，如果我可以设置一个时间和缓解方程 – Cam 2012-03-18 22:47:56

你应该检查了这一点：http://paulirish.com/2011/requestanimationframe-for-smart-animating/这是很容易做到的，读你应该是它能够做到这一点了！也有一个例子。

来源

2012-03-18 22:50:35

您可以使用线性插值或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);

来源

2012-03-19 01:15:29 Zevan

这给一试，不知道这是否是你所追求的，能说明什么你不知道的：

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/ - >演示

安迪 -

来源

2012-03-19 12:14:21 Andy

谢谢安迪，我设法让我的答案进一步升技http://jsbin.com/enobes/6添加一个cancelRequestAnimFrame函数 - http：//注释.jetienne.com/2011/05/18/cancelRequestAnimFrame-for-paul-irish-requestAnimFrame.html。就像你如何增加了易用性一样，会尽量包括它！ – Cam 2012-03-19 13:24:37

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

回答

相关问题