前言：刚开始是假装坚强，后来就真的坚强了。——杨绛。
承接上一篇自定义 View 属性动画，本篇实现一个类似“小球”撞击效果，可以作为数据加载页面来使用。其实这个效果在某些 App 里面看到过，只不过忘记在哪看到的了。
好了，先看一下实现效果图：
image
看到这种效果，就像是真空中的小球一直在发生碰撞一样，这种方式该如何去做呢？其实有很多种方式去实现，但是最简单的方式还是使用属性动画来实现：
使用属性动画实现应该有最基本的四步：
- 1）、绘制圆形小球
- 2）、让圆形小球动起来
- 3）、根据三个圆形的变化规律，改变小球颜色
- 4)、优化
1、绘制圆球
对于小球，也有不同的方式去绘制。可以直接画一个 shape 图形，也可以自定义 View 进行绘制，这里选用后者，因为后者相对灵活一点。
自定义 View 进行绘制圆形：
public class CircularView extends View {
private int Color;
private Paint mPaint;
public void setColor(int color) {
this.Color = color;
mPaint.setColor(Color);
invalidate();
}
public int getColor() {
return Color;
}
public CircularView(Context context) {
this(context,null);
}
public CircularView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public CircularView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
mPaint.setAntiAlias(true);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float cx = getWidth()/2;
canvas.drawCircle(cx,cx,cx,mPaint);
}
}
在 OnDraw 中，直接使用 canvas 画了一个圆，然后提供 setColor 方法，并重绘。这样就能实现创建任意颜色的小圆了。
public class LoadingView extends RelativeLayout {
private CircularView mLeftCircularView;
private CircularView mCenterCircularView;
private CircularView mRightCircularView;
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);
init(context);
}
private void init(Context context) {
mLeftCircularView = createCircularView(context);
mLeftCircularView.setColor(Color.RED);
mRightCircularView = createCircularView(context);
mRightCircularView.setColor(Color.BLUE);
mCenterCircularView = createCircularView(context);
mCenterCircularView.setColor(Color.GREEN);
addView(mLeftCircularView);
addView(mRightCircularView);
//后添加在上面，表示中间的小圆
addView(mCenterCircularView);
/**--------- 开启动画 ---------**/
post(new Runnable() {
@Override
public void run() {
startOutAnimation();
}
});
}
/**
* 开启往外移动的动画
*/
private void startOutAnimation() {
//左边小圆左移动画
ObjectAnimator outObjectAnimator = ObjectAnimator.ofFloat();
//右边小圆右移动画
}
/**
* 开启往内移动的动画
*/
private void startInnerAnimation() {
}
/**
* 统一创建小圆
* @param context
* @return
*/
private CircularView createCircularView(Context context) {
CircularView circularView = new CircularView(context);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(dip2px(10),dip2px(10));
params.addRule(CENTER_IN_PARENT);
circularView.setLayoutParams(params);
return circularView;
}
private int dip2px(int dip) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dip,getResources().getDisplayMetrics());
}
}
这里创建一个 LoadingView 继承自 RelativeLayout，当然继承自 FrameLayout 也是可以的。
在初识化的时候，创建了三个 CircularView 设置其颜色并添加到 LoadingView 中，注意由于继承了 RelativeLayout，所以添加顺序是有讲究的，中间的小圆让它在最上面，左右小圆在下面。此时运行程序：
image
注意上面三个小球是重叠起来的。
2、让圆形小球动起来
该节内容就是使用属性动画让小圆球进行移动了。
还是先看代码：
/**
* 开启往外移动的动画
*/
private void startOutAnimation() {
//左边小圆左移动画
ObjectAnimator outLeftObjectAnimator = ObjectAnimator.ofFloat(mLeftCircularView,"TranslationX",0f,-translationDis);
//右边小圆右移动画
ObjectAnimator outRightObjectAnimator = ObjectAnimator.ofFloat(mRightCircularView,"TranslationX",0f,translationDis);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(DURATION);
animatorSet.setInterpolator(new DecelerateInterpolator(2f));
animatorSet.playTogether(outLeftObjectAnimator,outRightObjectAnimator);
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
//动画结束，开启往内移动的动画
startInnerAnimation();
}
});
animatorSet.start();
}
/**
* 开启往内移动的动画
*/
private void startInnerAnimation() {
//左边小圆右移动画
ObjectAnimator innerLeftObjectAnimator = ObjectAnimator.ofFloat(mLeftCircularView,"TranslationX",-translationDis,0f);
//右边小圆左移动画
ObjectAnimator innerRightObjectAnimator = ObjectAnimator.ofFloat(mRightCircularView,"TranslationX",translationDis,0f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(DURATION);
animatorSet.setInterpolator(new AccelerateInterpolator());
animatorSet.playTogether(innerLeftObjectAnimator,innerRightObjectAnimator);
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
//动画结束，开启往内移动的动画
startOutAnimation();
}
});
animatorSet.start();
}
发现是左边小圆往左侧移动，中间小圆不变化，右边小圆往右移动。都是属性动画最基本的用法，而且上一篇也做了很详细的解释，这里应该没问任何问题。运行程序：
image
此时已经完成了小球动态改变效果，但是在回弹的时候是需要改变小球颜色的。
3、4、改变小球的颜色，最后的优化
1、改变小球颜色
看一下文章开头，改变规律如下：
左边小球颜色—>中间小球颜色—>右边小球颜色—>左边小球颜色
按照上面这个规律代码如下：
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
//动画结束，开启往外移动的动画
startOutAnimation();
//改变小球颜色
//左边小球颜色—>中间小球颜色—>右边小球颜色—>左边小球颜色
int mLeftCircularViewColor = mLeftCircularView.getColor();
int mCenterCircularViewColor = mCenterCircularView.getColor();
int mRightCircularViewColor = mRightCircularView.getColor();
mCenterCircularView.setColor(mLeftCircularViewColor);
mRightCircularView.setColor(mCenterCircularViewColor);
mLeftCircularView.setColor(mRightCircularViewColor);
}
});
监听在 startInnerAnimation，也即动画内移结束的时候开始改变球的颜色。
2、一点点优化
这里内容跟上文是一样的，直接把代码贴在下面了：
image
运行程序：
image
最后呈现一张动图送给你们
image