1.效果展示
在这里插入图片描述
2.效果分析及思路
2.1. 效果分析：
1.三个不同颜色的圆点
2.左右两边的圆点不断的平移交换位置，三个圆不断的变颜色
2.2. 思路：
1.自定义ViewGroup
2.自定义圆，添加到ViewGroup中
3.使用属性动画改变圆的位置
4.改变三个圆的颜色
3.开始撸码
3.1.自定义CircleView继承子View
public class CircleView extends View {
//定义画笔
private Paint mPaint;
//当前颜色
private int mColor;
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);
initPaint();
}
/**
* 初始化画笔
*/
private void initPaint() {
mPaint = new Paint();
mPaint.setAntiAlias(true); //设置抗锯齿
mPaint.setDither(true); //设置防抖动
}
@Override
protected void onDraw(Canvas canvas) {
int cx = getWidth() / 2;
int cy = getHeight() / 2;
canvas.drawCircle(cx,cy,cx,mPaint);
}
/**
* 设置画笔颜色
* @param color
*/
public void exchangeColor(int color){
this.mColor = color;
mPaint.setColor(color);
//不断刷新
invalidate();
}
/**
* 获取当前颜色
* @return
*/
public int getColor(){
return mColor;
}
3.2.自定义ViewGroup继承子RelativeLayout
public class LoadingView extends RelativeLayout {
//定义三个View
private CircleView mLeftView,mMiddleView,mRightView;
//平移距离 此处是px，需要转换为dp
private int mTranslationDistance = 30;
//动画时间
private final long ANIMATOR_TIME = 300;
//设置动画的标志位，是否停止动画
private boolean isStopAnimator = false;
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 = dip2px(mTranslationDistance);
setBackgroundColor(Color.WHITE);
//1.创建三个View
mLeftView = getCircleView(context,getResources().getColor(R.color.blue));
mMiddleView = getCircleView(context,getResources().getColor(R.color.orange));
mRightView = getCircleView(context,getResources().getColor(R.color.pink));
addView(mLeftView);
addView(mRightView);
addView(mMiddleView);
post(new Runnable() {
@Override
public void run() {
//3.使用属性动画改变圆的位置
expendAnimator();
}
});
}
/**
* 向左右展开圆
* 向左是负数-mTranslationDistance
*/
private void expendAnimator() {
if (isStopAnimator){
return;
}
Log.e("TAG","展开杀我");
//向左跑
ValueAnimator leftAnimator = ObjectAnimator.ofFloat(mLeftView,"translationX",0,-mTranslationDistance);
//向右跑
ValueAnimator rightAnimator = ObjectAnimator.ofFloat(mRightView,"translationX",0,mTranslationDistance);
//使用属性动画集合AnimatorSet
AnimatorSet set = new AnimatorSet();
//设置动画时间
set.setDuration(ANIMATOR_TIME);
//设置插值器，刚开始快后来慢
set.setInterpolator(new DecelerateInterpolator());
//同时执行动画
set.playTogether(leftAnimator,rightAnimator);
//设置动画结束的监听
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
//改变颜色 定一个顺序 左->中 中->右 右->左
exchangeColor();
//开启向内动画
mergeAnimator();
}
});
set.start();
}
/**
* 改变颜色
* 左->中
* 中->右
* 右->左
*/
private void exchangeColor() {
int mLeftColor = mLeftView.getColor();
int mMiddleColor = mMiddleView.getColor();
int mRightColor = mRightView.getColor();
mLeftView.exchangeColor(mMiddleColor);
mMiddleView.exchangeColor(mRightColor);
mRightView.exchangeColor(mLeftColor);
}
/**
* 向内合并动画,只需要改变动画的位置
*/
private void mergeAnimator() {
if (isStopAnimator){
return;
}
Log.e("TAG","合并杀我");
//向左跑
ValueAnimator leftAnimator = ObjectAnimator.ofFloat(mLeftView,"translationX",-mTranslationDistance,0);
//向右跑
ValueAnimator rightAnimator = ObjectAnimator.ofFloat(mRightView,"translationX",mTranslationDistance,0);
//使用属性动画集合AnimatorSet
AnimatorSet set = new AnimatorSet();
//设置动画时间
set.setDuration(ANIMATOR_TIME);
set.setInterpolator(new AccelerateInterpolator());
//同时执行动画
set.playTogether(leftAnimator,rightAnimator);
//设置动画结束的监听
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
exchangeColor();
//开启向外动画
expendAnimator();
}
});
set.start();
}
/**
* 创建圆,设置宽高大小 设置位置
* @param context
* @return
*/
private CircleView getCircleView(Context context,int color) {
CircleView circleView = new CircleView(context);
circleView.exchangeColor(color);
//设置宽高大小
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(dip2px(10),dip2px(10));
circleView.setLayoutParams(params);
//设置位置，在父容器中心
params.addRule(CENTER_IN_PARENT);
return circleView;
}
/**
* px转换dp
* @param dip
* @return
*/
private int dip2px(int dip) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dip,getResources().getDisplayMetrics());
}
/**
* 优化
* 1.将我们的View设置为INVISIBLE，减少布局的测量和摆放，减少系统的View的绘制流程
* 2.清除我们的动画
* 3.设置一个标志位，通过标志位来执行动画
*/
@Override
public void setVisibility(int visibility) {
//1.将我们的View设置为INVISIBLE，减少布局的测量和摆放，减少系统的View的绘制流程
super.setVisibility(INVISIBLE);
//2.清除我们的动画
clearAnimation();
//3.设置一个标志位，通过标志位来执行动画
isStopAnimator = true;
//4.判断父容器是否还在，把自己移除，清除自己的所有View
ViewGroup parent = (ViewGroup) getParent();
if (parent!=null){
//把自己从父容器移除
parent.removeView(this);
//移除自己的所有子View
this.removeAllViews();
}
}
4.最终优化
很多情况下，我们使用时只是把View设置为GONE，但是动画还在在运行，我们需要进行处理优化防止内存泄漏
loadingView.setVisibility(View.GONE);
4.1未进行处理效果：
点评屏幕将View设置为GONE,动画还是在执行，打印还在继续
在这里插入图片描述
4.2.处理后效果：
点评屏幕将View设置为GONE,动画停止，不在进行打印了
在这里插入图片描述
4.3.解决
1.将我们的View设置为INVISIBLE，减少布局的测量和摆放，减少系统的View的绘制流程
2.清除我们的动画
3.设置一个标志位，通过标志位来执行动画
4.判断我们父容器是否存在，把自己清除，移除自己所有的View
/**
* 优化
* 1.将我们的View设置为INVISIBLE，减少布局的测量和摆放，减少系统的View的绘制流程
* 2.清除我们的动画
* 3.设置一个标志位，通过标志位来执行动画
*/
@Override
public void setVisibility(int visibility) {
//1.将我们的View设置为INVISIBLE，减少布局的测量和摆放，减少系统的View的绘制流程
super.setVisibility(INVISIBLE);
//2.清除我们的动画
clearAnimation();
//3.设置一个标志位，通过标志位来执行动画
isStopAnimator = true;
//4.判断父容器是否还在，把自己移除，清除自己的所有View
ViewGroup parent = (ViewGroup) getParent();
if (parent!=null){
//把自己从父容器移除
parent.removeView(this);
//移除自己的所有子View
this.removeAllViews();
}
