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