首先是绘制圆圈
public class CircleView extends View {
private int mColor;
private Paint mPaint;
public CircleView(Context context) {
this(context,null);
}
public CircleView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint=new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);//防抖动
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float cx=getWidth()/2;
float cy=getHeight()/2;
canvas.drawCircle(cx,cy,cx,mPaint);
}
//切换颜色
public void exchangeColor(int color){
this.mColor=color;
mPaint.setColor(mColor);
invalidate();
}
public int getColor() {
return mColor;
}
}
然后是LoadingView实现3个圆的动画
public class LoadingView extends RelativeLayout {
private CircleView mLeftView, mMiddleView, mRightView;
private int mTranslationDistance = 30;//距离
private final long ANIMATION_DRUATION = 350;//时间
private boolean isStopAnimation = false;//默认false,只有销毁的时候为true
public LoadingView(Context context) {
this(context, null);
}
public LoadingView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mTranslationDistance = dp2x(mTranslationDistance);
//设置背景
setBackgroundColor(Color.WHITE);
//绘制左边的圆
mLeftView = getCircleView(context);
mLeftView.exchangeColor(Color.BLUE);
//绘制右边的圆
mRightView = getCircleView(context);
mRightView.exchangeColor(Color.GREEN);
//绘制中间的圆
mMiddleView = getCircleView(context);
mMiddleView.exchangeColor(Color.RED);
//添加圆
addView(mLeftView);
addView(mRightView);
addView(mMiddleView);
post(new Runnable() {
@Override
public void run() {
// 让布局实例化好之后再去开启动画
expendAnimation();
}
});
}
//展开动画
private void expendAnimation() {
if (isStopAnimation) {
return;
}
//开启左边位移动画
ObjectAnimator leftTranslationAnimator = ObjectAnimator.ofFloat(mLeftView, "translationX", 0, -mTranslationDistance);
//开启右边位移动画
ObjectAnimator rightTranslatioAnimation = ObjectAnimator.ofFloat(mRightView, "translationX", 0, mTranslationDistance);
AnimatorSet set = new AnimatorSet();
set.setDuration(ANIMATION_DRUATION);
set.playTogether(leftTranslationAnimator, rightTranslatioAnimation);
set.setInterpolator(new DecelerateInterpolator());
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
// 往里面跑
innerAnimation();
}
});
set.start();
}
private void innerAnimation() {
if (isStopAnimation) {
return;
}
//开启左边位移动画
ObjectAnimator leftTranslationAnimator = ObjectAnimator.ofFloat(mLeftView, "translationX", -mTranslationDistance, 0);
//开启右边位移动画
ObjectAnimator rightTranslatioAnimation = ObjectAnimator.ofFloat(mRightView, "translationX", mTranslationDistance, 0);
AnimatorSet set = new AnimatorSet();
set.setDuration(ANIMATION_DRUATION);
set.playTogether(leftTranslationAnimator, rightTranslatioAnimation);
set.setInterpolator(new AccelerateInterpolator());
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
// 往外面跑
// 切换颜色顺序 左边的给中间 中间的给右边 右边的给左边
int mLeftViewColor = mLeftView.getColor();
int mRightViewColor = mRightView.getColor();
int mMiddleViewColor = mMiddleView.getColor();
//切换三者颜色
mLeftView.exchangeColor(mRightViewColor);
mRightView.exchangeColor(mMiddleViewColor);
mMiddleView.exchangeColor(mLeftViewColor);
expendAnimation();
}
});
set.start();
}
//获取圆
private CircleView getCircleView(Context context) {
CircleView circleView = new CircleView(context);
LayoutParams params = new LayoutParams(dp2x(10), dp2x(10));
params.addRule(CENTER_IN_PARENT);
circleView.setLayoutParams(params);
return circleView;
}
private int dp2x(int dpValue) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, getResources().getDisplayMetrics());
}
/**
* 性能优化
*/
@Override
public void setVisibility(int visibility) {
super.setVisibility(INVISIBLE);
//清理所有动画
mLeftView.clearAnimation();
mRightView.clearAnimation();
ViewGroup parent = (ViewGroup) getParent();
if (parent != null) {
parent.removeView(mLeftView);//父布局中移除当前view
parent.removeView(mRightView);
removeAllViews();//移除自己的
}
isStopAnimation = true;
}
}