一、动画
一般动画我们分为三大类：帧动画、补间动画（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>
这样我们就实现了上面的效果
