歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

Android動效篇:一個絢麗的Loading動效分析與實現

前兩天我們這邊的頭兒給我說,有個 gif 動效很不錯,可以考慮用來做項目裡的Loading,問我能不能實現,看了下效果確實不錯,也還比較有新意,復雜度也不是非常高,所以就花時間給做了,我們先一起看下原gif圖效果:

本文源碼下載地址

百度網盤下載: http://pan.baidu.com/s/1sjP0hCL

------------------------------------------分割線------------------------------------------

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2015年資料/8月/20日/Android動效篇:一個絢麗的Loading動效分析與實現/

下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm

------------------------------------------分割線------------------------------------------

從效果上看,我們需要考慮以下幾個問題:

1.葉子的隨機產生;

2.葉子隨著一條正余弦曲線移動;

3.葉子在移動的時候旋轉,旋轉方向隨機,正時針或逆時針;

4.葉子遇到進度條,似乎是融合進入;

5.葉子不能超出最左邊的弧角;

7.葉子飄出時的角度不是一致,走的曲線的振幅也有差別,否則太有規律性,缺乏美感;

總的看起來,需要注意和麻煩的地方主要是以上幾點,當然還有一些細節問題,比如最左邊是圓弧等等;

那接下來我們將效果進行分解,然後逐個擊破:

整個效果來說,我們需要的圖主要是飛動的小葉子和右邊旋轉的風扇,其他的部分都可以用色值進行繪制,當然我們為了方便,就連底部框一起切了;

先從gif 圖裡把飛動的小葉子和右邊旋轉的風扇、底部框摳出來,小葉子圖如下:

我們需要處理的主要有兩個部分:

1. 隨著進度往前繪制的進度條;

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

我們先處理第一部分 - 隨著進度往前繪制的進度條:

進度條的位置根據外層傳入的 progress 進行計算,可以分為圖中 1、2、3 三個階段:

1. 當progress 較小,算出的當前距離還在弧形以內時,需要繪制如圖所示 1 區域的弧形,其余部分用白色填充;

2. 當 progress 算出的距離到2時,需要繪制棕色半圓弧形,其余部分用白色矩形填充;

3. 當 progress 算出的距離到3 時,需要繪制棕色半圓弧形,棕色矩形,白色矩形;

4. 當 progress 算出的距離到頭時,需要繪制棕色半圓弧形,棕色矩形;(可以合並到3中)

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

        //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);

        }

接下來再來看葉子部分:

首先根據效果情況基本確定出 曲線函數,標准函數方程為: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,主要還是方便大家;

如此一來,射雞濕們只需要不斷的調節即可實時的看到展現的效果,最後只需要把最終的參數反饋過來即可,萬事大吉,一了百了;

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

更多詳情見請繼續閱讀下一頁的精彩內容: http://www.linuxidc.com/Linux/2015-08/121991p2.htm

Copyright © Linux教程網 All Rights Reserved