Android Canvas进阶之自定义View实现Splash的旋转、扩散聚合、水波纹特效

先上效果图

 动画可以分割为3阶段，第一阶段是6个小圆的旋转，第二阶段是6个小圆的扩散和收缩，第三部分是水波纹特效，动画的实现也是按照这三个阶段进行实现的。

1.初始化

自定义FlashView继承View，然后在构造方法中对画笔初始化，初始化2支画笔，一个是画小圆的，另一个是第三阶段画水波纹的

    private void init() {
        setBackgroundResource(R.drawable.girl);//先设置一张背景，模拟splash后面的界面

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mHolePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mHolePaint.setStyle(Paint.Style.STROKE);
        mHolePaint.setColor(Color.WHITE);//扩散圆的颜色为白色
        mSplashState = new RotateState();
    }

有一堆成员变量的声明，每个都有详细注释，一看就懂

   private Paint mPaint;//画小圆的画笔
    private Paint mHolePaint;//画水波纹的画笔
    private int[] circleColors = {0xFFFF9600, 0xFF02D1AC, 0xFFFFD200, 0xFF00C6FF, 0xFF00E099, 0xFFFF3892};//6个小圆的颜色的数组
    private float mCenterX;//旋转圆的中心横坐标
    private float mCenterY;//旋转圆的中心纵坐标
    private float mDistance;//表示斜对角线长度的一半,扩散圆最大半径
    private float mCircleRadius = 18; //6个小球的半径
    private float mRotateRadius = 90;//旋转大圆的半径
    private float mCurrentRotateRadius = mRotateRadius;//当前旋转圆的半径
    private float mCurrentRotateAngle = 0F; //当前旋转圆的旋转角度
    private float mCurrentHoleRadius = 0F;//扩散圆的半径
    private int mRotateDuration = 1000; //旋转动画的时长
    private ValueAnimator mValueAnimator;//属性动画
    private SplashState mSplashState; 

旋转圆的中心坐标和水波纹扩散圆的最大半径需要根据屏幕尺寸初始化，因此放到onMeasure中

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mCenterX = MeasureSpec.getSize(widthMeasureSpec) / 2;
        mCenterY = MeasureSpec.getSize(heightMeasureSpec) / 2;
        mDistance = (float) Math.hypot(mCenterX, mCenterY); //hypot函数是取平方根
    }

2.绘制小圆

到这里初始化工作已经做完了。在三个动画阶段开始之前先来绘制6个小球，动画的事往后稍一稍。首先定义一个抽象类SplashState，包含一个抽象方法drawState。后面的三种动画都继承自SplashState实现drawState方法，然后我们只需要在ondraw方法中调用SplashState的drawStatue方法即可，具体的实现在每个状态的drawState方法中

    private abstract class SplashState {
        abstract void drawState(Canvas canvas);
    }

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

    }

绘制小圆在第一个阶段旋转动画中实现，么得办法，总得找个地方去绘制，第一个是绘制小圆的背景，纯白色，第二个是绘制6个小圆，绘制背景很简单，直接绘制纯色就好，小圆的绘制稍微有一点点绕，小圆的颜色直接从定义的颜色数组里面拿，每个小圆的横坐标等于旋转的大圆半径加上旋转的大圆半径在每个小圆在极坐标中的角度的cos值，以第二个小球为例，画图可能更清晰点