Progress bar / wait to load - rotate small dot effect

1 Effect Picture

The static image doesn't work, so update the article and attach the github address.

2, thinking

12 small circle points stacked (i=0,1,...11)
Animation 1: rotate from 0 degree to 30*i degree
 Animation 2: rotate from 30*i degrees to 360 degrees
 Since user interaction is not involved, the most basic view animation is enough

3 layout documents

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 code implementation

4.1 handler loop

//handler for loop animation
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 initialize the small dot, and place it in the middle of the top of the parent control as the starting position

/**
 * Initialize small dots
 */
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 start the animation, continue the animation at the end of monitor animation 1, and send the loop message at the end of monitor animation 2

/**
 * Turn on small circle point rotation animation 1
 */
private void startRotationAnimOne(final ImageView iv, final float fromDegrees, final float toDegrees) {
    //Take the center point of View's parent control as the rotation axis to create the animation of rotation degree
    int pivotXType = Animation.ABSOLUTE;
    float pivotXValue = 0;
    int pivotYType = Animation.ABSOLUTE;
    float pivotYValue = 15;//Half the height of the parent control
    Animation animation = new RotateAnimation(
            fromDegrees, toDegrees,
            pivotXType, pivotXValue,
            pivotYType, pivotYValue
    );
    //Set animation duration
    animation.setDuration(DURATION_ANIM_ONE);
    //animation.setFillAfter(true);
    //animation.setRepeatCount(10);
    //Apply animation to View immediately through View's startAnimation method
    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) {
        }
    });
}

/**
 * Turn on small circle point rotation animation 2
 */
private void startRotationAnimTwo(ImageView iv,float fromDegrees, float toDegrees) {
    //Take the center point of View's parent control as the rotation axis to create the animation of rotation degree
    int pivotXType = Animation.ABSOLUTE;
    float pivotXValue = 2;
    int pivotYType = Animation.ABSOLUTE;
    float pivotYValue = 15;
    Animation animation = new RotateAnimation(
            fromDegrees, toDegrees,
            pivotXType, pivotXValue,
            pivotYType, pivotYValue
    );
    //Set animation duration
    animation.setDuration(DURATION_ANIM_TWO);
    //animation.setFillAfter(true);
    //animation.setRepeatCount(10);
    //Apply animation to View immediately through View's startAnimation method
    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){
                //loop
                animaLoopHandler.sendEmptyMessage(ANIMA_LOOP);
            }
        }

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

4.4 finally, remember to clear the loop handler in the destroy phase

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

It's so simple, haha