自定義 View 之雅虎新聞視差動畫

博主聲明：

轉載請在開頭附加本文鏈接及作者信息，並標記爲轉載。本文由博主威威喵原創，請多支持與指教。

本文首發於此博主：威威喵 | 博客主頁：https://blog.csdn.net/smile_running

今天在手機上看到這樣的一種加載效果，看起來還挺炫酷的，好幾個小圓轉啊轉，顏色還不同，轉完了之後消失了，然後內容就加載出來了。用語言描述大概就是這樣了，我們直接看效果吧。

看到這個效果的時候，我的腦殼裏面就在想，這個圓它要怎麼轉起來呢，繪製一週的圓倒是比較簡單，但是要讓它轉起來，肯定是座標值發生的改變，那究竟如何做出相應的改變呢，我們接下來一步一步分析和實現該效果。

首先，看到這個效果的時候，我們能做的第一步，就是把外面這 6 個小圓給繪製出來，多的不說，我們先繪製固定的 6 個小圓就好了，如何動起來再考慮。

要想繪製這 6 個靜態的小圓，其實並不難。小圓的軌跡其實就是一個圓的圓弧吧，那麼這個軌跡所圍成的必定是一個大圓，所以呢，我們先將裏面這個大圓給繪製出來。

接着考慮小圓的繪製，既然我們已經把大圓繪製出來了，肯定直到大圓的圓心和半徑了，那麼每一個小圓就是根據不同的角度繪製不同的位置了，那麼 6 個小圓平均一下，每個之間的間隔就是 60° 的差值。好吧，之間來看下面我畫的草圖就一目瞭然了

根據上面我畫的那張圖，我們看到大圓一週共有 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 畫出來就形成下面的效果了

接下來，要想讓它旋轉起來的話，需要屬性動畫進行配合處理每一個小圓所運動時變化的角度差量值，因爲每個小圓的差量值都是一樣的，這個差量值相當於變化的小圓旋轉一週得到的角 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);
    }

小圓的旋轉效果如下

好了，到這一步，我們的小圓就可以順利的旋轉起來了。接下來再去實現匯聚的動畫效果，等小圓的旋轉動畫結束之後呢，每個小圓都會開始匯聚到中心點，下面我們來看一張圖。

每一條粉紅色的線代表着中心位置與小圓的距離，也就是大圓的半徑，它們的值都是一樣的。要想匯聚到中心的話，那必然要改變大圓的半徑，直到半徑縮爲 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();
            }
        });

這樣就會看到如下的效果：

來到這一步，我們就剩下最後一個圓的擴散效果，圓的擴散是從匯聚之後的那個中心點開始的，首先它是一個空心的圓，隨着半徑慢慢的變大，然後把要顯示的內容揭開，視覺效果很強。

在這一步可能會有一點難度，因爲你可能會搞混。我們的半徑其實是不斷的從 0 變到對角線的長度的，這毫無疑意。那麼既然是空心的圓，畫筆要設置爲空心。這樣我們就可以反過來這樣想：

比如我就繪製一個空心的圓，它的大小固定是對角線的長度，在開始時設置它的畫筆寬度爲對角線的長度，伴隨着半徑不斷的增大，那麼畫筆寬度也就隨着減小，那就會是一個圓從中間擴散的效果。看下面的草圖

黃色的線長度，既是我們要設置的畫筆寬度，它的值應該是對角線減去半徑。代碼如下：

    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();
        }
    }

哈哈，最後的一步，我們就實現了這樣的效果了。

最後放出大招，本文效果的最終全部代碼：

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 之雅虎新聞視差動畫

自定義 View 之雅虎新聞視差動畫

Android 短信驗證 SDK 接入（Mob SMSSDK）

Android MVP（五）多個 Presenter 依賴注入

一種簡單快速的方式實現 Android App 的夜間模式

RecyclerView 之 findFirstVisibleItemPosition 和 findLastVisibleItemPosition 踩坑

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結