1. 说明
基于前边我们写的58同城数据加载效果、多条目筛选菜单效果，那么我们这节课就来看下花束直播加载效果，可以知道，我们在属性动画这一系列课程我们所写的效果都是组合控件，其实这类效果都不是很难，最主要的就是分析好它的每一个过程，然后将其一一实现就行。
2. 分析
整个动画效果有3个点，每次回到中间会切换颜色，采用属性动画去控制其运动；
实际效果就是，先让3个点跑起来，中间的点固定不动，只是切换颜色，旁边的两个点先往两边跑然后 再往中间跑，跑到中间然后切换颜色
思路：
2.1 整体采用RelativeLayout布局，包裹3个View（圆形）；
2.2 采用属性动画让其反复运动；
2.3 监听动画然后在合适的时机去交换颜色；
3. 代码实现
3.1 首先画3个圆，代码如下：
/**
* Email: [email protected]
* Created by JackChen 2018/3/8 15:20
* Version 1.0
* Params:
* Description: 画圆
*/
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);
// 初始化画笔
mPaint = new Paint() ;
mPaint.setAntiAlias(true); // 设置抗锯齿
mPaint.setDither(true); // 设置防抖动
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(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 花束直播加载效果的LoadingView代码如下：
/**
* Email: [email protected]
* Created by JackChen 2018/3/8 15:29
* Version 1.0
* Params:
* Description: 花束直播加载效果
*/
public class LoadingView extends RelativeLayout {
// 位移动画的偏移距离 30dp 需要转为 px
private int mTranslationDistance = 30 ;
// 左边的圆，中间的圆，右边的圆
private CircleView mLeftView , mMiddleView , mRightView;
// 动画时长
private final long ANIMATION_TIME = 350;
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 = dp2px(mTranslationDistance) ;
setBackgroundColor(Color.WHITE);
// 添加3个View，但是需要圆形
mLeftView = getCircleView(context);
mLeftView.exchangeColor(Color.BLUE);
// 中间的圆
mMiddleView = getCircleView(context) ;
mMiddleView.exchangeColor(Color.RED);
// 右边的圆
mRightView = getCircleView(context) ;
mRightView.exchangeColor(Color.GREEN);
addView(mLeftView);
addView(mMiddleView);
addView(mRightView);
// onResume()之后、View绘制流程执行完毕、布局实例化好之后再去开启动画
post(new Runnable() {
@Override
public void run() {
// 扩展动画
expendAnimation() ;
}
}) ;
}
/**
* 展开动画
*/
private void expendAnimation() {
// 左边跑 从0位置 到 -mTranslationDistance位置
ObjectAnimator leftTranslationAnimator = ObjectAnimator.ofFloat(mLeftView, "translationX", 0, -mTranslationDistance);
// 右边跑
ObjectAnimator rightTransltionAnimator = ObjectAnimator.ofFloat(mRightView, "translationX", 0, mTranslationDistance);
// 这里需要差值器 像荡秋千一样的弹性效果 刚开始越来越慢 DecelerateInterpolator
// android.animator包下的
AnimatorSet set = new AnimatorSet() ;
// 设置组合动画时长
set.setDuration(ANIMATION_TIME) ;
// 一起播放动画
set.playTogether(leftTranslationAnimator , rightTransltionAnimator);
// 设置差值器 刚开始越来越慢
set.setInterpolator(new DecelerateInterpolator());
// 监听往外边的动画执行完毕后，然后让动画又往里边跑
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
// 往里边跑的动画
innerAnimation() ;
}
});
// 开启动画
set.start();
}
/**
* 往里边跑的动画 , 和往外边跑的动画位移都是相反的
*/
private void innerAnimation() {
// 左边跑
ObjectAnimator leftTranslationAnimator = ObjectAnimator.ofFloat(mLeftView, "translationX", -mTranslationDistance, 0);
// 右边跑
ObjectAnimator rightTranslationAnimator = ObjectAnimator.ofFloat(mRightView, "translationX", mTranslationDistance, 0);
// 组合动画
AnimatorSet set = new AnimatorSet() ;
// 设置时长
set.setDuration(ANIMATION_TIME) ;
// 设置差值器
set.setInterpolator(new AccelerateInterpolator());
// 让两个动画一起执行
set.playTogether(leftTranslationAnimator , rightTranslationAnimator) ;
// 监听往里边的动画执行完毕后，然后继续让其往外边跑，循环跑，
// 往里边的动画执行完毕后就执行往外边的动画，外边的执行完就又执行往里边的动画
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
// 切换颜色的顺序 左边的给中间 中间的给右边 右边的给左边
// 获取3个圆的颜色
int leftColor = mLeftView.getColor() ;
int middleColor = mMiddleView.getColor() ;
int rightColor = mRightView.getColor() ;
mLeftView.exchangeColor(rightColor);
mRightView.exchangeColor(middleColor);
mMiddleView.exchangeColor(leftColor);
// 再重新去展开动画
expendAnimation();
}
});
set.start();
}
/**
* 获取圆
* @param context
* @return
*/
private CircleView getCircleView(Context context) {
// 实例化圆的自定义View
CircleView circleView = new CircleView(context) ;
// 布局参数 圆的宽和高都是 10dp - 转为 px
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(dp2px(10) , dp2px(10)) ;
// 给参数设置 添加规则 ，正中心位置
params.addRule(CENTER_IN_PARENT);
// 给圆设置布局参数
circleView.setLayoutParams(params);
// 返回圆
return circleView;
}
/**
* dp - px
* @param dip
* @return
*/
private int dp2px(int dip) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP , dip , getResources().getDisplayMetrics());
}
/**
* 针对于动画涉及到内存泄露的处理情况
* @param visibility
*/
@Override
public void setVisibility(int visibility) {
// 不要再去摆放和计算，少走一些系统源码
super.setVisibility(View.INVISIBLE);
// 清理动画
mLeftView.clearAnimation();
mMiddleView.clearAnimation();
mRightView.clearAnimation();
// 把LoadingView从父布局中移除
ViewGroup parent = (ViewGroup) getParent();
if (parent != null){
parent.removeView(this);
removeAllViews();
}
}
}
3.3 直接在activity_main.xml文件中直接引用即可；
3.4 最后直接在MainActivity中找到控件即可
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LoadingView loading_view = (LoadingView) findViewById(R.id.loading_view);
}
}
4. 注意
在这里一定要注意：
在自定义View的LoadingView中的最后这段代码：
/**
* 针对于动画涉及到内存泄露的处理情况
* @param visibility
*/
@Override
public void setVisibility(int visibility) {
// 不要再去摆放和计算，少走一些系统源码
super.setVisibility(View.INVISIBLE);
// 清理动画
mLeftView.clearAnimation();
mMiddleView.clearAnimation();
mRightView.clearAnimation();
// 把LoadingView从父布局中移除
ViewGroup parent = (ViewGroup) getParent();
if (parent != null){
parent.removeView(this);
removeAllViews();
}
}
这段代码意思就是 ：
凡是动画，都可能会涉及到内存泄露，这个时候采用这种方式去清除动画，可以解决内存泄露问题，总共分为3步：
4.1 首先清除所有的子View的动画，这里有3个子View，分别为mLeftView、mMiddleView、mRightView；
4.2 获取父布局，并判断如果父布局如果不为空，首先移除父布局中的子View，最后移除所有的View即可。
这里的处理和58同城数据加载效果 处理方式是一样的
具体代码已上传至github：
https://github.com/shuai999/View_day23.git