自定义view-花束直播加载动画和分析

首先是绘制圆圈

public class CircleView extends View {
    private int mColor;
    private Paint mPaint;
    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);
        float cx=getWidth()/2;
        float cy=getHeight()/2;

        canvas.drawCircle(cx,cy,cx,mPaint);
    }
    //切换颜色
    public void exchangeColor(int color){
        this.mColor=color;
        mPaint.setColor(mColor);
        invalidate();
    }

    public int getColor() {
        return mColor;
    }
}

然后是LoadingView实现3个圆的动画

public class LoadingView extends RelativeLayout {
    private CircleView mLeftView, mMiddleView, mRightView;
    private int mTranslationDistance = 30;//距离
    private final long ANIMATION_DRUATION = 350;//时间
    private boolean isStopAnimation = false;//默认false，只有销毁的时候为true

    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 = dp2x(mTranslationDistance);
        //设置背景
        setBackgroundColor(Color.WHITE);
        //绘制左边的圆
        mLeftView = getCircleView(context);
        mLeftView.exchangeColor(Color.BLUE);
        //绘制右边的圆
        mRightView = getCircleView(context);
        mRightView.exchangeColor(Color.GREEN);
        //绘制中间的圆
        mMiddleView = getCircleView(context);
        mMiddleView.exchangeColor(Color.RED);
        //添加圆
        addView(mLeftView);
        addView(mRightView);
        addView(mMiddleView);

        post(new Runnable() {
            @Override
            public void run() {
                // 让布局实例化好之后再去开启动画
                expendAnimation();
            }


        });
    }

    //展开动画
    private void expendAnimation() {
        if (isStopAnimation) {
            return;
        }
        //开启左边位移动画
        ObjectAnimator leftTranslationAnimator = ObjectAnimator.ofFloat(mLeftView, "translationX", 0, -mTranslationDistance);
        //开启右边位移动画
        ObjectAnimator rightTranslatioAnimation = ObjectAnimator.ofFloat(mRightView, "translationX", 0, mTranslationDistance);

        AnimatorSet set = new AnimatorSet();
        set.setDuration(ANIMATION_DRUATION);
        set.playTogether(leftTranslationAnimator, rightTranslatioAnimation);
        set.setInterpolator(new DecelerateInterpolator());
        set.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                // 往里面跑
                innerAnimation();
            }
        });
        set.start();
    }

    private void innerAnimation() {
        if (isStopAnimation) {
            return;
        }
        //开启左边位移动画
        ObjectAnimator leftTranslationAnimator = ObjectAnimator.ofFloat(mLeftView, "translationX", -mTranslationDistance, 0);
        //开启右边位移动画
        ObjectAnimator rightTranslatioAnimation = ObjectAnimator.ofFloat(mRightView, "translationX", mTranslationDistance, 0);

        AnimatorSet set = new AnimatorSet();
        set.setDuration(ANIMATION_DRUATION);
        set.playTogether(leftTranslationAnimator, rightTranslatioAnimation);
        set.setInterpolator(new AccelerateInterpolator());
        set.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                // 往外面跑
                // 切换颜色顺序  左边的给中间 中间的给右边  右边的给左边
                int mLeftViewColor = mLeftView.getColor();
                int mRightViewColor = mRightView.getColor();
                int mMiddleViewColor = mMiddleView.getColor();
                //切换三者颜色
                mLeftView.exchangeColor(mRightViewColor);
                mRightView.exchangeColor(mMiddleViewColor);
                mMiddleView.exchangeColor(mLeftViewColor);
                expendAnimation();
            }


        });
        set.start();

    }

    //获取圆
    private CircleView getCircleView(Context context) {
        CircleView circleView = new CircleView(context);
        LayoutParams params = new LayoutParams(dp2x(10), dp2x(10));
        params.addRule(CENTER_IN_PARENT);
        circleView.setLayoutParams(params);
        return circleView;
    }

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

    /**
     * 性能优化
     */
    @Override
    public void setVisibility(int visibility) {
        super.setVisibility(INVISIBLE);
        //清理所有动画
        mLeftView.clearAnimation();
        mRightView.clearAnimation();
        ViewGroup parent = (ViewGroup) getParent();
        if (parent != null) {
            parent.removeView(mLeftView);//父布局中移除当前view
            parent.removeView(mRightView);
            removeAllViews();//移除自己的
        }
        isStopAnimation = true;
    }
}