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 - 如何動畫兩個座標之間的直線？

回答

相關問題