仿QQ邮箱加载动画

效果图

效果图

代码实现

/**
 * 创建时间: 2018/9/20
 *
 * @author Liuzj
 * @description 仿QQ邮箱下拉刷新动画
 */
public class LoadingView extends View {

    /**
     * 小球数
     */
    private List<Paint> mPaints;

    /**
     * 默认小球数
     */
    private static int DEFAULT_NUM = 3;

    /**
     * 小球画笔
     */
    private Paint mPaint;
    /**
     * 默认小球半径
     */
    private float defaultRadius = 12f;
    /**
     * 默认小球颜色
     */
    private int[] ballColors = {Color.RED, Color.YELLOW, Color.BLUE};

    /**
     * 小球起点位置
     */
    private float x = -80f;
    ;

    public LoadingView(Context context) {
        super(context);
        init();
    }

    public LoadingView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public LoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }


    private void init() {
        mPaints = new ArrayList<>();
        for (int i = 0; i < DEFAULT_NUM; i++) {
            mPaint = new Paint();
            mPaint.setColor(ballColors[i]);
            mPaints.add(mPaint);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < mPaints.size(); i++) {
            //控制小球在80和-80之间运动
            x += 40f;
            if (x == 80f) {
                x = -80f;
            }
            //控制小球大小在12至16之间徘徊
            defaultRadius += 2f;
            if (defaultRadius > 16f) {
                defaultRadius = 12f;
            }
            canvas.drawCircle(getWidth() / 2 + x, getHeight() / 2, defaultRadius, mPaints.get(i));
        }
        postInvalidateDelayed(250);
    }
}

后续

先初步实现效果后续再完善吧，谢谢观看