使用属性动画实现一个复杂的动画

一、动画

一般动画我们分为三大类：帧动画、补间动画（Tween Animation）、属性动画。
帧动画我们一般对gif做动画；补间动画又分为：Alpha、Scale、Translate、Rotate是直接作用到view上面的，所以有很多的局限性，很多复杂的动画都不能实现。
在3.0后出现了属性动画，是直接对控件的属性进行修改，所以可以完成很多复杂的动画，下面我们可以看一下这个效果怎么实现：

device-2018-07-12-154743.gif

二、实现动画

1， 我们拿到这个设计图，首先应该理清思路拆分动画的效果步骤：

第一步：画六个圆
第二步：逆时针或者顺时针旋转（旋转状态）
第三步：六个圆聚合动画（聚合状态）
第四步：从聚合后的一个圆扩散，显示下层布局（扩散状态）

2，逐步实现上面的步骤

1）通过对上面的分析，我们知道这中间动画的执行有三种状态，所以我们可以采用设计模式中状态模式，他们三个状态都要对图形绘制进行操作，所以我们创建一个抽象类，其他状态类都继承它：

 //动画有三种状态:旋转,聚合,扩散，这里采用设计模式的状态模式
    public abstract class SplashState {
        abstract void drawState(Canvas canvas);

        //取消动画
        void cancelAnimator() {
            if (mAnimator != null) {
                mAnimator.cancel();
            }
        }
    }

2)通过分析：旋转，聚合，扩散动画我们都可以使用属性动画，通过修改属性值可以达到动画效果，所以在抽象类中实现了动画的结束方法；

采用设置模式状态模式，这里我们有三种状态，就要三种状态分别继承SplashState 类，如下：

   //旋转状态
    public class RotationState extends SplashState {
        @Override
        void drawState(Canvas canvas) {
}
}

 //聚合状态
    public class MergeState extends SplashState {
       @Override
        void drawState(Canvas canvas) {
}
}

    //扩散状态
    public class SpreadState extends SplashState {
   @Override
        void drawState(Canvas canvas) {

     }
}

3)第一次进来执行rotation状态，所以在绘制onDraw里面初始化状态

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //第一次进来执行旋转动画
        if (mState == null) {
            mState = new RotationState();
        }
      //进行绘制
        mState.drawState(canvas);
    }

4）实现rotation旋转动画

//旋转状态
  public class RotationState extends SplashState {
      public RotationState() {
          //动画执行一次旋转360°
          mAnimator = ValueAnimator.ofFloat((float) (Math.PI * 2), 0f);//逆时针
          mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
              @Override
              public void onAnimationUpdate(ValueAnimator valueAnimator) {
                  //获取旋转值
                  mRotationDegrees = (float) valueAnimator.getAnimatedValue();
                  //重绘
                  invalidate();

              }
          });
          //设置线性插值器
          mAnimator.setInterpolator(new LinearInterpolator());
          mAnimator.setDuration(mDuration);
          //设置动画执行次数时间，INFINITE：无数次
          mAnimator.setRepeatCount(ValueAnimator.INFINITE);
          mAnimator.start();

      }

      @Override
      void drawState(Canvas canvas) {
          drawBackGround(canvas);
          drawCircles(canvas);
      }
  }

  private void drawCircles(Canvas canvas) {
      //算出平均角度
      float averageDegree = (float) (2 * Math.PI / mCircleColors.length);
      //遍历绘制画圆
      for (int i = 0; i < mCircleColors.length; i++) {
          //每个圆相对于屏幕中心点的角度
          float circleDegree = averageDegree * i;
          //旋转后的实际角度
          float actualCurrentDress = circleDegree + mRotationDegrees;
          float cx = (float) (mChangeRadius * Math.cos(actualCurrentDress) + mCenterX);
          float cy = (float) (mChangeRadius * Math.sin(actualCurrentDress) + mCenterY);
          mCirclePaint.setColor(mCircleColors[i]);
          canvas.drawCircle(cx, cy, mSingleCircleRadius, mCirclePaint);
      }
  }

  private void drawBackGround(Canvas canvas) {
      //画布背景
       canvas.drawColor(mBackGroundColor);
  }

5）实现聚合动画

  //聚合状态
    public class MergeState extends SplashState {
        public MergeState() {
            mAnimator = ValueAnimator.ofFloat(mCircleRadius, 0);
            mAnimator.setDuration(mDuration);
            mAnimator.setInterpolator(new BounceInterpolator());
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    mChangeRadius = (float) valueAnimator.getAnimatedValue();
                    invalidate();
                }
            });

            mAnimator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    if (mState != null && mState instanceof MergeState) {
                    //结束聚合动画后再执行扩散动画
                        mState = new SpreadState();
                    }
                }
            });
            mAnimator.start();
        }

        @Override
        void drawState(Canvas canvas) {
            drawBackGround(canvas);
            drawCircles(canvas);
        }
    }

6）实现扩散动画

 //扩散状态
    public class SpreadState extends SplashState {

        public SpreadState() {
            mAnimator = ValueAnimator.ofFloat(mSingleCircleRadius, mDiagonal);
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    mHollowRadius = (float) valueAnimator.getAnimatedValue();
                    invalidate();
                }
            });
            mAnimator.setDuration(mDuration);
            mAnimator.start();
        }

        @Override
        void drawState(Canvas canvas) {
            float paintWidth = mDiagonal - mHollowRadius;//画笔宽度
            mHollowPaint.setStrokeWidth(paintWidth);
            canvas.drawCircle(mCenterX, mCenterY, mHollowRadius + paintWidth / 2, mHollowPaint);
        }
    }

这样我们动画的三个状态就已经完成

三、完整代码

自定义view代码如下：

public class SplashView extends View {
    private ValueAnimator mAnimator;
    private SplashState mState;
    private int[] mCircleColors;
    private Paint mCirclePaint;
    //单个圆的半径
    private float mSingleCircleRadius = 18f;
    //六个圆围成的圆的半径
    private float mCircleRadius = 90;

    //聚合的时候圆的初始半径
    private float mChangeRadius = mCircleRadius;

    private float mRotationDegrees = 0;

    private int mDuration = 1200;//单位毫秒

    private float mCenterX, mCenterY;//算出控件的中心位置

    private float mDiagonal;//对角线

    private int mBackGroundColor = Color.WHITE;//背景颜色

    private Paint mHollowPaint;//空心圆的画笔

    private float mHollowRadius;//空心圆的半径

    public SplashView(Context context) {
        super(context);
    }

    public SplashView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public SplashView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    public void init() {
        //找到所要画的圆的颜色，colors中定义的颜色数组
        mCircleColors = getContext().getResources().getIntArray(R.array.splash_circle_colors);
        //初始化画圆的画笔
        mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mCirclePaint.setAntiAlias(true);
        //设置填充
        mCirclePaint.setStyle(Paint.Style.FILL_AND_STROKE);

        mHollowPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mHollowPaint.setAntiAlias(true);
        mHollowPaint.setStyle(Paint.Style.STROKE); //设置不填充画笔
        mHollowPaint.setColor(mBackGroundColor);//设置画笔颜色
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mCenterX = w / 2;
        mCenterY = h / 2;
        mDiagonal = (float) (Math.sqrt((w * w + h * h)) / 2);
        init();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //第一次进来执行旋转动画
        if (mState == null) {
            mState = new RotationState();
        }
        mState.drawState(canvas);
    }

    //还原状态
    public void setInitialState() {
        if (mState != null) {
            mState.cancelAnimator();
        }
        //还原
        mChangeRadius = mCircleRadius;
        mState = new RotationState();
        invalidate();
    }

    public void changeRotationState() {
        //从旋转状态变成聚合状态
        if (mState != null && mState instanceof RotationState) {
            //取消旋转动画
            RotationState rotationState = (RotationState) mState;
            rotationState.cancelAnimator();
            post(new Runnable() {
                @Override
                public void run() {
                    mState = new MergeState();
                }
            });

        }
    }

    //动画有三种状态:旋转,聚合,扩散，这里采用设计模式的状态模式
    public abstract class SplashState {
        abstract void drawState(Canvas canvas);

        //取消动画
        void cancelAnimator() {
            if (mAnimator != null) {
                mAnimator.cancel();
            }
        }
    }

    //旋转状态
    public class RotationState extends SplashState {
        public RotationState() {
            //动画执行一次旋转360°
            mAnimator = ValueAnimator.ofFloat((float) (Math.PI * 2), 0f);//逆时针
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    //获取旋转值
                    mRotationDegrees = (float) valueAnimator.getAnimatedValue();
                    //重绘
                    invalidate();

                }
            });
            //设置线性插值器
            mAnimator.setInterpolator(new LinearInterpolator());
            mAnimator.setDuration(mDuration);
            //设置动画执行次数时间，INFINITE：无数次
            mAnimator.setRepeatCount(ValueAnimator.INFINITE);
            mAnimator.start();

        }

        @Override
        void drawState(Canvas canvas) {
            drawBackGround(canvas);
            drawCircles(canvas);
        }
    }

    private void drawCircles(Canvas canvas) {
        //算出平均角度
        float averageDegree = (float) (2 * Math.PI / mCircleColors.length);
        //遍历绘制画圆
        for (int i = 0; i < mCircleColors.length; i++) {
            //每个圆相对于屏幕中心点的角度
            float circleDegree = averageDegree * i;
            //旋转后的实际角度
            float actualCurrentDress = circleDegree + mRotationDegrees;
            float cx = (float) (mChangeRadius * Math.cos(actualCurrentDress) + mCenterX);
            float cy = (float) (mChangeRadius * Math.sin(actualCurrentDress) + mCenterY);
            mCirclePaint.setColor(mCircleColors[i]);
            canvas.drawCircle(cx, cy, mSingleCircleRadius, mCirclePaint);
        }
    }

    private void drawBackGround(Canvas canvas) {
        //画布背景
        canvas.drawColor(mBackGroundColor);
    }

    //聚合状态
    public class MergeState extends SplashState {
        public MergeState() {
            mAnimator = ValueAnimator.ofFloat(mCircleRadius, 0);
            mAnimator.setDuration(mDuration);
            mAnimator.setInterpolator(new BounceInterpolator());
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    mChangeRadius = (float) valueAnimator.getAnimatedValue();
                    invalidate();
                }
            });

            mAnimator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    if (mState != null && mState instanceof MergeState) {
                        mState = new SpreadState();
                    }
                }
            });
            mAnimator.start();
        }

        @Override
        void drawState(Canvas canvas) {
            drawBackGround(canvas);
            drawCircles(canvas);
        }
    }

    //扩散状态
    public class SpreadState extends SplashState {

        public SpreadState() {
            mAnimator = ValueAnimator.ofFloat(mSingleCircleRadius, mDiagonal);
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    mHollowRadius = (float) valueAnimator.getAnimatedValue();
                    invalidate();
                }
            });
            mAnimator.setDuration(mDuration);
            mAnimator.start();
        }

        @Override
        void drawState(Canvas canvas) {
            float paintWidth = mDiagonal - mHollowRadius;//画笔宽度
            mHollowPaint.setStrokeWidth(paintWidth);
            canvas.drawCircle(mCenterX, mCenterY, mHollowRadius + paintWidth / 2, mHollowPaint);
        }
    }

}

MainActivity代码:

public class MainActivity extends AppCompatActivity {

    private SplashView mSplashView;
    Handler handler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mSplashView = findViewById(R.id.splashView);
        run();

    }

    public void onClick(View view) {
        mSplashView.setInitialState();
        run();
    }

    public void run() {
        //模拟请求网络
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                mSplashView.changeRotationState();
            }
        }, 4000);
    }
}

xml代码：

这样我们就实现了上面的效果