属性动画实现Loading动画，实现效果如下：

loading.gif

（不知为啥这个gif 录制出来看着有点诡异，但是不影响分析）
动画的实现难就难在分析的过程，如何将 复杂的动画 拆分成独立的小动画，然后结合绘制实现界面效果，接下来我对这个动画进行拆分分析。

动画分析

分析上面的gif ，可以把动画的执行过程分为三部分：

• 小圆旋转动画 （底色为白色）
• 小圆张开然后收缩动画 （底色为白色）
• 中心的圆形扩散动画 （无底色）

每个状态需要绘制不同的界面，开启不同的动画，如果所有逻辑判断、绘制全部放在 onDraw 方法中，代码将非常不利于维护，这里可以采用 策略模式，将具体的绘制和动画拆分封装到对应的状态中去。所以有了下面抽象类的抽取

/**
     * 策略模式 视图的状态
     * 将绘制的动作 交由 子类去完成
     */
    private abstract class LoadingState {

        public abstract void drawState(Canvas canvas);

        public void cancle() {
            if (mAnimator != null) {
                mAnimator.cancel();
            }
        }
    }

同时 onDraw 方法就可以精简如下

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

        if (mState == null) {
            //初始状态是旋转 状态
            mState = new RotateState();
        }
        //将绘制的操作 交给 对应的状态
        mState.drawState(canvas);
    }

三个状态的具体分析：

旋转动画

 1️⃣绘制6个 小圆
 canvas 绘制圆形的api为:

public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint) {
      super.drawCircle(cx, cy, radius, paint);
  }

我们需要绘制6个小圆，需要分别确定 6个圆心坐标，进行绘制

image

  private void drawCircle(Canvas canvas) {
      //每次增加的角度
      float rotationRangle = (float) (2 * Math.PI / mCircleColors.length);

      for (int i = 0; i < mCircleColors.length; i++) {
          // 旋转的角度
          float angle = i * rotationRangle ;
          //计算圆心
          float cx = (float) (mCircleRidus * Math.cos(angle) + mCenterX);
          float cy = (float) (mCircleRidus * Math.sin(angle) + mCenterY);
          //设置画笔颜色
          mCirclePaint.setColor(mCircleColors[I]);
          //绘制圆形
          canvas.drawCircle(cx, cy, mCircleRidus, mCirclePaint);

      }
  }

2️⃣ 让小圆动起来
经过分析可知，小圆的位置是通过 angle 计算而来，那么我们可以通过修改 angle 的值进行 Invalidate，让它动起来.使用ValueAnimator来实现该效果
修改绘制小圆代码

private void drawCircles(Canvas canvas) {
      float rotationRangle = (float) (2 * Math.PI / mCircleColors.length);

      for (int i = 0; i < mCircleColors.length; i++) {
          //根据 动画量 计算角度
          float angle = i * rotationRangle + mCurrentRotationRangle;
          //根据角度计算坐标
          float cx = (float) (mCurrentRotationRadis * Math.cos(angle) + mCenterX);
          float cy = (float) (mCurrentRotationRadis * Math.sin(angle) + mCenterY);
          mCirclePaint.setColor(mCircleColors[I]);
          canvas.drawCircle(cx, cy, mCircleRidus, mCirclePaint);
      }
  }

加入动画：

  //动画的范围为 0 -2*PI  旋转一周
  ValueAnimator  mAnimator = ValueAnimator.ofFloat(0f, (float) Math.PI * 2);
            mAnimator.setDuration(defaultTime);
            // 动画重复执行
            mAnimator.setRepeatCount(ValueAnimator.INFINITE);
            //为了保持旋转的平滑  需要设置为 线性 插值器
            mAnimator.setInterpolator(new LinearInterpolator());
            //设置更新监听
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    //动画执行过程
                    //修改 旋转角度  并进行重绘
                    mCurrentRotationRangle = (float) animation.getAnimatedValue();

                    postInvalidate();
                }
            });
            mAnimator.start();

张开收缩动画

经过旋转动画的分析，动画的核心在于控制 小圆圆心 的坐标

    //根据角度计算坐标
            float cx = (float) (mCurrentRotationRadis * Math.cos(angle) + mCenterX);
            float cy = (float) (mCurrentRotationRadis * Math.sin(angle) + mCenterY);

完成张开收缩动画 可以通过动态修改 mCurrentRotationRadis 的值来完成

            mAnimator = ValueAnimator.ofFloat(mRotationRadis, 0);
            mAnimator.setInterpolator(new OvershootInterpolator(20f));
            mAnimator.setDuration(defaultTime);
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mCurrentRotationRadis = (float) animation.getAnimatedValue();

                    postInvalidate();
                }
            });
            mAnimator.addListener(new AnimatorListenerAdapter() {

                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);

                    mState = new DiffusionState();

                    postInvalidate();
                }
            });
            mAnimator.start();

代码不难，就是valueAnimator的应用这里说明两点：
1、因为动画是 先张开再收缩 可以通过增加 valueAnimator 的关键帧来实现，同时也可以使用 OvershootInterpolator 插值器来完成
2、动画完成监听，动画完成之后需要修改状态，执行第三阶段的扩散动画

扩散动画

1、透明底色
2、由内向外扩散

image

分析：白色区域使用白色圆环来绘制，半径不断变大，边框宽度不断变小，最终圆环超出屏幕范围不显示，底部遮盖内容完全显示。

半径的范围：0 - 对角线长度
边框的范围：对角线长度-0
代码如下：

 @Override
        public void drawState(Canvas canvas) {
            if(mHoleRadis==0) {
                canvas.drawColor(bg);
            }
            mCirclePaint.setColor(bg);
            mCirclePaint.setStyle(Paint.Style.STROKE);

            float strokeWidth = mDiagonal - mHoleRadis;
            mCirclePaint.setStrokeWidth(strokeWidth);

            float ridus = mHoleRadis + strokeWidth/2;
            canvas.drawCircle(mCenterX, mCenterY,ridus , mCirclePaint);

        }

 mAnimator = ValueAnimator.ofFloat(mHoleRadis, mDiagonal);
            mAnimator.setInterpolator(new AccelerateInterpolator());

            mAnimator.setDuration(defaultTime);
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mHoleRadis = (float) animation.getAnimatedValue();

                    postInvalidate();
                }
            });
            mAnimator.addListener(new AnimatorListenerAdapter() {

                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    setVisibility(GONE);
                }
            });
            mAnimator.start();

总结

至此，这个动画的实现过程分析结束。
在面对复杂的动画时，把复杂动画拆分成简单的小动画，逐步实现，分析动画是通过哪个值的变化来动起来的，在这个过程中需要有一定的 canvas的绘制基础 和 属性动画基础。