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

就是这么简单，哈哈