Android的属性动画（二）加载框圆点旋转收缩放大缩小效果的实现

案例效果图如下，

案例实现步骤

1.首先用drawCircle()画好6个圆点

    private void drawCircles(Canvas canvas) {
        //每个小圆之间的间隔角度 = 2π/小圆的个数
        float rotationAngle = (float) (2*Math.PI/mCircleColors.length);
        Log.i("barry","length------:"+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;
            float cx = (float) (mCurrentRotationRadius*Math.cos(angle) + mCenterX);
            float cy = (float) (mCurrentRotationRadius*Math.sin(angle) + mCenterY);
            Log.e("Test", "弧度="+angle+ "    对应的值="+mCurrentRotationRadius*Math.sin(angle));
            mPaint.setColor(mCircleColors[i]);
            canvas.drawCircle(cx,cy,mCircleRadius,mPaint);
        }
    }

2.通过属性动画让6个圆点开始旋转

//1.动画的初始工作；2.开启动画
            //花1200ms，计算某个时刻当前的角度是多少？ 0~2π
            mAnimator = ValueAnimator.ofFloat(0f,(float)Math.PI*2);//Math.PI*2 用于代表360度
            //在重复执行的过程中，会有卡顿的现象，LinearInterpolator 可以用于解决卡顿
            mAnimator.setInterpolator(new LinearInterpolator());
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    //计算某个时刻当前的大圆旋转了的角度是多少？
                    mCurrentRotationAngle = (float) valueAnimator.getAnimatedValue();
                    postInvalidate();
                }
            });
            mAnimator.setDuration(mRotationDuration);
            mAnimator.setRepeatCount(ValueAnimator.INFINITE);//重复
            mAnimator.start();

3.当网络数据加载成功后，让旋转动画停止，同时让6个圆点先开始收缩，然后再回弹

//花1200ms，计算某个时刻当前的大圆半径是多少？ r~0中的某个值
            mAnimator = ValueAnimator.ofFloat(0, mRotationRadius);
            mAnimator.setDuration(mRotationDuration);
            mAnimator.setInterpolator(new OvershootInterpolator(10f));
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
//                    某个时刻当前的大圆半径是多少？
                    mCurrentRotationRadius = (float)valueAnimator.getAnimatedValue();
                    invalidate();
                }
            });
            mAnimator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    mState = new ExpandState();
                }
            });
//            mAnimator.start();
            mAnimator.reverse();;

注意细节

mAnimator.setInterpolator(new OvershootInterpolator(10f));

使6个圆点反向扩散时，具备张力效果

 mAnimator.reverse();

让动画反向执行，可以达到从扩散到收缩的效果

4.让背景以圆的方式扩散

如下图，当旋转的6个点消失后，背景也应该以圆的方式进行扩展，以显示背后的内容

 if(mHoleRadius>0f){
            //得到画笔的宽度 = 对角线/2 - 空心圆的半径
            float strokeWidth = mDiagonalDist - mHoleRadius;
            mPaintBackground.setStrokeWidth(strokeWidth);
            //画圆的半径 = 空心圆的半径 + 画笔的宽度/2
            float radius = mHoleRadius + strokeWidth/2;
            canvas.drawCircle(mCenterX,mCenterY,radius,mPaintBackground);

            Log.e("Test","画圆: radius="+radius+"  strokeWidth="+strokeWidth);
        }else {
            canvas.drawColor(mSplashBgColor);
        }