絢麗風車loading動效分析與實現！

時間 2019-11-06

標籤絢麗風車 loading 分析實現简体版

原文原文鏈接

前兩天咱們這邊的頭兒給我說，有個 gif 動效很不錯，能夠考慮用來作項目裏的loading，問我能不能實現，看了下效果確實不錯，也還比較有新意，複雜度也不是很是高，因此就花時間給作了，咱們先一塊兒看下原gif圖效果：
javascript

若是你想看 GAStudio Github主頁，請戳這裏；
若是你想看 GAStudio更多技術文章，請戳這裏；
QQ技術交流羣：277582728；
github地址: github.com/Ajian-studi…java

從效果上看，咱們須要考慮如下幾個問題：git

1.葉子的隨機產生；
2.葉子隨着一條正餘弦曲線移動；
3.葉子在移動的時候旋轉，旋轉方向隨機，正時針或逆時針；
4.葉子遇到進度條，彷佛是融合進入；
5.葉子不能超出最左邊的弧角；
7.葉子飄出時的角度不是一致，走的曲線的振幅也有差異，不然太有規律性，缺少美感；github

總的看起來，須要注意和麻煩的地方主要是以上幾點，固然還有一些細節問題，好比最左邊是圓弧等等；編程

那接下來咱們將效果進行分解，而後逐個擊破：
整個效果來講，咱們須要的圖主要是飛動的小葉子和右邊旋轉的風扇，其餘的部分均可以用色值進行繪製，固然咱們爲了方便，就連底部框一塊兒切了；canvas

先從gif 圖裏把飛動的小葉子和右邊旋轉的風扇、底部框摳出來，小葉子圖以下：dom

咱們須要處理的主要有兩個部分：

1.隨着進度往前繪製的進度條；
2.不斷飛出來的小葉片；函數

1.隨着進度往前繪製的進度條:

進度條的位置根據外層傳入的 progress 進行計算，能夠分爲圖中一、二、3 三個階段：
post

1.當progress 較小，算出的當前距離還在弧形之內時，須要繪製如圖所示 1 區域的弧形，其他部分用白色填充；
2.當 progress 算出的距離到2時，須要繪製棕色半圓弧形，其他部分用白色矩形填充；
3.當 progress 算出的距離到3 時，須要繪製棕色半圓弧形，棕色矩形，白色矩形；
4.當 progress 算出的距離到頭時，須要繪製棕色半圓弧形，棕色矩形；（能夠合併到3中）ui

首先根據進度條的寬度和當前進度、總進度算出當前的位置：

//mProgressWidth爲進度條的寬度，根據當前進度算出進度條的位置
    mCurrentProgressPosition = mProgressWidth * mProgress / TOTAL_PROGRESS;複製代碼

而後按照上面的邏輯進行繪製，其中須要計算上圖中的紅色弧角角度，計算方法以下：

// 單邊角度
    int angle = (int) Math.toDegrees(Math.acos((mArcRadius - mCurrentProgressPosition)/ (float) mArcRadius));複製代碼

Math.acos() －反餘弦函數；
Math.toDegrees() －弧度轉化爲角度，Math.toRadians 角度轉化爲弧度
因此圓弧的起始點爲：

int startAngle = 180 - angle;複製代碼

圓弧劃過的角度爲：

2 * angle複製代碼

這一塊的代碼以下：

// mProgressWidth爲進度條的寬度，根據當前進度算出進度條的位置
        mCurrentProgressPosition = mProgressWidth * mProgress / TOTAL_PROGRESS;
        // 即當前位置在圖中所示1範圍內
        if (mCurrentProgressPosition < mArcRadius) {
            Log.i(TAG, "mProgress = " + mProgress + "---mCurrentProgressPosition = "
                    + mCurrentProgressPosition
                    + "--mArcProgressWidth" + mArcRadius);
            // 1.繪製白色ARC，繪製orange ARC
            // 2.繪製白色矩形

            // 1.繪製白色ARC
            canvas.drawArc(mArcRectF, 90, 180, false, mWhitePaint);

            // 2.繪製白色矩形
            mWhiteRectF.left = mArcRightLocation;
            canvas.drawRect(mWhiteRectF, mWhitePaint);

            // 3.繪製棕色 ARC
            // 單邊角度
            int angle = (int) Math.toDegrees(Math.acos((mArcRadius - mCurrentProgressPosition)
                    / (float) mArcRadius));
            // 起始的位置
            int startAngle = 180 - angle;
            // 掃過的角度
            int sweepAngle = 2 * angle;
            Log.i(TAG, "startAngle = " + startAngle);
            canvas.drawArc(mArcRectF, startAngle, sweepAngle, false, mOrangePaint);
        } else {
            Log.i(TAG, "mProgress = " + mProgress + "---transfer-----mCurrentProgressPosition = "
                    + mCurrentProgressPosition
                    + "--mArcProgressWidth" + mArcRadius);
            // 1.繪製white RECT
            // 2.繪製Orange ARC
            // 3.繪製orange RECT

            // 1.繪製white RECT
            mWhiteRectF.left = mCurrentProgressPosition;
            canvas.drawRect(mWhiteRectF, mWhitePaint);

            // 2.繪製Orange ARC
            canvas.drawArc(mArcRectF, 90, 180, false, mOrangePaint);
            // 3.繪製orange RECT
            mOrangeRectF.left = mArcRightLocation;
            mOrangeRectF.right = mCurrentProgressPosition;
            canvas.drawRect(mOrangeRectF, mOrangePaint);

        }複製代碼

2.不斷飛出來的小葉片:

首先根據效果狀況基本肯定出曲線函數，標準函數方程爲：y = A(wx+Q)+h，其中w影響週期，A影響振幅，週期T＝ 2 Math.PI/w;
根據效果能夠看出，週期大體爲總進度長度，因此肯定w＝(float) ((float) 2 Math.PI /mProgressWidth)；

仔細觀察效果，咱們能夠發現，葉子飄動的過程當中振幅不是徹底一致的，產生一種錯落的效果，既然如此，咱們給葉子定義一個Type，根據Type 肯定不一樣的振幅；
咱們建立一個葉子對象：

private class Leaf {

        // 在繪製部分的位置
        float x, y;
        // 控制葉子飄動的幅度
        StartType type;
        // 旋轉角度
        int rotateAngle;
        // 旋轉方向--0表明順時針，1表明逆時針
        int rotateDirection;
        // 起始時間(ms)
        long startTime;
    }複製代碼

類型採用枚舉進行定義，其實就是用來區分不一樣的振幅：

private enum StartType {
        LITTLE, MIDDLE, BIG
    }複製代碼

建立一個LeafFactory類用於建立一個或多個葉子信息：

private class LeafFactory {
        private static final int MAX_LEAFS = 6;
        Random random = new Random();

        // 生成一個葉子信息
        public Leaf generateLeaf() {
            Leaf leaf = new Leaf();
            int randomType = random.nextInt(3);
            // 隨時類型－ 隨機振幅
            StartType type = StartType.MIDDLE;
            switch (randomType) {
                case 0:
                    break;
                case 1:
                    type = StartType.LITTLE;
                    break;
                case 2:
                    type = StartType.BIG;
                    break;
                default:
                    break;
            }
            leaf.type = type;
            // 隨機起始的旋轉角度
            leaf.rotateAngle = random.nextInt(360);
            // 隨機旋轉方向（順時針或逆時針）
            leaf.rotateDirection = random.nextInt(2);
            // 爲了產生交錯的感受，讓開始的時間有必定的隨機性
            mAddTime += random.nextInt((int) (LEAF_FLOAT_TIME * 1.5));
            leaf.startTime = System.currentTimeMillis() + mAddTime;
            return leaf;
        }

        // 根據最大葉子數產生葉子信息
        public List<Leaf> generateLeafs() {
            return generateLeafs(MAX_LEAFS);
        }

        // 根據傳入的葉子數量產生葉子信息
        public List<Leaf> generateLeafs(int leafSize) {
            List<Leaf> leafs = new LinkedList<Leaf>();
            for (int i = 0; i < leafSize; i++) {
                leafs.add(generateLeaf());
            }
            return leafs;
        }
    }複製代碼

定義兩個常量分別記錄中等振幅和之間的振幅差：

// 中等振幅大小
    private static final int MIDDLE_AMPLITUDE = 13;
    // 不一樣類型之間的振幅差距
    private static final int AMPLITUDE_DISPARITY = 5;
    // 中等振幅大小
    private int mMiddleAmplitude = MIDDLE_AMPLITUDE;
    // 振幅差
    private int mAmplitudeDisparity = AMPLITUDE_DISPARITY;複製代碼

有了以上信息，咱們則能夠獲取到葉子的Y值：

// 經過葉子信息獲取當前葉子的Y值
    private int getLocationY(Leaf leaf) {
        // y = A(wx+Q)+h
        float w = (float) ((float) 2 * Math.PI / mProgressWidth);
        float a = mMiddleAmplitude;
        switch (leaf.type) {
            case LITTLE:
                // 小振幅 ＝ 中等振幅 － 振幅差
                a = mMiddleAmplitude - mAmplitudeDisparity;
                break;
            case MIDDLE:
                a = mMiddleAmplitude;
                break;
            case BIG:
                // 小振幅 ＝ 中等振幅 + 振幅差
                a = mMiddleAmplitude + mAmplitudeDisparity;
                break;
            default:
                break;
        }
        Log.i(TAG, "---a = " + a + "---w = " + w + "--leaf.x = " + leaf.x);
        return (int) (a * Math.sin(w * leaf.x)) + mArcRadius * 2 / 3;
    }複製代碼

接下來，咱們開始繪製葉子：

/** * 繪製葉子 * * @param canvas */
    private void drawLeafs(Canvas canvas) {
        long currentTime = System.currentTimeMillis();
        for (int i = 0; i < mLeafInfos.size(); i++) {
            Leaf leaf = mLeafInfos.get(i);
            if (currentTime > leaf.startTime && leaf.startTime != 0) {
                // 繪製葉子－－根據葉子的類型和當前時間得出葉子的（x，y）
                getLeafLocation(leaf, currentTime);
                // 根據時間計算旋轉角度
                canvas.save();
                // 經過Matrix控制葉子旋轉
                Matrix matrix = new Matrix();
                float transX = mLeftMargin + leaf.x;
                float transY = mLeftMargin + leaf.y;
                Log.i(TAG, "left.x = " + leaf.x + "--leaf.y=" + leaf.y);
                matrix.postTranslate(transX, transY);
                // 經過時間關聯旋轉角度，則能夠直接經過修改LEAF_ROTATE_TIME調節葉子旋轉快慢
                float rotateFraction = ((currentTime - leaf.startTime) % LEAF_ROTATE_TIME)
                        / (float) LEAF_ROTATE_TIME;
                int angle = (int) (rotateFraction * 360);
                // 根據葉子旋轉方向肯定葉子旋轉角度
                int rotate = leaf.rotateDirection == 0 ? angle + leaf.rotateAngle : -angle
                        + leaf.rotateAngle;
                matrix.postRotate(rotate, transX
                        + mLeafWidth / 2, transY + mLeafHeight / 2);
                canvas.drawBitmap(mLeafBitmap, matrix, mBitmapPaint);
                canvas.restore();
            } else {
                continue;
            }
        }
    }複製代碼

最後，向外層暴露幾個接口：

/** * 設置中等振幅 * * @param amplitude */
    public void setMiddleAmplitude(int amplitude) {
        this.mMiddleAmplitude = amplitude;
    }

    /** * 設置振幅差 * * @param disparity */
    public void setMplitudeDisparity(int disparity) {
        this.mAmplitudeDisparity = disparity;
    }

    /** * 獲取中等振幅 * * @param amplitude */
    public int getMiddleAmplitude() {
        return mMiddleAmplitude;
    }

    /** * 獲取振幅差 * * @param disparity */
    public int getMplitudeDisparity() {
        return mAmplitudeDisparity;
    }

    /** * 設置進度 * * @param progress */
    public void setProgress(int progress) {
        this.mProgress = progress;
        postInvalidate();
    }

    /** * 設置葉子飄完一個週期所花的時間 * * @param time */
    public void setLeafFloatTime(long time) {
        this.mLeafFloatTime = time;
    }

    /** * 設置葉子旋轉一週所花的時間 * * @param time */
    public void setLeafRotateTime(long time) {
        this.mLeafRotateTime = time;複製代碼

這些接口用來幹嗎呢？用於把咱們的動效作成徹底可手動調節的，這樣作有什麼好處呢？

1.更加便於產品、射雞溼查看效果，避免YY，本身手動調節，不會出現要你一遍遍的改參數安裝、查看、再改、再查看... ... N遍以後說「這好像不是我想要的」 -- 瞬間天崩地裂，天昏地暗，感受被全世界拋棄；
2.便於體現你是一個考慮全面，思惟縝密，會編程、會設計的藝術家，固然這純屬YY，主要仍是方便你們；

如此一來，射雞溼們只須要不斷的調節便可實時的看到展示的效果，最後只須要把最終的參數反饋過來便可，萬事大吉，一了百了；

固然，若是對方是個漂亮的妹子，而你又苦於沒有機會搭訕，以上內容就當我沒說，盡情的不按要求寫吧，她確定會主動找你的，說不定連飯都反過來請了... ...

最終效果以下，原本錄了20+s，可是PS只能轉5s，因此有興趣的你們本身運行的玩吧：