自定义 View 之雅虎新闻视差动画

作者: 威威喵丶 | 来源:发表于2019-08-29 12:12 被阅读0次

博主声明：

转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主威威喵原创，请多支持与指教。

本文首发于此博主：威威喵 | 博客主页：https://blog.csdn.net/smile_running

今天在手机上看到这样的一种加载效果，看起来还挺炫酷的，好几个小圆转啊转，颜色还不同，转完了之后消失了，然后内容就加载出来了。用语言描述大概就是这样了，我们直接看效果吧。

image

看到这个效果的时候，我的脑壳里面就在想，这个圆它要怎么转起来呢，绘制一周的圆倒是比较简单，但是要让它转起来，肯定是坐标值发生的改变，那究竟如何做出相应的改变呢，我们接下来一步一步分析和实现该效果。

首先，看到这个效果的时候，我们能做的第一步，就是把外面这 6 个小圆给绘制出来，多的不说，我们先绘制固定的 6 个小圆就好了，如何动起来再考虑。

要想绘制这 6 个静态的小圆，其实并不难。小圆的轨迹其实就是一个圆的圆弧吧，那么这个轨迹所围成的必定是一个大圆，所以呢，我们先将里面这个大圆给绘制出来。

接着考虑小圆的绘制，既然我们已经把大圆绘制出来了，肯定直到大圆的圆心和半径了，那么每一个小圆就是根据不同的角度绘制不同的位置了，那么 6 个小圆平均一下，每个之间的间隔就是 60° 的差值。好吧，之间来看下面我画的草图就一目了然了

image

根据上面我画的那张图，我们看到大圆一周共有 6 个小圆，我们拿一个圆为例子，绿色小圆的圆心 P 点就是我们所要求的坐标点。因为我们的 6 个小圆对应的角度都是均分的，所以我们也就知道了 a 的角度，通过三角函数公式可以计算出 x，y 的边长，这样就得出了 P 点的坐标啦。

上面的效果就是这样计算的，下面我们来看看代码应该怎么写。

    private void drawCircles(Canvas canvas) {
        for (int i = 0; i < mCircleCount; i++) {
            mPaint.setColor(mColors[i]);
            double diff = mAngleDiff + mPercentAngle * i;
            float x = mCenterX + (float) Math.sin(diff) * mCenterRadius;
            float y = mCenterY - (float) Math.cos(diff) * mCenterRadius;
            canvas.drawCircle(x, y, mSmallCircleRadius, mPaint);
        }
    }

没错，代码就是这么简单就可以计算出 6 个小圆的 x , y 值，接着用 canvas 画出来就形成下面的效果了

image

接下来，要想让它旋转起来的话，需要属性动画进行配合处理每一个小圆所运动时变化的角度差量值，因为每个小圆的差量值都是一样的，这个差量值相当于变化的小圆旋转一周得到的角 a 的一个差量值，拿到这个值就可以配合三角函数公式计算出每一个小圆的 x ，y 坐标了。最后，属性动画所改变的差值，通过重新绘制，就能使小圆旋转起来了。代码如下：

    private void drawCenterCircle(Canvas canvas) {
        if (mValueCirclesAnimator == null) {
            //从 0 变到 2pi 就是每一个小圆所旋转的差量
            mValueCirclesAnimator = ObjectAnimator.ofFloat(0f, 2 * (float) Math.PI);
            mValueCirclesAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mAngleDiff = (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            mValueCirclesAnimator.setRepeatCount(-1);
            mValueCirclesAnimator.setDuration(5000);
            mValueCirclesAnimator.setInterpolator(new LinearInterpolator());
            mValueCirclesAnimator.start();
        }
        drawCircles(canvas);
    }

小圆的旋转效果如下

image

好了，到这一步，我们的小圆就可以顺利的旋转起来了。接下来再去实现汇聚的动画效果，等小圆的旋转动画结束之后呢，每个小圆都会开始汇聚到中心点，下面我们来看一张图。

image

每一条粉红色的线代表着中心位置与小圆的距离，也就是大圆的半径，它们的值都是一样的。要想汇聚到中心的话，那必然要改变大圆的半径，直到半径缩为 0 ，既每一个小圆就重合了。

所以根据上面的分析，我们在旋转动画结束以后，要对大圆的半径进行缩小，并且要重新绘制一下，代码如下：

    private void startConvergeAnimator() {
        if (mConvergeAnimator == null) {
            mConvergeAnimator = ObjectAnimator.ofFloat(mCenterRadius, 0);
            mConvergeAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mCenterRadius = (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            mConvergeAnimator.setDuration(2000);
            mConvergeAnimator.setInterpolator(new AnticipateInterpolator(3f));
            mConvergeAnimator.start();
        }
    }

这个动画的执行是在旋转动画之后开始的，所以要监听旋转动画的结束事件，并且结束时，取消旋转动画，代码如下：

        mRotateAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                mRotateAnimator.cancel();
                //旋转动画结束后，播放汇聚动画
                startConvergeAnimator();
            }
        });

这样就会看到如下的效果：

image

来到这一步，我们就剩下最后一个圆的扩散效果，圆的扩散是从汇聚之后的那个中心点开始的，首先它是一个空心的圆，随着半径慢慢的变大，然后把要显示的内容揭开，视觉效果很强。

在这一步可能会有一点难度，因为你可能会搞混。我们的半径其实是不断的从 0 变到对角线的长度的，这毫无疑意。那么既然是空心的圆，画笔要设置为空心。这样我们就可以反过来这样想：

比如我就绘制一个空心的圆，它的大小固定是对角线的长度，在开始时设置它的画笔宽度为对角线的长度，伴随着半径不断的增大，那么画笔宽度也就随着减小，那就会是一个圆从中间扩散的效果。看下面的草图

image

黄色的线长度，既是我们要设置的画笔宽度，它的值应该是对角线减去半径。代码如下：

    private void drawSpreadCircle(Canvas canvas) {
        mPaint.setColor(mBackGround);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mDiagonal - mSpreadRadius);
        canvas.drawCircle(mCenterX, mCenterY, mDiagonal, mPaint);
    }

然后一个半径变化的属性动画代码

    private void startSpreadAnimator() {
        isSpread = true;
        if (mSpreadAnimator == null) {
            mSpreadAnimator = ObjectAnimator.ofFloat(0, mDiagonal);
            mSpreadAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mSpreadRadius = (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            mSpreadAnimator.setDuration(5000);
            mSpreadAnimator.start();
        }
    }

哈哈，最后的一步，我们就实现了这样的效果了。

image

最后放出大招，本文效果的最终全部代码：

package nd.no.xww.qqmessagedragview;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AnticipateInterpolator;
import android.view.animation.LinearInterpolator;

/**
 * @author xww
 * @desciption : 一个炫酷的加载动画集合效果
 * @date 2019/8/3
 * @time 17:20
 * 博主：威威喵
 * 博客：https://blog.csdn.net/smile_Running
 */
public class LoaderAnimationView extends View {

    private Paint mPaint;

    private int mWidth;
    private int mHeight;

    private float mCenterRadius;
    private int mCenterX;
    private int mCenterY;

    private float mSmallCircleRadius;

    private int mCircleCount;
    //角度差
    private float mAngleDiff = 0F;
    //每一份圆的角度占比
    private double mPercentAngle;

    //扩散半径
    private float mSpreadRadius;
    //屏幕对角线
    private float mDiagonal;

    // 旋转动画
    private ValueAnimator mRotateAnimator;
    // 汇聚动画
    private ValueAnimator mConvergeAnimator;
    // 圆的扩散动画
    private ValueAnimator mSpreadAnimator;

    private boolean isSpread = false;

    private int mBackGround;

    //6种颜色，绘制6个不同颜色的小圆
    private int[] mColors = new int[]{
            getResources().getColor(android.R.color.holo_red_dark),
            getResources().getColor(android.R.color.holo_orange_dark),
            getResources().getColor(android.R.color.holo_blue_dark),
            getResources().getColor(android.R.color.holo_green_dark),
            getResources().getColor(android.R.color.holo_purple),
            getResources().getColor(android.R.color.darker_gray)
    };

    private void init() {
        mPaint = new Paint();
        mPaint.setDither(true);
        mPaint.setAntiAlias(true);

        mBackGround = Color.parseColor("#ffffff");

        mCircleCount = mColors.length;
        //计算每一个小圆对应的角度
        mPercentAngle = 2 * Math.PI / mCircleCount;

        mWidth = getResources().getDisplayMetrics().widthPixels;
        mHeight = getResources().getDisplayMetrics().heightPixels - mWidth / 4;
        mCenterRadius = mWidth / 4;
        mSmallCircleRadius = mCenterRadius / 8;
        mCenterX = mWidth / 2;
        mCenterY = mHeight / 2;

        mDiagonal = (float) Math.sqrt(Math.pow(mCenterX, 2) + Math.pow(mCenterY, 2));
    }

    public LoaderAnimationView(Context context) {
        this(context, null);
    }

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

    public LoaderAnimationView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //开始旋转动画
        startRotateAnimator();
        if (!isSpread) {
            canvas.drawColor(mBackGround);
            drawCircles(canvas);
        } else {
            drawSpreadCircle(canvas);
        }
    }

    private void startRotateAnimator() {
        //从 0 变到 2pi 就是每一个小圆所旋转的差量
        if (mRotateAnimator == null) {
            mRotateAnimator = ObjectAnimator.ofFloat(0, 2 * (float) Math.PI);
            mRotateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mAngleDiff = (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            mRotateAnimator.setDuration(3000);
            mRotateAnimator.setInterpolator(new LinearInterpolator());
            mRotateAnimator.start();

            //监听动画结束事件
            mRotateAnimator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    mRotateAnimator.cancel();
                    //旋转动画结束后，播放汇聚动画
                    startConvergeAnimator();
                }
            });
        }
    }

    private void startConvergeAnimator() {
        if (mConvergeAnimator == null) {
            mConvergeAnimator = ObjectAnimator.ofFloat(mCenterRadius, 0);
            mConvergeAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mCenterRadius = (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            mConvergeAnimator.setDuration(2000);
            mConvergeAnimator.setInterpolator(new AnticipateInterpolator(3f));
            mConvergeAnimator.start();

            mConvergeAnimator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    mConvergeAnimator.cancel();
                    //开始扩散动画
                    startSpreadAnimator();
                }
            });
        }
    }

    private void startSpreadAnimator() {
        isSpread = true;
        if (mSpreadAnimator == null) {
            mSpreadAnimator = ObjectAnimator.ofFloat(0, mDiagonal);
            mSpreadAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mSpreadRadius = (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            mSpreadAnimator.setDuration(5000);
            mSpreadAnimator.start();
        }
    }

    private void drawCircles(Canvas canvas) {
        for (int i = 0; i < mCircleCount; i++) {
            mPaint.setColor(mColors[i]);
            double diff = mAngleDiff + mPercentAngle * i;
            float x = mCenterX + (float) Math.sin(diff) * mCenterRadius;
            float y = mCenterY - (float) Math.cos(diff) * mCenterRadius;
            canvas.drawCircle(x, y, mSmallCircleRadius, mPaint);
        }
    }

    private void drawSpreadCircle(Canvas canvas) {
        mPaint.setColor(mBackGround);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mDiagonal - mSpreadRadius);
        canvas.drawCircle(mCenterX, mCenterY, mDiagonal, mPaint);
    }

}

怎么样，效果很不错吧，特地把图片换成了我的博客的头像，好喜欢这只小猫咪，一只敲可爱的小猫咪，awsl，哇，就这样吧，结束。

自定义 View 之雅虎新闻视差动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android 自定义 View