如何繪製出現在canvas html5中的動畫線？

Question

我想知道什麼是正確的方式來繪製線條動畫，以在開放時間內緩慢地顯示這種效果。 http://dreamteam.pl/

謝謝!!

Answer 1

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

 
var startX = 10; 
 
var startY = 10; 
 
var endX = 500; 
 
var endY = 10; 
 
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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="paper" width="500" height="500"></canvas>