कैनवास के साथ एक वक्र के चित्र को एनिमेट करने के लिए कैसे?

Question

मेरे पास अंक का एक गुच्छा है जिसे मैं धीरे-धीरे आकर्षित करना चाहता था। मैं setTimeOut और इस tutorial से प्रभाव का प्रयास करता हूं। लेकिन इतनी सफलता के बिना। इस समारोह के आसपास

var myFunction = function(ctx, grid, points) { 
       ctx.beginPath(); 
       ctx.moveTo(points[0].x, points[0].y); 
       ctx.lineWidth = 2; 
       ctx.strokeStyle = '#2068A8'; 
       ctx.fillStyle = '#2068A8'; 
       var count = 1; 
       for (count = 1; count < points.length; count++) { 
        ctx.lineTo(points[count].x , points[count].y); 
       } 
       ctx.stroke(); 
      } 

वहाँ एक कई अन्य ड्राइंग कार्यों लेकिन मैं सिर्फ केवल एक ही चेतन करना चाहते हैं:

समारोह इस

समारोह की तरह दिखता है।

मैं धीरे-धीरे कैनवास के साथ एक फ़ंक्शन कैसे आकर्षित कर सकता हूं?

Answer 1

ऐसा करने के बारे में आप दो तरीकों से जा सकते हैं कि मैं अपने सिर के ऊपर से सोच सकता हूं। एक मूल रूप से एक बिंदु खींच रहा है और दूसरी बिंदु ड्राइंग करने से पहले एक निश्चित समय के लिए रुक रहा है। यह पहला उदाहरण है जो मैंने प्रदान किया था। दूसरी विधि में आंशिक रेखाओं को वर्तमान लक्ष्य में खींचना शामिल है, जो एक बहुत चिकनी ड्राइंग उपस्थिति देता है। एक साइड नोट के रूप में मैं दोनों उदाहरणों में requestAnimationFrame का उपयोग करता हूं, यह किसी भी प्रकार के कैनवास एनिमेशन करने का अनुशंसित तरीका है।

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"); 

canvas.width = 400; 
canvas.height = 200; 

var points = [], 
    currentPoint = 1, 
    nextTime = new Date().getTime()+500, 
    pace = 200; 

// make some points 
for (var i = 0; i < 50; i++) { 
    points.push({ 
     x: i * (canvas.width/50), 
     y: 100+Math.sin(i) * 10 
    }); 
} 

function draw() { 

    if(new Date().getTime() > nextTime){ 
     nextTime = new Date().getTime() + pace; 

     currentPoint++; 
     if(currentPoint > points.length){ 
      currentPoint = 0; 
     } 
    } 
    ctx.clearRect(0,0,canvas.width, canvas.height); 
    ctx.beginPath(); 
    ctx.moveTo(points[0].x, points[0].y); 
    ctx.lineWidth = 2; 
    ctx.strokeStyle = '#2068A8'; 
    ctx.fillStyle = '#2068A8'; 
    for (var p = 1, plen = currentPoint; p < plen; p++) { 
     ctx.lineTo(points[p].x, points[p].y); 
    } 
    ctx.stroke(); 

    requestAnimFrame(draw); 
} 

draw(); 

Live Demo

अगर आपको लगता है कि एक सा अस्थिर होती है, तो आप उस चिकनी लाइनों तैयार किया जा रहा

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"); 

canvas.width = 400; 
canvas.height = 200; 

var points = [], 
    currentPoint = 1, 
    speed = 2, 
    targetX = 0, 
    targetY = 0, 
    x = 0, 
    y = 0; 

// make some points 
for (var i = 0; i < 50; i++) { 
    points.push({ 
     x: i * (canvas.width/50), 
     y: 100+Math.sin(i) * 10 
    }); 
} 

// set the initial target and starting point 
targetX = points[1].x; 
targetY = points[1].y; 
x = points[0].x; 
y = points[0].y; 

function draw() { 
    var tx = targetX - x, 
     ty = targetY - y, 
     dist = Math.sqrt(tx*tx+ty*ty), 
     velX = (tx/dist)*speed, 
     velY = (ty/dist)*speed; 

     x += velX 
     y += velY; 

    if(dist < 1){ 
     currentPoint++; 

     if(currentPoint >= points.length){ 
      currentPoint = 1; 
      x = points[0].x; 
      y = points[0].y; 
     } 

     targetX = points[currentPoint].x; 
     targetY = points[currentPoint].y; 
    } 

    ctx.clearRect(0,0,canvas.width, canvas.height); 
    ctx.beginPath(); 
    ctx.moveTo(points[0].x, points[0].y); 
    ctx.lineWidth = 2; 
    ctx.strokeStyle = '#2068A8'; 
    ctx.fillStyle = '#2068A8'; 

    for (var p = 0, plen = currentPoint-1; p < plen; p++) { 
     ctx.lineTo(points[p].x, points[p].y); 
    } 
    ctx.lineTo(x, y);  
    ctx.stroke(); 

    requestAnimFrame(draw); 
} 

draw(); 

Live Demo