Android进度条/等待加载——旋转小圆点效果

进度条/等待加载——旋转小圆点效果

1 效果图

2、思想

12个小圆点叠放（i=0,1,…11）
动画一：依次从0度旋转到30i度
动画二：依次从30i度旋转到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">
        
RelativeLayout>
    

src\main\res\drawable\shape_dot_white.xml

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

就是这么简单，哈哈