キャンバス描画線アニメーション

Question

2点間にキャンバス線アニメーションを描きたい。ラインは完璧に動作していますが、ラインを描きながらアニメーションが必要です。以下のコード行は、

// draw route 
for (int i = 0; i < routeList.size() - 1; i++) { 
    float[] goal1 = {nodeList.get(routeList.get(i)).x, 
      nodeList.get(routeList.get(i)).y}; 
    float[] goal2 = {nodeList.get(routeList.get(i + 1)).x, 
      nodeList.get(routeList.get(i + 1)).y}; 
    currentMatrix.mapPoints(goal1); 
    currentMatrix.mapPoints(goal2); 
    paint.setStrokeWidth(routeWidth); 
    canvas.drawLine(goal1[0], goal1[1], goal2[0], goal2[1], paint); 
} 

Answer 1

私はこのようにしました。次のリンクをお試しください

(function() { 
 
\t \t \t var lastTime = 0; 
 
\t \t \t var vendors = ['ms', 'moz', 'webkit', 'o']; 
 
\t \t \t for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 
 
\t \t \t \t window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; 
 
\t \t \t \t window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']; 
 
\t \t \t } 
 
\t \t \t if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) { 
 
\t \t \t \t var currTime = new Date().getTime(); 
 
\t \t \t \t var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 
 
\t \t \t \t var id = window.setTimeout(function() { 
 
\t \t \t \t \t callback(currTime + timeToCall); 
 
\t \t \t \t }, 
 
\t \t \t \t timeToCall); 
 
\t \t \t \t lastTime = currTime + timeToCall; 
 
\t \t \t \t return id; 
 
\t \t \t }; 
 
\t \t \t if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) { 
 
\t \t \t \t clearTimeout(id); 
 
\t \t \t }; 
 
\t \t }()); 
 
\t \t var canvas = document.getElementById("canvas"); 
 
\t \t var ctx = canvas.getContext("2d"); 
 
\t \t ctx.lineCap = "round"; 
 
\t \t // variable to hold how many frames have elapsed in the animation 
 
\t \t var t = 1; 
 
\t \t // define the path to plot 
 
\t \t var vertices = []; 
 
\t \t vertices.push({ 
 
\t \t \t x: 0, 
 
\t \t \t y: 0 
 
\t \t }); 
 
\t \t vertices.push({ 
 
\t \t \t x: 300, 
 
\t \t \t y: 100 
 
\t \t }); 
 
\t \t vertices.push({ 
 
\t \t \t x: 80, 
 
\t \t \t y: 200 
 
\t \t }); 
 
\t \t vertices.push({ 
 
\t \t \t x: 10, 
 
\t \t \t y: 100 
 
\t \t }); 
 
\t \t vertices.push({ 
 
\t \t \t x: 0, 
 
\t \t \t y: 0 
 
\t \t }); 
 
\t \t // draw the complete line 
 
\t \t ctx.lineWidth = 1; 
 
\t \t // tell canvas you are beginning a new path 
 
\t \t ctx.beginPath(); 
 
\t \t // draw the path with moveTo and multiple lineTo's 
 
\t \t ctx.moveTo(0, 0); 
 
\t \t ctx.lineTo(300, 100); 
 
\t \t ctx.lineTo(80, 200); 
 
\t \t ctx.lineTo(10, 100); 
 
\t \t ctx.lineTo(0, 0); 
 
\t \t // stroke the path 
 
\t \t ctx.stroke(); 
 
\t \t // set some style 
 
\t \t ctx.lineWidth = 5; 
 
\t \t ctx.strokeStyle = "blue"; 
 
\t \t // calculate incremental points along the path 
 
\t \t var points = calcWaypoints(vertices); 
 
\t \t // extend the line from start to finish with animation 
 
\t \t animate(points); 
 
\t \t // calc waypoints traveling along vertices 
 
\t \t function calcWaypoints(vertices) { 
 
\t \t \t var waypoints = []; 
 
\t \t \t for (var i = 1; i < vertices.length; i++) { 
 
\t \t \t \t var pt0 = vertices[i - 1]; 
 
\t \t \t \t var pt1 = vertices[i]; 
 
\t \t \t \t var dx = pt1.x - pt0.x; 
 
\t \t \t \t var dy = pt1.y - pt0.y; 
 
\t \t \t \t for (var j = 0; j < 100; j++) { 
 
\t \t \t \t \t var x = pt0.x + dx * j/100; 
 
\t \t \t \t \t var y = pt0.y + dy * j/100; 
 
\t \t \t \t \t waypoints.push({ 
 
\t \t \t \t \t \t x: x, 
 
\t \t \t \t \t \t y: y 
 
\t \t \t \t \t }); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t return (waypoints); 
 
\t \t } 
 
\t \t function animate() { 
 
\t \t \t if (t < points.length - 1) { 
 
\t \t \t \t requestAnimationFrame(animate); 
 
\t \t \t } 
 
\t \t \t // draw a line segment from the last waypoint 
 
\t \t \t // to the current waypoint 
 
\t \t \t ctx.beginPath(); 
 
\t \t \t ctx.moveTo(points[t - 1].x, points[t - 1].y); 
 
\t \t \t ctx.lineTo(points[t].x, points[t].y); 
 
\t \t \t ctx.stroke(); 
 
\t \t \t // increment "t" to get the next waypoint 
 
\t \t \t t++; 
 
\t \t }

body { 
 
\t \t \t background-color: ivory; 
 
\t \t } 
 
\t \t canvas { 
 
\t \t \t border:1px solid red; 
 
\t \t }

<canvas id="canvas" width=350 height=350></canvas>