Android開源：想送你一款小清新的載入等待控制元件

Carson_Ho發表於2018-02-05

Android控制元件

前言

Android開發中，載入等待的需求 非常常見
本文將手把手教你做 一款可愛 & 小資風格的載入等待Android自定義View控制元件，希望你們會喜歡。

已在Github開源：Kawaii_LoadingView，歡迎 Star ！

1. 簡介

一款可愛、清新 & 小資風格的 Android自定義View控制元件

已在Github開源：Kawaii_LoadingView，歡迎 Star ！

2. 應用場景

App 長時間載入等待時，用於提示使用者進度 & 緩解使用者情緒

3. 特點

對比市面上的載入等待自定義控制元件，該控制元件Kawaii_LoadingView 的特點是：

3.1 樣式清新

對比市面上各種酷炫、眼花繚亂的載入等待自定義控制元件，該款 Kawaii_LoadingView 的 清新 & 小資風格 簡直是一股清流
同時，可根據您的App定位 & 主色進行顏色調整，使得控制元件更加符合App的形象。具體如下：

3.2 使用簡單

僅需要3步驟 & 配置簡單。

具體請看文章：Android開源控制元件：一款你不可錯過的可愛 & 小資風格的載入等待自定義View

3.3 二次開發成本低

本專案已在 Github上開源：Kawaii_LoadingView
詳細的原始碼分析文件：具體請看本文的第6節

所以，在其上做二次開發 & 定製化成本非常低。

4. 具體使用

具體請看文章：Android開源控制元件：一款你不可錯過的可愛 & 小資風格的載入等待自定義View

5. 完整Demo地址

Carson_Ho的Github地址：Kawaii_LoadingView_TestDemo

6. 原始碼分析

下面，我將手把手教你如何實現這款 可愛 & 小資風格的載入等待Android自定義View控制元件

6.1 準備說明

方格排列說明

方塊型別說明

6.2 動畫原理

隱藏固定的2個方塊 & 移動方塊繼承其中1個的位置

注：只有外部方塊運動

通過 屬性動畫 （平移 + 旋轉 = 組合動畫）改變移動方塊的位置 & 旋轉角度
通過呼叫 invalidate() 重新繪製，從而實現動態的動畫效果
具體原理圖如下：

6.3 實現步驟

下面我將詳細介紹每個步驟：

步驟1：初始化動畫屬性

屬性說明：

具體屬性設定

新增屬性檔案

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Kawaii_LoadingView">
        <attr name="half_BlockWidth" format="dimension" />
        <attr name="blockInterval" format="dimension" />
        <attr name="initPosition" format="integer" />
        <attr name="isClock_Wise" format="boolean" />
        <attr name="lineNumber" format="integer"  />
        <attr name="moveSpeed" format="integer"  />
        <attr name="blockColor" format="color"  />
        <attr name="moveBlock_Angle" format="float"  />
        <attr name="fixBlock_Angle" format="float"  />
        <attr name="move_Interpolator" format="reference"  />
    </declare-styleable>
</resources>
複製程式碼

具體原始碼分析

    private void initAttrs(Context context, AttributeSet attrs) {

        // 控制元件資源名稱
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Kawaii_LoadingView);

        // 一行的數量(最少3行)
        lineNumber = typedArray.getInteger(R.styleable.Kawaii_LoadingView_lineNumber, 3);
        if (lineNumber < 3) {
            lineNumber = 3;
        }

        // 半個方塊的寬度（dp）
        half_BlockWidth = typedArray.getDimension(R.styleable.Kawaii_LoadingView_half_BlockWidth, 30);
        // 方塊間隔寬度（dp）
        blockInterval = typedArray.getDimension(R.styleable.Kawaii_LoadingView_blockInterval, 10);

        // 移動方塊的圓角半徑
        moveBlock_Angle = typedArray.getFloat(R.styleable.Kawaii_LoadingView_moveBlock_Angle, 10);
        // 固定方塊的圓角半徑
        fixBlock_Angle = typedArray.getFloat(R.styleable.Kawaii_LoadingView_fixBlock_Angle, 30);
        // 通過設定兩個方塊的圓角半徑使得二者不同可以得到更好的動畫效果哦

        // 方塊顏色（使用十六進位制程式碼，如#333、#8e8e8e）
        int defaultColor = context.getResources().getColor(R.color.colorAccent); // 預設顏色
        blockColor = typedArray.getColor(R.styleable.Kawaii_LoadingView_blockColor, defaultColor);

        // 移動方塊的初始位置（即空白位置）
        initPosition = typedArray.getInteger(R.styleable.Kawaii_LoadingView_initPosition, 0);

        // 由於移動方塊只能是外部方塊，所以這裡需要判斷方塊是否屬於外部方塊 -->關注1
        if (isInsideTheRect(initPosition, lineNumber)) {
            initPosition = 0;
        }
        // 動畫方向是否 = 順時針旋轉
        isClock_Wise = typedArray.getBoolean(R.styleable.Kawaii_LoadingView_isClock_Wise, true);

        // 移動方塊的移動速度
        // 注：不建議使用者將速度調得過快
        // 因為會導致ValueAnimator動畫物件頻繁重複的建立，存在記憶體抖動
        moveSpeed = typedArray.getInteger(R.styleable.Kawaii_LoadingView_moveSpeed, 250);

        // 設定移動方塊動畫的插值器
        int move_InterpolatorResId = typedArray.getResourceId(R.styleable.Kawaii_LoadingView_move_Interpolator,
                android.R.anim.linear_interpolator);
        move_Interpolator = AnimationUtils.loadInterpolator(context, move_InterpolatorResId);

        // 當方塊移動後，需要實時更新的空白方塊的位置
        mCurrEmptyPosition = initPosition;

        // 釋放資源
        typedArray.recycle();
    }

// 此步驟結束


    /**
     * 關注1：判斷方塊是否在內部
     */

    private boolean isInsideTheRect(int pos, int lineCount) {
        // 判斷方塊是否在第1行
        if (pos < lineCount) {
            return false;
            // 是否在最後1行
        } else if (pos > (lineCount * lineCount - 1 - lineCount)) {
            return false;
            // 是否在最後1行
        } else if ((pos + 1) % lineCount == 0) {
            return false;
            // 是否在第1行
        } else if (pos % lineCount == 0) {
            return false;
        }
        // 若不在4邊，則在內部
        return true;
    }
    // 回到原處
複製程式碼

步驟2：初始化方塊物件 & 之間的關係

    private void init() {
        // 初始化畫筆
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(blockColor);

        // 初始化方塊物件 & 關係 ->>關注1
        initBlocks(initPosition);

    }

    /**
     * 關注1
     * 初始化方塊物件、之間的關係
     * 引數說明：initPosition = 移動方塊的初始位置
     */
    private void initBlocks(int initPosition) {

        // 1. 建立總方塊的數量（固定方塊） = lineNumber * lineNumber
        // lineNumber = 方塊的行數
        // fixedBlock = 固定方塊 類 ->>關注2
        mfixedBlocks = new fixedBlock[lineNumber * lineNumber];

        // 2. 建立方塊
        for (int i = 0; i < mfixedBlocks.length; i++) {

            // 建立固定方塊 & 儲存到陣列中
            mfixedBlocks[i] = new fixedBlock();

            // 對固定方塊物件裡的變數進行賦值
            mfixedBlocks[i].index = i;
            // 對方塊是否顯示進行判斷
            // 若該方塊的位置 = 移動方塊的初始位置，則隱藏；否則顯示
            mfixedBlocks[i].isShow = initPosition == i ? false : true;
            mfixedBlocks[i].rectF = new RectF();
        }

        // 3. 建立移動的方塊（1個） ->>關注3
        mMoveBlock = new MoveBlock();
        mMoveBlock.rectF = new RectF();
        mMoveBlock.isShow = false;

        // 4. 關聯外部方塊的位置
        // 因為外部的方塊序號 ≠ 0、1、2…排列，通過 next變數（指定其下一個），一個接一個連線 外部方塊 成圈
        // ->>關注4
        relate_OuterBlock(mfixedBlocks, isClock_Wise);

    }
    // 此步驟結束

    /**
     * 關注2：固定方塊 類（內部類）
     */
    private class fixedBlock {

        // 儲存方塊的座標位置引數
        RectF rectF;

        // 方塊對應序號
        int index;

        // 標誌位：判斷是否需要繪製
        boolean isShow;

        // 指向下一個需要移動的位置
        fixedBlock next;
        // 外部的方塊序號 ≠ 0、1、2…排列，通過 next變數（指定其下一個），一個接一個連線 外部方塊 成圈

    }
    // 請回到原處

    /**
     * 關注3
     *：移動方塊類（內部類）
     */
    private class MoveBlock {
        // 儲存方塊的座標位置引數
        RectF rectF;

        // 方塊對應序號
        int index;

        // 標誌位：判斷是否需要繪製
        boolean isShow;

        // 旋轉中心座標
        // 移動時的旋轉中心（X，Y）
        float cx;
        float cy;
    }
    // 請回到原處



    /**
     * 關注4：將外部方塊的位置關聯起來
     * 演算法思想： 按照第1行、最後1行、第1列 & 最後1列的順序，分別讓每個外部方塊的next屬性 == 下一個外部方塊的位置，最終對整個外部方塊的位置進行關聯
     *  注：需要考慮移動方向變數isClockwise（ 順 Or 逆時針）
     */

    private void relate_OuterBlock(fixedBlock[] fixedBlocks, boolean isClockwise) {
        int lineCount = (int) Math.sqrt(fixedBlocks.length);

        // 情況1：關聯第1行
        for (int i = 0; i < lineCount; i++) {
            // 位於最左邊
            if (i % lineCount == 0) {
                fixedBlocks[i].next = isClockwise ? fixedBlocks[i + lineCount] : fixedBlocks[i + 1];
                // 位於最右邊
            } else if ((i + 1) % lineCount == 0) {
                fixedBlocks[i].next = isClockwise ? fixedBlocks[i - 1] : fixedBlocks[i + lineCount];
                // 中間
            } else {
                fixedBlocks[i].next = isClockwise ? fixedBlocks[i - 1] : fixedBlocks[i + 1];
            }
        }
        // 情況2：關聯最後1行
        for (int i = (lineCount - 1) * lineCount; i < lineCount * lineCount; i++) {
            // 位於最左邊
            if (i % lineCount == 0) {
                fixedBlocks[i].next = isClockwise ? fixedBlocks[i + 1] : fixedBlocks[i - lineCount];
                // 位於最右邊
            } else if ((i + 1) % lineCount == 0) {
                fixedBlocks[i].next = isClockwise ? fixedBlocks[i - lineCount] : fixedBlocks[i - 1];
                // 中間
            } else {
                fixedBlocks[i].next = isClockwise ? fixedBlocks[i + 1] : fixedBlocks[i - 1];
            }
        }

        // 情況3：關聯第1列
        for (int i = 1 * lineCount; i <= (lineCount - 1) * lineCount; i += lineCount) {
            // 若是第1列最後1個
            if (i == (lineCount - 1) * lineCount) {
                fixedBlocks[i].next = isClockwise ? fixedBlocks[i + 1] : fixedBlocks[i - lineCount];
                continue;
            }
            fixedBlocks[i].next = isClockwise ? fixedBlocks[i + lineCount] : fixedBlocks[i - lineCount];
        }

        // 情況4：關聯最後1列
        for (int i = 2 * lineCount - 1; i <= lineCount * lineCount - 1; i += lineCount) {
            // 若是最後1列最後1個
            if (i == lineCount * lineCount - 1) {
                fixedBlocks[i].next = isClockwise ? fixedBlocks[i - lineCount] : fixedBlocks[i - 1];
                continue;
            }
            fixedBlocks[i].next = isClockwise ? fixedBlocks[i - lineCount] : fixedBlocks[i + lineCount];
        }
    }
    // 請回到原處
複製程式碼

步驟3：設定方塊初始位置

    // 該步驟寫在onSizeChanged（）
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        // 呼叫時刻：onCreate之後onDraw之前呼叫；view的大小發生改變就會呼叫該方法
        // 使用場景：用於螢幕的大小改變時，需要根據螢幕寬高來決定的其他變數可以在這裡進行初始化操作
        super.onSizeChanged(w, h, oldw, oldh);

        int measuredWidth = getMeasuredWidth();
        int measuredHeight = getMeasuredHeight();

        // 1. 設定移動方塊的旋轉中心座標
        int cx = measuredWidth / 2;
        int cy = measuredHeight / 2;

        // 2. 設定固定方塊的位置 ->>關注1
        fixedBlockPosition(mfixedBlocks, cx, cy, blockInterval, half_BlockWidth);
        // 3. 設定移動方塊的位置 ->>關注2
        MoveBlockPosition(mfixedBlocks, mMoveBlock, initPosition, isClock_Wise);
    }

// 此步驟結束

    /**
     * 關注1：設定 固定方塊位置
     */
    private void fixedBlockPosition(fixedBlock[] fixedBlocks, int cx, int cy, float dividerWidth, float halfSquareWidth) {

        // 1. 確定第1個方塊的位置
        // 分為2種情況：行數 = 偶 / 奇數時
        // 主要是是數學知識，此處不作過多描述
        float squareWidth = halfSquareWidth * 2;
        int lineCount = (int) Math.sqrt(fixedBlocks.length);
        float firstRectLeft = 0;
        float firstRectTop = 0;

        // 情況1：當行數 = 偶數時
        if (lineCount % 2 == 0) {
            int squareCountInAline = lineCount / 2;
            int diviCountInAline = squareCountInAline - 1;
            float firstRectLeftTopFromCenter = squareCountInAline * squareWidth
                    + diviCountInAline * dividerWidth
                    + dividerWidth / 2;
            firstRectLeft = cx - firstRectLeftTopFromCenter;
            firstRectTop = cy - firstRectLeftTopFromCenter;

            // 情況2：當行數 = 奇數時
        } else {
            int squareCountInAline = lineCount / 2;
            int diviCountInAline = squareCountInAline;
            float firstRectLeftTopFromCenter = squareCountInAline * squareWidth
                    + diviCountInAline * dividerWidth
                    + halfSquareWidth;
            firstRectLeft = cx - firstRectLeftTopFromCenter;
            firstRectTop = cy - firstRectLeftTopFromCenter;
            firstRectLeft = cx - firstRectLeftTopFromCenter;
            firstRectTop = cy - firstRectLeftTopFromCenter;
        }

        // 2. 確定剩下的方塊位置
        // 思想：把第一行方塊位置往下移動即可
        // 通過for迴圈確定：第一個for迴圈 = 行，第二個 = 列
        for (int i = 0; i < lineCount; i++) {//行
            for (int j = 0; j < lineCount; j++) {//列
                if (i == 0) {
                    if (j == 0) {
                        fixedBlocks[0].rectF.set(firstRectLeft, firstRectTop,
                                firstRectLeft + squareWidth, firstRectTop + squareWidth);
                    } else {
                        int currIndex = i * lineCount + j;
                        fixedBlocks[currIndex].rectF.set(fixedBlocks[currIndex - 1].rectF);
                        fixedBlocks[currIndex].rectF.offset(dividerWidth + squareWidth, 0);
                    }
                } else {
                    int currIndex = i * lineCount + j;
                    fixedBlocks[currIndex].rectF.set(fixedBlocks[currIndex - lineCount].rectF);
                    fixedBlocks[currIndex].rectF.offset(0, dividerWidth + squareWidth);
                }
            }
        }
    }

// 回到原處

    /**
     * 關注2：設定移動方塊的位置
     */
    private void MoveBlockPosition(fixedBlock[] fixedBlocks,
                                   MoveBlock moveBlock, int initPosition, boolean isClockwise) {

        // 移動方塊位置 = 設定初始的空出位置 的下一個位置（next）
        // 下一個位置 通過 連線的外部方塊位置確定
        fixedBlock fixedBlock = fixedBlocks[initPosition];
        moveBlock.rectF.set(fixedBlock.next.rectF);
    }
// 回到原處
複製程式碼

步驟4：繪製方塊

    // 此步驟寫到onDraw（）中
    @Override
    protected void onDraw(Canvas canvas) {

        // 1. 繪製內部方塊（固定的）
        for (int i = 0; i < mfixedBlocks.length; i++) {
            // 根據標誌位判斷是否需要繪製
            if (mfixedBlocks[i].isShow) {
                // 傳入方塊位置引數、圓角 & 畫筆屬性
                canvas.drawRoundRect(mfixedBlocks[i].rectF, fixBlock_Angle, fixBlock_Angle, mPaint);
            }
        }
        // 2. 繪製移動的方塊
        if (mMoveBlock.isShow) {
            canvas.rotate(isClock_Wise ? mRotateDegree : -mRotateDegree, mMoveBlock.cx, mMoveBlock.cy);
            canvas.drawRoundRect(mMoveBlock.rectF, moveBlock_Angle, moveBlock_Angle, mPaint);
        }

    }
複製程式碼

步驟5：設定動畫

實現該動畫的步驟包括：設定平移動畫、旋轉動畫 & 組合動畫。

1.設定平移動畫

    private ValueAnimator createTranslateValueAnimator(fixedBlock currEmptyfixedBlock,
                                                       fixedBlock moveBlock) {
        float startAnimValue = 0;
        float endAnimValue = 0;
        PropertyValuesHolder left = null;
        PropertyValuesHolder top = null;

        // 1. 設定移動速度
        ValueAnimator valueAnimator = new ValueAnimator().setDuration(moveSpeed);

        // 2. 設定移動方向
        // 情況分為：4種，分別是移動方塊向左、右移動 和 上、下移動
        // 注：需考慮 旋轉方向（isClock_Wise），即順逆時針 ->>關注1
        if (isNextRollLeftOrRight(currEmptyfixedBlock, moveBlock)) {

            // 情況1：順時針且在第一行 / 逆時針且在最後一行時，移動方塊向右移動
            if (isClock_Wise && currEmptyfixedBlock.index > moveBlock.index || !isClock_Wise && currEmptyfixedBlock.index > moveBlock.index) {

                startAnimValue = moveBlock.rectF.left;
                endAnimValue = moveBlock.rectF.left + blockInterval;

                // 情況2：順時針且在最後一行 / 逆時針且在第一行，移動方塊向左移動
            } else if (isClock_Wise && currEmptyfixedBlock.index < moveBlock.index
                    || !isClock_Wise && currEmptyfixedBlock.index < moveBlock.index) {

                startAnimValue = moveBlock.rectF.left;
                endAnimValue = moveBlock.rectF.left - blockInterval;
            }

            // 設定屬性值
            left = PropertyValuesHolder.ofFloat("left", startAnimValue, endAnimValue);
            valueAnimator.setValues(left);

        } else {
            // 情況3：順時針且在最左列 / 逆時針且在最右列，移動方塊向上移動
            if (isClock_Wise && currEmptyfixedBlock.index < moveBlock.index
                    || !isClock_Wise && currEmptyfixedBlock.index < moveBlock.index) {

                startAnimValue = moveBlock.rectF.top;
                endAnimValue = moveBlock.rectF.top - blockInterval;

                // 情況4：順時針且在最右列 / 逆時針且在最左列，移動方塊向下移動
            } else if (isClock_Wise && currEmptyfixedBlock.index > moveBlock.index
                    || !isClock_Wise && currEmptyfixedBlock.index > moveBlock.index) {
                startAnimValue = moveBlock.rectF.top;
                endAnimValue = moveBlock.rectF.top + blockInterval;
            }

            // 設定屬性值
            top = PropertyValuesHolder.ofFloat("top", startAnimValue, endAnimValue);
            valueAnimator.setValues(top);
        }

        // 3. 通過監聽器更新屬性值
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Object left = animation.getAnimatedValue("left");
                Object top = animation.getAnimatedValue("top");
                if (left != null) {
                    mMoveBlock.rectF.offsetTo((Float) left, mMoveBlock.rectF.top);
                }
                if (top != null) {
                    mMoveBlock.rectF.offsetTo(mMoveBlock.rectF.left, (Float) top);
                }
                // 實時更新旋轉中心 ->>關注2
                setMoveBlockRotateCenter(mMoveBlock, isClock_Wise);

                // 更新繪製
                invalidate();
            }
        });
        return valueAnimator;
    }
// 此步驟分析完畢

/**
     * 關注1：判斷移動方向
     * 即上下 or 左右
     */
    private boolean isNextRollLeftOrRight(fixedBlock currEmptyfixedBlock, fixedBlock rollSquare) {
        if (currEmptyfixedBlock.rectF.left - rollSquare.rectF.left == 0) {
            return false;
        } else {
            return true;
        }
    }
// 回到原處

/**
     * 關注2：實時更新移動方塊的旋轉中心
     * 因為方塊在平移旋轉過程中，旋轉中心也會跟著改變，因此需要改變MoveBlock的旋轉中心（cx,cy）
     */

    private void setMoveBlockRotateCenter(MoveBlock moveBlock, boolean isClockwise) {

        // 情況1：以移動方塊的左上角為旋轉中心
        if (moveBlock.index == 0) {
            moveBlock.cx = moveBlock.rectF.right;
            moveBlock.cy = moveBlock.rectF.bottom;

            // 情況2：以移動方塊的右下角為旋轉中心
        } else if (moveBlock.index == lineNumber * lineNumber - 1) {
            moveBlock.cx = moveBlock.rectF.left;
            moveBlock.cy = moveBlock.rectF.top;

            // 情況3：以移動方塊的左下角為旋轉中心
        } else if (moveBlock.index == lineNumber * (lineNumber - 1)) {
            moveBlock.cx = moveBlock.rectF.right;
            moveBlock.cy = moveBlock.rectF.top;

            // 情況4：以移動方塊的右上角為旋轉中心
        } else if (moveBlock.index == lineNumber - 1) {
            moveBlock.cx = moveBlock.rectF.left;
            moveBlock.cy = moveBlock.rectF.bottom;
        }

        //以下判斷與旋轉方向有關：即順 or 逆順時針

        // 情況1：左邊
        else if (moveBlock.index % lineNumber == 0) {
            moveBlock.cx = moveBlock.rectF.right;
            moveBlock.cy = isClockwise ? moveBlock.rectF.top : moveBlock.rectF.bottom;

            // 情況2：上邊
        } else if (moveBlock.index < lineNumber) {
            moveBlock.cx = isClockwise ? moveBlock.rectF.right : moveBlock.rectF.left;
            moveBlock.cy = moveBlock.rectF.bottom;

            // 情況3：右邊
        } else if ((moveBlock.index + 1) % lineNumber == 0) {
            moveBlock.cx = moveBlock.rectF.left;
            moveBlock.cy = isClockwise ? moveBlock.rectF.bottom : moveBlock.rectF.top;

            // 情況4：下邊
        } else if (moveBlock.index > (lineNumber - 1) * lineNumber) {
            moveBlock.cx = isClockwise ? moveBlock.rectF.left : moveBlock.rectF.right;
            moveBlock.cy = moveBlock.rectF.top;
        }
    }
    // 回到原處

   
複製程式碼

2. 設定旋轉動畫

private ValueAnimator createMoveValueAnimator() {

        // 通過屬性動畫進行設定
        ValueAnimator moveAnim = ValueAnimator.ofFloat(0, 90).setDuration(moveSpeed);

        moveAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Object animatedValue = animation.getAnimatedValue();

                // 賦值
                mRotateDegree = (float) animatedValue;

                // 更新檢視
                invalidate();
            }
        });
        return moveAnim;
    }
    // 此步驟完畢
複製程式碼

3. 設定組合動畫

private void setAnimation（） {

        // 1. 獲取固定方塊當前的空位置，即移動方塊當前位置
        fixedBlock currEmptyfixedBlock = mfixedBlocks[mCurrEmptyPosition];
        // 2. 獲取移動方塊的到達位置，即固定方塊當前空位置的下1個位置
        fixedBlock movedBlock = currEmptyfixedBlock.next;

        // 3. 設定動畫變化的插值器
        mAnimatorSet.setInterpolator(move_Interpolator);
        mAnimatorSet.playTogether(translateConrtroller, moveConrtroller);
        mAnimatorSet.addListener(new AnimatorListenerAdapter() {

            // 4. 動畫開始時進行一些設定
            @Override
            public void onAnimationStart(Animator animation) {

                // 每次動畫開始前都需要更新移動方塊的位置 ->>關注1
                updateMoveBlock();

                // 讓移動方塊的初始位置的下個位置也隱藏 = 兩個隱藏的方塊
                mfixedBlocks[mCurrEmptyPosition].next.isShow = false;

                // 通過標誌位將移動的方塊顯示出來
                mMoveBlock.isShow = true;
            }

            // 5. 結束時進行一些設定
            @Override
            public void onAnimationEnd(Animator animation) {
                isMoving = false;
                mfixedBlocks[mCurrEmptyPosition].isShow = true;
                mCurrEmptyPosition = mfixedBlocks[mCurrEmptyPosition].next.index;

                // 將移動的方塊隱藏
                mMoveBlock.isShow = false;

                // 通過標誌位判斷動畫是否要迴圈播放
                if (mAllowRoll) {
                    startMoving();
                }
            }
        });

// 此步驟分析完畢

/**
     * 關注1：更新移動方塊的位置
     */

    private void updateMoveBlock() {

        mMoveBlock.rectF.set(mfixedBlocks[mCurrEmptyPosition].next.rectF);
        mMoveBlock.index = mfixedBlocks[mCurrEmptyPosition].next.index;
        setMoveBlockRotateCenter(mMoveBlock, isClock_Wise);
    }
    // 回到原處

複製程式碼

步驟6：啟動動畫

public void startMoving() {

        // 1. 根據標誌位 & 檢視是否可見確定是否需要啟動動畫
        // 此處設定是為了方便手動 & 自動停止動畫
        if (isMoving || getVisibility() != View.VISIBLE ) {
            return;
        }

        // 2. 設定標記位：以便是否停止動畫
        isMoving = true;
        mAllowRoll = true;

        // 3. 啟動動畫
        mAnimatorSet.start();

    // 停止動畫
    public void stopMoving() {
        // 通過標記位來設定
        mAllowRoll = false;
    }
複製程式碼

至此，該款小清新載入等待的自定義控制元件原始碼分析完畢
完整原始碼地址：https://github.com/Carson-Ho/Kawaii_LoadingView

7. 貢獻程式碼

希望你們能和我一起完善這款清新 & 小資風格的自定義控制元件，具體請看：貢獻程式碼說明
關於該開源專案的意見 & 建議可在Issue上提出。歡迎 Star ！

Github開源地址：Kawaii_LoadingView

8. 總結

相信你一定會喜歡上 這款小清新的載入等待自定義控制元件

已在Github上開源：Kawaii_LoadingView，歡迎 Star ！

此外，我還有一些有趣的自定義View例項講解，有興趣可以繼續關注Carson_Ho的安卓開發筆記

a. 手把手教你實現一個簡單好用的搜尋框（含歷史搜尋記錄）

b. 你需要一款簡單實用的SuperEditText(一鍵刪除&自定義樣式)）

c. Android 自定義View實戰系列：時間軸

請點贊！因為你的鼓勵是我寫作的最大動力！

參考文章

http://www.jianshu.com/p/9a6cbb7aa54f http://www.jianshu.com/p/2412d00a0ce4 http://www.jianshu.com/p/733532041f46 http://halohoop.com/2017/06/04/roll_loading/ http://www.jianshu.com/p/e9d8420b1b9c http://www.jianshu.com/p/762b490403c3 http://www.jianshu.com/p/1dab927b2f36 http://www.jianshu.com/p/158736a2549d http://www.jianshu.com/p/146e5cec4863

玩Android客戶端，一款Android開源小專案
2018-02-23
Android客戶端
一款開源免費的WPF圖表控制元件ModernuiCharts
2020-11-12
控制元件UI
已開源！一款支援鴻蒙 NEXT Android iOS 的 UI 控制元件檢視器.md
2024-10-17
鴻蒙AndroidiOSUI控制元件
小清新的娛樂網站
2019-05-11
網站
一款開源免費美觀的WinForm UI控制元件庫 - ReaLTaiizor
2023-12-19
ORMUI控制元件AI
Android 資源載入機制剖析
2018-03-27
Android
Android圖片載入開源庫深度推薦，安利Fresco
2016-11-16
Android
Python頁面載入的等待方式
2021-09-11
Python
Android開發者必備：推薦一款助力開發的開源APP
2018-12-31
AndroidAPP
想獲取JS載入網頁的源網頁的原始碼，不想獲取JS載入後的資料
2024-04-10
JS網頁原始碼
app直播原始碼，等待時的載入動畫（交錯載入動畫）
2022-05-20
APP原始碼動畫
分享一個小清新的論壇原始碼
2020-11-02
原始碼
用RecyclerView做一個小清新的Gallery效果
2017-12-13
View
想學Android開發簡易入門容易上手
2015-03-24
Android
灰綠小清新Lightroom預設
2021-01-27
OOM
CSS3載入等待動畫效果
2018-07-23
CSSS3動畫
Android 動態載入資源例項解析
2015-11-02
Android
微信小程式優質資源彙總：開源框架、開源App和開源庫，總有一款適合你(1)
2018-08-06
微信小程式框架APP
自適應小清新的自媒體平臺
2019-05-11
CSS3旋轉載入等待效果
2018-09-19
CSSS3
Android ListVeiw控制元件（轉載整理）
2017-03-31
Android控制元件
《夢想新大陸》新春版本上線，手遊助手送你新年福
2021-02-14
js和css3實現的載入等待特效
2017-04-17
JSCSSS3特效
CSS3實現的頁面載入等待效果
2017-02-17
CSSS3
css3實現的旋轉載入等待效果
2017-02-22
CSSS3
Android小知識-如何載入外部dex檔案中的類
2018-10-19
Android
如何用JS做一個小清新導航？
2019-02-28
JS
vue實現首屏載入等待動畫避免首次載入白屏尷尬
2018-06-27
Vue動畫
純css寫出愛心版載入效果，等待載入也是一種享受
2018-02-05
CSS
Android開發丶使用懶載入修復tablayout+viewpager+fragment的預載入
2017-05-09
AndroidTabLayoutViewpagerFragment
讀autolayout開源框架masonry想MVC
2015-11-13
框架MVC
Android資源動態載入以及相關原理分析
2018-01-11
Android
使用者控制元件的動態載入
2010-08-19
控制元件
CSS3五連珠載入等待效果
2018-07-17
CSSS3
Android開源音樂播放器之線上音樂列表自動載入更多
2019-01-11
Android播放器
Android開源網路框架Retrofit（入門篇）
2016-12-12
Android框架
android資源下載
2011-11-23
Android
GitHub上的十一款熱門開源安全工具
2014-09-14
Github

Android開源：想送你一款小清新的載入等待控制元件

前言

目錄

1. 簡介

2. 應用場景

3. 特點

3.1 樣式清新

3.2 使用簡單

3.3 二次開發成本低

4. 具體使用

5. 完整Demo地址

6. 原始碼分析

6.1 準備說明

6.2 動畫原理

6.3 實現步驟

步驟1：初始化動畫屬性

步驟2：初始化方塊物件 & 之間的關係

步驟3：設定方塊初始位置

步驟4：繪製方塊

步驟5：設定動畫

步驟6：啟動動畫

7. 貢獻程式碼

8. 總結

請點贊！因為你的鼓勵是我寫作的最大動力！

相關文章

Android開源：想送你一款小清新的載入等待 控制元件

前言

目錄

1. 簡介

2. 應用場景

3. 特點

3.1 樣式清新

3.2 使用簡單

3.3 二次開發成本低

4. 具體使用

5. 完整Demo地址

6. 原始碼分析

6.1 準備說明

6.2 動畫原理

6.3 實現步驟

步驟1：初始化動畫屬性

步驟2：初始化方塊物件 & 之間的關係

步驟3：設定方塊初始位置

步驟4：繪製方塊

步驟5：設定動畫

步驟6：啟動動畫

7. 貢獻程式碼

8. 總結

請點贊！因為你的鼓勵是我寫作的最大動力！

相關文章

Android開源：想送你一款小清新的載入等待控制元件