定制自己的动画 View 控件（Canvas 使用）

定制自己的动画 View 控件（Canvas 使用）

如果要定义自己的 View 控件，则需要新建一个类继承 android.view.View。然后在 onDraw 中写自己需要实现的方式。

这里定制了一个非常简单的动画，让 Android Studio 默认工程的圆形 logo 沿着对角线运动，且运动过程中进行旋转。

以下为具体步骤：

1. 新建工程，从 mipmap 下复制一个 ic_launcher_round.png 到 drawable 目录下

2. 新建一个类，继承自 View，这里命名为 MyView，需要注意，它的构造函数需要选择 2 个形参的

private Resources mResources;
private Paint mPaint;
private Bitmap mBitmap;
private int mBitmapHeight;
private int mBitmapWidth;
private int mViewHeight;
private int mViewWidth;
private int x;
private int y;
private int rotation;
public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mResources = getResources();
        initPaint();
        initBitmap();
        x = mViewWidth;
        y = mViewHeight;
        rotation = 0;
}
private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setFilterBitmap(true);
}

private void initBitmap() {
        mBitmap = ((BitmapDrawable)mResources
                   .getDrawable(R.drawable.ic_launcher_round,null))
          .getBitmap();
        mBitmapHeight = mBitmap.getHeight();
        mBitmapWidth = mBitmap.getWidth();
}

1. 重写 onDraw 方法

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

    // canvas.drawBitmap(mBitmap,0,0,mPaint);

    /**
     * 不旋转画布的方式
     * 位置 A 和 位置 B 不重叠，位置 B 和位置 C 重叠
     * 说明位置 A 的图形恢复完成后，已经主动将画布恢复现场，则save()和restore()方法本身并没有什么用
     */
//  canvas.save();
//  Matrix matrix = new Matrix();
//  matrix.postTranslate(x,y);
//  matrix.postRotate(rotation,x + mBitmapWidth / 2,y + mBitmapHeight / 2);
  	// 这里按照网络上的说法，画布已经经过了移动和旋转
  	// 位置 A
//  canvas.drawBitmap(mBitmap,matrix,mPaint);
  	// 位置 B
//  canvas.drawBitmap(mBitmap,0,0,mPaint);
//  canvas.restore();
  	// 位置 C
//  canvas.drawBitmap(mBitmap,0,0,mPaint);

    /**
     * 旋转画布的方式
     */
    canvas.save();
    // 画布的原点移动到了(x,y)点 --> (x,y)->(0,0)
    canvas.translate(x,y);
    // 画布在(0,0)点进行了旋转，旋转角度是 rotation，旋转的中心点是(mBitmapWidth/2,mBitmapHeight/2)
    canvas.rotate(rotation,mBitmapWidth / 2,mBitmapHeight / 2);
  	// 在(0,0)点绘制需要的图形
    canvas.drawBitmap(mBitmap,0,0,mPaint);
    // 将画布恢复
  	canvas.restore();
  	// 还是用之前的语句再绘制需要的图形
    canvas.drawBitmap(mBitmap,0,0,mPaint);		// 图形不重叠

    x++;
    y++;
    rotation+=1;
    if (x > mViewWidth - mBitmapWidth || y > mViewHeight - mBitmapHeight) {
        x = 0;
        y = 0;
    }

    postInvalidate();			// 这句话将会调用 onDraw(),也就是说，这个函数陷入死循环
}