属性动画—自定义加载效果

GIF.gif

上面就是使用属性动画实现的一个加载效果；实现思路：

1、自定义view绘制三个小圆；
2、将绘制好的三个小圆添加到自定义的布局容器中；
3、给左边和右边的小圆设置动画，主要使用X轴的位移动画；

先进行第一步的实现，自定义view绘制三个小圆：

public class CircleView extends View {
    private Paint mPaint;
    //保存画笔的颜色
    private int mColor;

    public CircleView(Context context) {
        this(context, null);
    }

    public CircleView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleView(Context context, 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) {
        mColor = color;
        mPaint.setColor(color);
        invalidate();
    }

    /**
     * 获取当前颜色
     *
     * @return
     */
    public int getColor() {
        return mColor;
    }
}

绘制小圆就是定义一个类 extends View 重写onDraw()方法，并调用canvas.drawCircle()方法进行圆的绘制；完成第一步接着实现第二步和三步；

public class LoadView extends RelativeLayout {
    //三个小圆
    private CircleView mLeftView, mMiddleView, mRightView;
    //位移距离
    private int MTRANSLATION_DISTANCE = dip(40);
    //动画执行的时间
    private long TRANSLATION_TIME = 350;
    //是否停止动画
    private boolean mIsStopAnimator = false;

    public LoadView(Context context) {
        this(context, null);
    }

    public LoadView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LoadView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //添加三个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(mRightView);
        addView(mMiddleView);
        post(new Runnable() {
            @Override
            public void run() {
                //布局实例化好之后再去开启动画
                expendAnimation();
            }
        });
    }

    /**
     * 展开动画
     */
    private void expendAnimation() {
        if (mIsStopAnimator) {
            return;
        }
        //左边跑
        ObjectAnimator leftTranslation = ObjectAnimator.ofFloat(mLeftView, "translationX", 0, -MTRANSLATION_DISTANCE);
        //往右边跑
        ObjectAnimator rightTranslation = ObjectAnimator.ofFloat(mRightView, "translationX", 0, MTRANSLATION_DISTANCE);
        //实例化动画集合
        AnimatorSet set = new AnimatorSet();
        set.setDuration(TRANSLATION_TIME);
        //弹性效果  插值器
        set.setInterpolator(new DecelerateInterpolator());
        //动画一起执行
        set.playTogether(leftTranslation, rightTranslation);
        //监听动画执行
        set.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                //往里面跑
                innerAnimation();
            }
        });
        set.start();
    }

    /**
     * 往里面跑动画
     */
    private void innerAnimation() {
        if (mIsStopAnimator) {
            return;
        }
        //左边跑
        ObjectAnimator leftTranslation = ObjectAnimator.ofFloat(mLeftView, "translationX", -MTRANSLATION_DISTANCE, 0);
        //往右边跑
        ObjectAnimator rightTranslation = ObjectAnimator.ofFloat(mRightView, "translationX", MTRANSLATION_DISTANCE, 0);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(TRANSLATION_TIME);
        //弹性效果  插值器
        set.setInterpolator(new AccelerateInterpolator());
        //动画一起执行
        set.playTogether(leftTranslation, rightTranslation);
        //监听动画执行
        set.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                //往外面跑
                //切换颜色  切换颜色的顺序 左边的给中间，中间的给右边，右边的给左边
                int leftColor = mLeftView.getColor();
                int rightColor = mRightView.getColor();
                int middleColor = mMiddleView.getColor();
                //改变颜色
                mRightView.exchangeColor(middleColor);
                mLeftView.exchangeColor(rightColor);
                mMiddleView.exchangeColor(leftColor);
                expendAnimation();
            }
        });
        set.start();
    }

    /**
     * 实例化三个小圆
     *
     * @param context
     * @return
     */
    public CircleView getCircleView(Context context) {
        CircleView circleView = new CircleView(context);
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(dip(12), dip(12));
        //设置居中
        params.addRule(RelativeLayout.CENTER_IN_PARENT);
        circleView.setLayoutParams(params);
        return circleView;
    }

    private int dip(int dip) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, getResources().getDisplayMetrics());
    }

    @Override
    public void setVisibility(int visibility) {
        super.setVisibility(View.INVISIBLE);//不要再去摆放和计算，少走一些系统的源码
        //清除掉动画
        mLeftView.clearAnimation();
        mRightView.clearAnimation();
        //把LoadingView从父布局移除
        ViewGroup parent = (ViewGroup) getParent();
        if (parent != null) {
            parent.removeView(this);//从父布局移除
            //移除自己里面的所有View
            removeAllViews();
        }
        mIsStopAnimator = true;
    }
}

上面就是第二步和第三步的具体实现逻辑，这样子效果就实现了。
源码地址：

https://pan.baidu.com/s/1o9yLP4Q