效果图:
核心代码如下:
public class LoadCircleView extends LinearLayout {
private static final String TAG = "LoadCircleView";
private Context mContext;
public LoadCircleView(Context context) {
this(context, null);
}
public LoadCircleView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public LoadCircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public LoadCircleView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context, attrs, defStyleAttr);
}
private void init(Context context, AttributeSet attrs, int defStyleAttr) {
this.mContext = context;
setOrientation(HORIZONTAL);//设置水平布局
setGravity(Gravity.CENTER);//设置子View居中显示
CircleView circleView;
LinearLayout.LayoutParams lp;
for (int i = 0; i < 3; i++) {
circleView = new CircleView(mContext);
lp = new LayoutParams(40, 40);
if (i != 0) {
lp.leftMargin = 30;
}
addView(circleView, lp);
}
postDelayed(new Runnable() {
@Override
public void run() {
startAnim(getChildAt(0));
}
},1000);
postDelayed(new Runnable() {
@Override
public void run() {
startAnim(getChildAt(1));
}
}, 1250);
postDelayed(new Runnable() {
@Override
public void run() {
startAnim(getChildAt(2));
}
}, 1500);
}
//
// private void startAnim(View view) {
// ScaleAnimation scaleAnimation = new ScaleAnimation(1f, 0.6f, 1f, 0.6f,
// ScaleAnimation.RELATIVE_TO_SELF, 0.5f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
// int duration = 350;
// if (childViewIndex % 2 == 0) {
// duration = 300;
// }
// scaleAnimation.setDuration(duration);
// childViewIndex++;
// scaleAnimation.setInterpolator(new LinearInterpolator());
// scaleAnimation.setRepeatCount(Integer.MAX_VALUE);
// scaleAnimation.setRepeatMode(Animation.REVERSE);
// view.startAnimation(scaleAnimation);
// }
private void startAnim(View view) {
AnimatorSet animatorSet = new AnimatorSet();//组合动画
ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, "scaleX", 1, 0.5f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, "scaleY", 1, 0.5f);
scaleX.setRepeatCount(ValueAnimator.INFINITE);
scaleX.setRepeatMode(ValueAnimator.REVERSE);
scaleY.setRepeatCount(ValueAnimator.INFINITE);
scaleY.setRepeatMode(ValueAnimator.REVERSE);
animatorSet.setDuration(500);
animatorSet.setInterpolator(new DecelerateInterpolator());
animatorSet.play(scaleX).with(scaleY);//两个动画同时开始
animatorSet.start();
}
/**
* 静态内部类,圆形View
*/
private static class CircleView extends View {
public CircleView(Context context) {
super(context);
}
public CircleView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
Random random = new Random();
int i = random.nextInt(3);
paint.setColor(getContext().getResources().getColor(R.color.colorAccent));
paint.setAntiAlias(true);//抗锯齿
paint.setStyle(Paint.Style.FILL);
int height = getHeight();
int width = getWidth();
int radius = 0;
if (height > width) {
radius = width / 2;
} else {
radius = height / 2;
}
canvas.drawCircle(width / 2, height / 2, width / 2, paint);
}
}
}
这里默认添加了3个小圆圈,有兴趣的可以参考上述代码修改
- 继承线性布局,设置水平布局,居中排列
- 添加CircleView,设置左边距
- 以一定间隔时间依次开始动画