キャンバスに複数の線を描き、遅くとも

Question

の数ヶ月後にはじめて私の最初の非自明なアプリケーションを作成することができました。 今、私はグラフを段階的に描くような素敵なアニメーション（適切な用語ではないか）を追加したいと思います。以下のGIFは、私が必要なものを説明しています。この時点で、私のアプリは一度にグラフを描画しますが、遅延はありません。

public class MyFragment extends Fragment{ 
... 
FrameLayout mFL; 
MyDraw mydraw = new MyDraw(getContext(),floatArray_coord_X,floatArray_coord_Y); 
mFL.addView(mydraw); 
... 

}次に

私のカスタムビュークラスの一部Calcが行われ、ラインがある：MyFragmentクラスの

は、カスタムビュー（私のグラフ）を添加するでframeLayoutあります描画：

public class MyDraw extends View{ 
    private Bitmap mBitmap; 
    private Canvas mCanvas; 
    ... 

    @Override 
    public void onDraw(Canvas canvas){ 

    mBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), 
            Bitmap.Config.ARGB_8888); 
    mCanvas = new Canvas(bitmap);  
    ... 

    // draw brown lines between two neighbour (X,Y) points 
    for (int i = 0; i < floatArray_coord_X.length - 1; i++) { 
      mCanvas.drawLine(floatArray_coord_X[i],  floatArray_coord_Y[i], 
          floatArray_coord_X[i + 1], floatArray_coord_Y[i + 1], 
          mypaint0); 
     } 

    ... 
    // draw black lines at calculated (X,Y) points 
    for (int i = 0; i < floatArray_coord_X_calc.length - 1; i++) { 
      mCanvas.drawLine(floatArray_coord_X_calc[i],  floatArray_coord_Y_calc[i], 
          floatArray_coord_X_calc[i + 1], floatArray_coord_Y_calc[i + 1], 
          mypaint1); 
     } 
    ... 
    // draw blue lines at newly calculated (X,Y) points 
    drawBlueLines(); // with extra calc 
    ...  

    canvas.drawBitmap(bitmap, 0, 0, null); 
} 

私はHandler/Runnableを使ってこれを達成しようとしました - 今、私はonDraw isn`tの中で呼び出すことを知っています（少なくとも私の試みは良くありませんでした）... これを達成する方法は？

Answer 1

View.onDraw()メソッドの各呼び出しは、グラフの次の行を描画する必要があります。これは、説明したアニメーションのようになります。 Activityから

private ArrayDeque<Point> mPoints = new ArrayDeque<>(); 
private Path mPath; 
private Paint mPaint; 
private int mBackgroundColor; 
... 
@Override 
protected void onDraw(Canvas canvas) { 
    Point nextPoint = mPoints.pollFirst(); 
    if (nextPoint != null) { 
     mPath.lineTo(nextPoint.x, nextPoint.y); 
     canvas.drawColor(mBackgroundColor); 
     canvas.drawPath(mPath, mPaint); 
     if (mPoints.size() > 0) { 
      postInvalidateDelayed(TimeUnit.SECONDS.toMillis(1)); 
     } 
    } 
} 

public void drawChart(List<Point> points, int backgroundColor, int foregroundColor) { 
    mPoints.addAll(points); 
    mBackgroundColor = backgroundColor; 
    mPaint = new Paint(); 
    mPaint.setColor(foregroundColor); 
    mPaint.setStrokeWidth(5); 
    mPaint.setStyle(Paint.Style.STROKE); 
    mPath = new Path(); 
    mPath.moveTo(0,0); 
    postInvalidateDelayed(TimeUnit.SECONDS.toMillis(1)); 
} 

スタートアニメーション：フレーム間の遅延を達成するために、あなたはView.postInvalidateDelayed()を使用することができます

ChartView chart = (ChartView) findViewById(R.id.chart); 
List<Point> points = new ArrayList<>(); 
points.add(new Point(0, 200)); 
points.add(new Point(200, 200)); 
points.add(new Point(200, 0)); 
points.add(new Point(0,0)); 
chart.drawChart(points, Color.BLACK, Color.RED);