進度條/等待載入——旋轉小圓點效果

1 效果圖

靜態圖片看不出效果，隨後更新文章，附上github地址。

2、思想

12個小圓點疊放（i=0,1,...11）
動畫一：依次從0度旋轉到30*i度
動畫二：依次從30*i度旋轉到360度
因為不牽扯使用者互動，所以用最基本的檢視動畫即可

3 佈局檔案

src\main\res\layout\activity_launch.xml

<RelativeLayout
        android:id="@+id/progress_dots_locus"
        android:layout_width="@dimen/px30"
 

        android:layout_height="@dimen/px30"
        android:layout_centerInParent="true">
        <!--<ImageView
            android:id="@+id/iv_dot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:background="@drawable/shape_dot_white"/>-->
 

</RelativeLayout>

src\main\res\drawable\shape_dot_white.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:height="@dimen/px3"
        android:width="@dimen/px3" />
    <solid
 
 android:color="#ffffff" />
</shape>

4 程式碼實現

4.1 handler迴圈

//用於迴圈動畫的handler
public Handler animaLoopHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if(ANIMA_LOOP == msg.what){
                hasOneFinishCount = 0;
                hasTwoFinishCount = 0;
                startRotationAnimOneSet();
                //Log.d(TAG, "1handleMessage() called with: msg = [" + msg + "]");
            }
        }
    };

4.2 初始化小圓點，放於父控制元件頂部的中間為起始位置

/**
 * 初始化小圓點
 */
private void initProgressDots() {
    rlProgressDotsLocus.removeAllViews();
    for (int i = 0; i < DOT_COUNT; i++) {
        ImageView iv = new ImageView(LaunchActivity.this);
        iv.setBackgroundResource(R.drawable.shape_dot_white);

        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);

        params.addRule(RelativeLayout.CENTER_HORIZONTAL);
        rlProgressDotsLocus.addView(iv,params);
        ivDots.add(iv);
    }
}

4.3 動畫的開啟，監聽動畫1結束時繼續動畫2，監聽動畫2結束髮送迴圈訊息

/**
 * 開啟小圓點旋轉動畫1啊
 */
private void startRotationAnimOne(final ImageView iv, final float fromDegrees, final float toDegrees) {
    //以View的父控制元件中心點作為旋轉軸，建立旋轉度的動畫
    int pivotXType = Animation.ABSOLUTE;
    float pivotXValue = 0;
    int pivotYType = Animation.ABSOLUTE;
    float pivotYValue = 15;//父控制元件高度的一半
    Animation animation = new RotateAnimation(
            fromDegrees, toDegrees,
            pivotXType, pivotXValue,
            pivotYType, pivotYValue
    );
    //設定動畫持續時間
    animation.setDuration(DURATION_ANIM_ONE);
    //animation.setFillAfter(true);
    //animation.setRepeatCount(10);
    //通過View的startAnimation方法將動畫立即應用到View上
    iv.startAnimation(animation);

    animation.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            //startRotationAnimTwo(iv, toDegrees, 360);
            hasOneFinishCount++;
            if(DOT_COUNT == hasOneFinishCount){
                startRotationAnimTwoSet();
            }
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }
    });
}

/**
 * 開啟小圓點旋轉動畫2
 */
private void startRotationAnimTwo(ImageView iv,float fromDegrees, float toDegrees) {
    //以View的父控制元件中心點作為旋轉軸，建立旋轉度的動畫
    int pivotXType = Animation.ABSOLUTE;
    float pivotXValue = 2;
    int pivotYType = Animation.ABSOLUTE;
    float pivotYValue = 15;
    Animation animation = new RotateAnimation(
            fromDegrees, toDegrees,
            pivotXType, pivotXValue,
            pivotYType, pivotYValue
    );
    //設定動畫持續時間
    animation.setDuration(DURATION_ANIM_TWO);
    //animation.setFillAfter(true);
    //animation.setRepeatCount(10);
    //通過View的startAnimation方法將動畫立即應用到View上
    iv.startAnimation(animation);

    animation.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            //startRotationAnimTwo(iv, toDegrees, 360);
            hasTwoFinishCount++;
            if(DOT_COUNT == hasTwoFinishCount){
                //迴圈
                animaLoopHandler.sendEmptyMessage(ANIMA_LOOP);
            }
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }
    });
}

4.4 最後，記得在銷燬階段清空迴圈handler

@Override
protected void onDestroy() {
    super.onDestroy();
    //登出handler
    animaLoopHandler.removeCallbacksAndMessages(null);
}

就是這麼簡單，哈哈