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() を呼び出す
