属性动画案例：雅虎加载视差动画

实现效果：

这边其实是两个View，加载动画覆盖在需要进入的页面的上面
动画分为三种状态
1：一开始的小圆球旋转动画
2：小圆逃逸后再聚合动画
3：水波纹扩散动画

一、初始化基本参数

    private void init(Context context) {
        //这边mCircleColors为六个小球的颜色
        mCircleColors = context.getResources().getIntArray(R.array.splash_circle_colors);
        //画笔初始化
        //消除锯齿
        mPaint.setAntiAlias(true);
        mPaintBackground.setAntiAlias(true);//该Paint为加载动画白色背景墙
        //设置样式---边框样式--描边
        mPaintBackground.setStyle(Paint.Style.STROKE);
        mPaintBackground.setColor(mSplashBgColor);
    }

二、使用策略模式分别实现三种状态

    private SplashState mState=null;

    private abstract class SplashState{
        public abstract void drawSate(Canvas canvas);

    }

先定义好是要实现的策略类

1）旋转动画

    /**
     * 1.旋转动画
     * 控制各个小圆的坐标----控制小圆的角度变化------属性动画ValueAnimator
     */
    private class RotateState extends SplashState{
        public RotateState() {
            //1.动画的初始工作, 0~2π 圆周角的弧度数
            mAnimator=ValueAnimator.ofFloat(0f,(float)(Math.PI*2));
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    //计算某个时刻当前的角度是多少
                    mCurrentRotationAngle= (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            // 2.开启动画
            mAnimator.setInterpolator(new LinearInterpolator());
            mAnimator.setDuration(mRotationDuration);
            mAnimator.setRepeatCount(ValueAnimator.INFINITE);
            mAnimator.start();
        }

        public void cancel(){
            mAnimator.cancel();
        }

        @Override
        public void drawSate(Canvas canvas) {
            //1.背景---擦黑板，涂成白色
            drawBackground(canvas);
            //2.绘制小圆
            drawCircles(canvas);
        }
    }

构造方法中初始化好旋转动画所需的属性动画

绘制小圆的方法

private void drawCircles(Canvas canvas) {
        //每个小圆之间的间隔角度2π/小圆的个数
        float rotationAngel= (float) (2*Math.PI/mCircleColors.length);
        for (int i=0;i<mCircleColors.length;i++){
            /*
             *  x=r*cos(a)+centerX
             *  y=r*sin(a)+centerY
             */
            double angle=i*rotationAngel+mCurrentRotationAngle;
            //每个小圆i*间隔角度+旋转角度=当前小圆的真实角度
            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);
        }

    }

1.首先先求出一个由六个小圆组成大圆之间它们之间的间隔角度为2π/小球个数
2.再根据属性动画mCurrentRotationAngle计算的旋转角度以及间隔角度算出当前小球的真实角度
3.mCenterX和mCenterY取的是屏幕宽高的一半，mCurrentRotationRadius为定义的大圆的半径

4.这样就算出了小圆的圆心坐标

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(mState==null){
            //开启第一个动画，旋转动画
            mState=new RotateState();
        }

        //调用绘制方法
        mState.drawSate(canvas);
    }

在onDraw开启第一个动画，并调用绘制方法开始无限循环的旋转小球，在主界面顶一个延迟来结束第一个动画进入第二个动画

    private void startLoadData() {
        mHandler.postDelayed(new Runnable() {
            @Override
            public void run() {
                //数据加载完毕，进入主界面---》开启后面的两个动画
                mSplashView.splashDisapper();
            }
        },3000);
    }

自定义View中：

    public void splashDisapper(){
        //开启后面两个动画

        //换模板if--换状态
        if(mState!=null&&mState instanceof RotateState){
            //结束旋转动画
            RotateState rotateState= (RotateState) mState;
            rotateState.cancel();

            post(new Runnable() {
                @Override
                public void run() {
                    mState=new MergingState();
                }
            });
        }
    }

2）聚合动画

    /**
     * 2.聚合动画
     * 要素：大圆的半径不断地变大---》变小----》小圆的坐标
     */
    private class MergingState extends SplashState{
        public MergingState() {
            //r~0的某个值
            mAnimator=ValueAnimator.ofFloat(mRotationRadius,0);
            mAnimator.setDuration(mRotationDuration);
            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();
                }
            });
            mAnimator.start();
        }

        @Override
        public void drawSate(Canvas canvas) {
            //1.背景---擦黑板，涂成白色
            drawBackground(canvas);
            //2.绘制小圆
            drawCircles(canvas);
        }
    }

1.mRotationRadius大圆初始半径到0的值，加入插值器OvershootInterpolator（向前甩一定值后再回到原来位置）
2.当持续时间完成调用下一个动画，这边drawState中同样是需要画白色背景墙和小圆的，只是这个时候mCurrentRotationRadius大圆半径进行了变化

3）水波纹扩散动画

    /**
     * 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 animation) {
                    mHoleRadius= (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            mAnimator.start();
        }

        @Override
        public void drawSate(Canvas canvas) {
            //1.背景---擦黑板，涂成白色
            drawBackground(canvas);
        }
    }

1.第三个动画实现方式根据画一个空心圆，控制其stroWidth大小，不断减小实现扩散
2.mHoleRadius为空心圆的初始半径，这个时候处在第三状态的一开始所有的小球是已经聚集在一起的，所以初始半径这边根据属性动画mCircleRadius（小圆半径）到mDiagonalDist
3.mDiagonalDist：为屏幕对角线的一半，至于为什么是这个需要看一下drawBackground方法

    private void drawBackground(Canvas canvas) {
        if(mHoleRadius>0f){//第三个动画开始执行
            //得到画笔的宽度---对角线的一半-空心圆的半径
            float stroWidth=mDiagonalDist-mHoleRadius;
            mPaintBackground.setStrokeWidth(stroWidth);
            //画圆的半径=空心圆的半径+画笔的宽度/2
            float radius=mHoleRadius+stroWidth/2;
            canvas.drawCircle(mCenterX,mCenterY,radius,mPaintBackground);
        }else{//其他两个动画
            canvas.drawColor(mSplashBgColor);
        }
    }

这样空心圆半径不断变大，stroWdith不断减少，圆半径随之改变，就实现了扩散的方法