自定义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);}@Overrideprotected 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/8mCircleRadius = 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() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {mHoleRadius= (float) animation.getAnimatedValue();invalidate();}});mAnimator.start();}}@Overridepublic 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() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {mCurrentRotationRadius = (float) animation.getAnimatedValue();invalidate();}});// 开始的时候向后然后向前甩mAnimator.setInterpolator(new AnticipateInterpolator(5f));mAnimator.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {mLoadingState = new ExpendState();}});//不断重复使用//mAnimator.setRepeatCount(-1);mAnimator.start();}}@Overridepublic 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() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {mCurrentRotationAngle = (float) animation.getAnimatedValue();invalidate();}});//不断重复使用mAnimator.setRepeatCount(-1);mAnimator.start();}}@Overridepublic 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() {@Overridepublic void run() {loadingView.disappear();}},2000);