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

一、动画

一般动画我们分为三大类：帧动画、补间动画（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代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/pic" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="还原状态" />

    <com.example.administrator.attranimatorapp.SplashView
        android:id="@+id/splashView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,029评论 3赞 119
  • CALayer的使用
    在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,161评论 5赞 13
  • 青春已过，奈何迷茫
    若不是这次又遇到了烦心事，还不曾想过“我今年已经24了”，还记得很多年前看到过一本名字叫做谁的青春不迷茫的书，当时...
    西子南寻阅读 336评论 0赞 0
  • “总有一天 你的善良会被上帝用大阪烧还给你”
    接下来的推送我们将推荐给大家一些即装 BI又美味又美味又美味的DIY美食！做给爸爸妈妈吃再也不怕他们嫌弃你假日在家...
    番茄说鸡蛋之番茄阅读 366评论 0赞 0
  • 人这一生到底要怎样去活着
    这篇文章是我从百度四处张贴复制过来的，版权存在侵权，以此劝勉各位勿举报，我只是用来自主激励。 那么...
    弓子阅读 291评论 2赞 2