自定义 View 实现小球撞击数据加载效果

前言：刚开始是假装坚强，后来就真的坚强了。——杨绛。

承接上一篇自定义 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