Android で Path を animation させるには

android で線を引くようなアニメーションを行う方法について

リポジトリはこちらですgithub.com

とりあえず今回は四角形を描きます

public class PathAnimationView extends View {

    private Path mPath;
    private PathMeasure mMeasure;

    public PathAnimationView(Context context) {
        super(context);
        init();
    }

    public PathAnimationView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public PathAnimationView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        Path path = new Path();
        path.moveTo(50, 50);
        path.lineTo(50, 100);
        path.lineTo(100, 100);
        path.lineTo(100, 50);
        path.lineTo(50, 50);

        mPath = path;
    }
}

あとで path の長さを取得して animation させるので、ここで pathMeasure に path をセットしておきます
また、 Lollipop より低い version の場合、正常に描画されない場合があるので、Hardware Acceleration を切ります

    private void init() {
        Path path = new Path();
        path.moveTo(50, 50);
        path.lineTo(50, 100);
        path.lineTo(100, 100);
        path.lineTo(100, 50);
        path.lineTo(50, 50);

        PathMeasure measure = new PathMeasure();
        measure.setPath(path, false);

        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        }

        mPath = path;
        mMeasure = measure;
    }

onDraw の中身は普通に描画する場合と特に変わりません
objectAnimator を使って、0.0-1.0 までの各地点で path を切り出してそれを描画します

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(getResources().getColor(android.R.color.black));
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.STROKE);

        canvas.drawPath(mPath, paint);
    }

objectAnimator の部分

    private void setProgress(float progress) {
        mPath.reset();
        mMeasure.getSegment(0.0f, mMeasure.getLength() * progress, mPath, true);
        invalidate();
    }

    public void startAnimation() {
        ObjectAnimator animator = ObjectAnimator.ofFloat(this, "progress", 0.0f, 1.0f);
        animator.setDuration(5000);
        animator.start();
    }

　
あとはこの view を追加して startAnimation() を呼び出す

参考

geftimov/android-pathview · GitHub
Android upgrade 2.3 -> 4.4: Canvas path drawing not working/changed - Stack Overflow