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

Question

私はゆっくりと描画したい点の束を持つJSONファイルを持っています。私はtutorialを読んだが、これはちょうど1行を描く。しかし、私が望むのは、いくつかの行を順番に（最初から最後まで）描き、異なる開始点で描画することです。ここにJSONファイルがあります：

{ 
    "data": [ 
    { 
     "line": { 
     "color": "#96c23b", 
     "points": [ 
      { 
      "x": 1, 
      "y": 2 
      }, 
      { 
      "x": 2, 
      "y": 3 
      }, 
      { 
      "x": 4, 
      "y": 5 
      }, 
      { 
      "x": 7, 
      "y": 8 
      } 
     ], 
     "width": 2.0 
     }, 
     "type": "line", 
     "line_id": "1" 
    }, 
    { 
     "line": { 
     "color": "#DF5453", 
     "points": [ 
      { 
      "x": 33, 
      "y": 34 
      }, 
      { 
      "x": 34, 
      "y": 35 
      }, 
      { 
      "x": 38, 
      "y": 39 
      }, 
      { 
      "x": 40, 
      "y": 42 
      }, 
      { 
      "x": 45, 
      "y": 46 
      } 
     ], 
     "width": 5.0 
     }, 
     "type": "line", 
     "line_id": "2" 
    } 
    ] 
} 

描画の速度は関係ありません。

私はJSONを解析し、アニメーションなしでキャンバスに線を描画する方法を知っています。

var points_list = {"data":[ 
    {"line":{"color":"#96c23b","points":[{"x":1,"y":2},{"x":2,"y":3},{"x":4,"y":5},{"x":7,"y":8}],"width":2.0},"type":"line","line_id":"1"}, 
    {"line":{"color":"#DF5453","points":[{"x":33,"y":34},{"x":34,"y":35},{"x":38,"y":39},{"x":40,"y":42},{"x":45,"y":46}],"width":5.0},"type":"line","line_id":"2"} 
]} 

function drawLines() { 
    var canvas = document.getElementById("canvas"), 
    context = canvas.getContext("2d"); 

    $.each(points_list.data, function (key, value) { 
     var info = value.line; 
     var color = info.color; 
     var width = info.width; 
     var points = info.points; 

     context.beginPath(); 
     context.moveTo(points[0].x, points[0].y); 
     context.lineWidth = width; 
     context.strokeStyle = color; 
     context.fillStyle = color; 

     for (var p = 1; p < points.length; p++) { 
      context.lineTo(points[p].x, points[p].y); 
     } 
     context.stroke(); 
    }); 
} 

Answer 1

ここでは、変数を使用してouterListとinnerListの位置を追跡する例を示します。外部リスト（points_list.data）はlineIndexAを使用して追跡され、lineIndexBを使用してinnerList（points_list.data.line.points）が追跡されます。

関数drawLinesが発生するたびに、次の線分が描画され、次にlineIndexA変数がインクリメントされます。線分が完成すると、lineIndexBがインクリメントされます。

これは、アニメーションを動作させるためにsetTimeout関数を使用しています。これは、requestAnimationFrameに簡単に変換できます。

var points_list = {"data":[ 
 
    {"line":{"color":"#96c23b","points":[{"x":1,"y":2},{"x":2,"y":3},{"x":4,"y":5},{"x":7,"y":8}],"width":2.0},"type":"line","line_id":"1"}, 
 
    {"line":{"color":"#DF5453","points":[{"x":33,"y":34},{"x":34,"y":35},{"x":38,"y":39},{"x":40,"y":42},{"x":45,"y":46}],"width":5.0},"type":"line","line_id":"2"} 
 
]}; 
 

 
var lineIndexA = 1; 
 
var lineIndexB = 0; 
 

 
var canvas = document.getElementById("canvas"); 
 
canvas.width = 500; 
 
canvas.height = 500; 
 
var context = canvas.getContext("2d"); 
 

 
function drawLines() { 
 
    
 
\t var value = points_list.data[lineIndexB]; 
 
    var info = value.line; 
 
    var color = info.color; 
 
    var width = info.width; 
 
    var points = info.points; 
 

 
    context.beginPath(); 
 
    context.moveTo(points[lineIndexA-1].x, points[lineIndexA-1].y); 
 
    context.lineWidth = width; 
 
    context.strokeStyle = color; 
 
    context.fillStyle = color; 
 
    context.lineTo(points[lineIndexA].x, points[lineIndexA].y);   
 
    context.stroke(); 
 
    
 
    lineIndexA = lineIndexA + 1; 
 
    if (lineIndexA>points.length-1) { 
 
    \t lineIndexA = 1; 
 
    lineIndexB = lineIndexB + 1; 
 
    } 
 
     
 
    //stop the animation if the last line is exhausted... 
 
    if (lineIndexB>points_list.data.length-1) return; 
 
    
 
    setTimeout(function() { 
 
    \t \t \t \t \t \t \t \t \t \t \t drawLines() 
 
       \t \t \t \t }, 1000); 
 
} 
 

 
drawLines();

<canvas id="canvas"></canvas>