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

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

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

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

以下为具体步骤：

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

新建一个类，继承自 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();
}

重写 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(),也就是说，这个函数陷入死循环
}