继续属性动画，之前写过 属性动画案例一（基础动画与飘心动画） 简单了解了属性动画，这次来点炫酷的~加载动画，先看一下效果
loading.gif
这个效果可以分为三个部分
- 小球的旋转
- 小球的聚合
- 水波纹扩展
首先我们先实现第一个效果，小球的旋转，变量的初始化 源码 里详细查看。在分配三个动画的时候这里用到了策略模式，三种动画分别对应了三个state类。
/**
* 1.旋转动画
* 控制各个小圆的坐标 控制小圆的角度变化 属性动画ValueAnimator
*/
private class RotateState extends SplashState{
public RotateState() {
//1.动画的初始工作 //2.开启动画
//计算某个时刻当前的角度是多少？0~2π
mAnimator=ValueAnimator.ofFloat(0f,(float) Math.PI*2);
mAnimator.setInterpolator(new LinearInterpolator());
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCurrentRotationAngle = (float) animation.getAnimatedValue();
invalidate();
}
});
mAnimator.setDuration(mRotationDuration);
mAnimator.setRepeatCount(ValueAnimator.INFINITE);//无限重复
mAnimator.start();
}
public void cancel(){
mAnimator.cancel();
}
@Override
public void drawState(Canvas canvas) {
//绘制背景，涂成白色
drawBackground(canvas);
//绘制小圆
drawCircle(canvas);
}
}
这里会返回1200ms内某个弧度值。这里自定义view在开始肯定会调用它的onDraw方法。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//开启第一个旋转动画
if (mState==null) {
mState=new RotateState();
}
//调用绘制方法
mState.drawState(canvas);
}
所以在第一次绘制的时候我们让他执行旋转状态的drawState(),这里主要是绘制小圆的方法，因为在之前的属性动画中会不停的invalidate();所以会不停的绘制，看一下小圆是怎么绘制的。
private void drawCircle(Canvas canvas) {
//每个小圆之间的间隔角度 = 2π/小圆的个数
float rotationAngle = (float) (2*Math.PI/mCircleColors.length);
for (int i=0; i < mCircleColors.length; i++){
/**
* x = r*cos(a) +centerX
y= r*sin(a) + centerY
每个小圆i*间隔角度 + 旋转的角度 = 当前小圆的真是角度
*/
double angle = i*rotationAngle + mCurrentRotationAngle;
//mCurrentRotationRadius是不断变的
float cx = (float) (mCurrentRotationRadius*Math.cos(angle) + mCenterX);
float cy = (float) (mCurrentRotationRadius*Math.sin(angle) + mCenterY);
mPaint.setColor(mCircleColors[i]);
canvas.drawCircle(cx,cy,mCircleRadius,mPaint);
}
}
根据之前的弧度算出角度，已知半径和角度求X,Y。这样就把小球滑到了对应的点上。旋转一定时间后，我们需要让他聚合。
mState = new MargingState();
这句代码就是切换了状态，执行不同的代码
/**
* 2.聚合动画
* 要素：大圆的半径 变大--变小 小圆的半径
*/
private class MargingState extends SplashState{
public MargingState() {
//花1200秒 计算某个时刻当前大圆半径是多少 r~0的过程
mAnimator = ValueAnimator.ofFloat(mCircleRadius,mRotationRadius);
mAnimator.setDuration(mRotationDuration/3*2);
mAnimator.setInterpolator(new OvershootInterpolator(10f));
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//某个时刻当前大圆的半径是多少？
mCurrentRotationRadius = (float)animation.getAnimatedValue();
invalidate();
}
});
mAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mState = new ExpandState();
removeCallbacks(r);
}
@Override
public void onAnimationRepeat(Animator animation) {
super.onAnimationRepeat(animation);
}
});
// mAnimator.start();
mAnimator.reverse();
}
@Override
public void drawState(Canvas canvas) {
//1.背景--擦黑板，涂成白色
drawBackground(canvas);
//2.绘制小圆
drawCircle(canvas);
}
}
这里会通过属性动画获取大圆的半径，ofFloat（小圆半径，大圆半径），
插值器是会超过最大值然后还原，不过因为最后调用的是reverse()，所以这里都是相反的，所以就呈现除了先往外在缩小的动画，最后就是水波纹扩散动画，这里其实是花空心圆，因为主界面本来就在动画界面的后边，我们只要把中间挖空就能看到主界面。这里在第二个动画结束的时候回改变状态，然后看一下第三个状态是怎么实现的。
/**
* 3.水波纹扩散动画
* 画一个空心圆 -- 画一个园，让它的画笔的粗细变成很大 -- 不断的减小画笔的粗细
* 空心圆变化的范围：0~对角线/2
*/
private class ExpandState extends SplashState{
public ExpandState() {
//花1200ms，计算某个时刻当前的空心圆的半径是多少？ r~屏幕对角线中的某个值
mAnimator = ValueAnimator.ofFloat(mCircleRadius, mDiagonalDist);
mAnimator.setDuration(mRotationDuration);
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
//当前的空心圆的半径是多少？
mHoleRadius = (float) valueAnimator.getAnimatedValue();
invalidate();
}
});
mAnimator.start();
}
@Override
public void drawState(Canvas canvas) {
drawBackground(canvas);
}
}
mDiagonalDist这个变量是屏幕对角线的距离，也就是说当圆的半径为屏幕对角线的时候就覆盖了整个屏幕。mHoleRadius就是某个时刻空心圆的半径。最后会画背景
private void drawBackground(Canvas canvas) {
if (mHoleRadius>0f) {
//得到画笔的宽度 = 对角线/2 - 空心圆的半径
float strokeWidth = mDiagonalDist - mHoleRadius;
mPaintBackground.setStrokeWidth(strokeWidth);
//画圆的半径 = 空心圆的半径 + 画笔的宽度/2
float radius = mHoleRadius + strokeWidth/2;
canvas.drawCircle(mCenterX,mCenterY,radius,mPaintBackground);
}else {
canvas.drawColor(mSplashBgColor);
}
}
这里的mPaintBackground的Style设置成了描边，最后给了canvas，这个自定义VIew呈现的画面都是由这个canvas所画的，现在画了一个空心圆，后面的主界面也就呈现了出来，将这个空心圆的半径不断变大，就出现了水波纹的效果~这个思路是不是很赞