属性动画实现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
分析图中坐标系可得：
圆心x坐标 = 画布x轴中心坐标 + 半径* cos（角度）
圆心y坐标 = 画布y轴中心坐标 + 半径* sin （角度）
注意这里的半径为 小圆圆心到 画布中心点的距离
绘制的代码为：
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的绘制基础 和 属性动画基础。
