自定义view-视察动画之雅虎新闻摘要加载

首先布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include layout="@layout/fragment_page_first"/>
    <com.hbwj.a20_.LoadingView
        android:id="@+id/thirdScreenView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteY="8dp"
        tools:layout_editor_absoluteX="8dp" />

</RelativeLayout>

fragment_page_first布局和上一篇文章内容一样

LoadingView:自定义加载view

public class LoadingView extends View {
    // 旋转动画执行的时间
    private final long ROTATION_ANIMATION_TIME = 1400;
    private boolean mInitParams;
    private float mRotationRadius;//绕着旋转的动画的半径
    private float mCircleRadius;//小圆的半径
    private float mCurrentRotationAngle;
    // 小圆的颜色列表
    private int[] mCircleColors;
    //整体颜色背景
    private int mSplashColor = Color.WHITE;
    // 代表当前状态所画动画
    private LoadingState mLoadingState;
    //画笔
    private Paint mPaint;
    private int cententX, cententY;
    private float mCurrentRotationRadius;//当前半径
    // 空心圆初始半径
    private float mHoleRadius = 0F;
    // 屏幕对角线的一半
    private float mDiagonalDist;
    public LoadingView(Context context) {
        this(context, null);
    }

    public LoadingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mCircleColors = context.getResources().getIntArray(R.array.splash_circle_colors);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (!mInitParams) {
            initParams();
        }
        if (mLoadingState == null) {
            mLoadingState = new RotationState();
        }
        mLoadingState.drawable(canvas);
    }


    //初始化参数
    private void initParams() {
        mRotationRadius = getMeasuredWidth() / 4;
        // 每个小圆的半径 = 大圆半径的 1/8
        mCircleRadius = mRotationRadius / 8;
        mInitParams = true;
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        cententX = getWidth() / 2;
        cententY = getHeight() / 2;
        mDiagonalDist= (float) Math.sqrt(cententX*cententX+cententY*cententY);
    }

    /**
     * 消失:给外部调用
     */
    public void disappear() {
        //开始聚合动画
        //关闭动画
        if (mLoadingState instanceof RotationState) {
            RotationState rotationState = (RotationState) mLoadingState;
            rotationState.cancel();
        }
        mLoadingState = new MergeState();
    }


    public abstract class LoadingState {
        public abstract void drawable(Canvas canvas);
    }

    /**
     * 展开动画
     */
    public class ExpendState extends LoadingState {
        ValueAnimator mAnimator;
        public ExpendState() {
            if (mAnimator == null) {
                mAnimator=ObjectAnimator.ofFloat(0,mDiagonalDist);//从0到圆的对角线的一半
                mAnimator.setDuration(ROTATION_ANIMATION_TIME);
                mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        mHoleRadius= (float) animation.getAnimatedValue();
                        invalidate();
                    }
                });
                mAnimator.start();
            }
        }

        @Override
        public void drawable(Canvas canvas) {
            //画笔的宽度
            float strokeWidth=mDiagonalDist-mHoleRadius;
//            float strokeWidth=mDiagonalDist;
            mPaint.setStrokeWidth(strokeWidth );
            mPaint.setColor(mSplashColor);
            mPaint.setStyle(Paint.Style.STROKE);
//            float radius=strokeWidth/2;//向内
            float radius=strokeWidth/2+mHoleRadius;
            canvas.drawCircle(cententX,cententY,radius, mPaint);
        }
    }

    /**
     * 聚合动画
     */
    public class MergeState extends LoadingState {
        ValueAnimator mAnimator;

        public MergeState() {
            if (mAnimator == null) {
                //从外圆的半径到中心位置
                mAnimator = ObjectAnimator.ofFloat(mRotationRadius, 0);
                mAnimator.setDuration(ROTATION_ANIMATION_TIME / 2);
                mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        mCurrentRotationRadius = (float) animation.getAnimatedValue();
                        invalidate();
                    }
                });
                // 开始的时候向后然后向前甩
                mAnimator.setInterpolator(new AnticipateInterpolator(5f));
                mAnimator.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        mLoadingState = new ExpendState();
                    }
                });
                //不断重复使用
                //mAnimator.setRepeatCount(-1);
                mAnimator.start();
            }
        }

        @Override
        public void drawable(Canvas canvas) {
            //绘制白色背景
            canvas.drawColor(mSplashColor);
            //画6个圆
            //没份的角度
            double precentAngle = 2 * Math.PI / mCircleColors.length;
            for (int i = 0; i < mCircleColors.length; i++) {
                mPaint.setColor(mCircleColors[i]);
                //当前的角度=初始化的角度+旋转的角度
                double currentAngle = precentAngle * i + mCurrentRotationAngle;
                float cx = (float) (cententX + mCurrentRotationRadius * Math.cos(currentAngle));
                float cy = (float) (cententY + mCurrentRotationRadius * Math.sin(currentAngle));
                canvas.drawCircle(cx, cy, mCircleRadius, mPaint);
            }
        }
    }

    /**
     * 旋转动画
     */
    public class RotationState extends LoadingState {
        ValueAnimator mAnimator;

        public RotationState() {
            if (mAnimator == null) {
                //0-360度
                mAnimator = ObjectAnimator.ofFloat(0, 2 * (float) Math.PI);
                mAnimator.setDuration(ROTATION_ANIMATION_TIME);
                mAnimator.setInterpolator(new LinearInterpolator());
                mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        mCurrentRotationAngle = (float) animation.getAnimatedValue();
                        invalidate();
                    }
                });
                //不断重复使用
                mAnimator.setRepeatCount(-1);
                mAnimator.start();
            }
        }

        @Override
        public void drawable(Canvas canvas) {
            //绘制白色背景
            canvas.drawColor(mSplashColor);
            //画6个圆
            //没份的角度
            double precentAngle = 2 * Math.PI / mCircleColors.length;
            for (int i = 0; i < mCircleColors.length; i++) {
                mPaint.setColor(mCircleColors[i]);
                //当前的角度=初始化的角度+旋转的角度
                double currentAngle = precentAngle * i + mCurrentRotationAngle;
                float cx = (float) (cententX + mRotationRadius * Math.cos(currentAngle));
                float cy = (float) (cententY + mRotationRadius * Math.sin(currentAngle));
                canvas.drawCircle(cx, cy, mCircleRadius, mPaint);
            }
        }

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

MainActivity中使用

  final LoadingView loadingView = (LoadingView) findViewById(R.id.thirdScreenView);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                loadingView.disappear();
            }
        },2000);