自定义SurfaceView实现跳动的泡泡

先看下效果图

QQ20170410-214631-HD.gif

不记得从哪里看到的这样的效果了，今天想起来了，觉得挺好玩就随便实现了一下。

大致的步骤如下：
1、继承SurfaceView 并实现SurfaceHolder.Callback,和Runnable接口。至于为什么使用SurfaceView而不用View，大家可以读一下下面这个文章：http://blog.csdn.net/tianfeng701/article/details/7601627

2、画四个球球（很简单吧~）透明度随喜好调一下。

3、四个球，那么以圆心为起点，定义四个轨迹线。（轨迹线方向随意）

4、通过子线程不断移动小球（移动球球圆心）

代码是最好的老师，我就不啰嗦了。

public class BreatheView extends SurfaceView implements SurfaceHolder.Callback, Runnable {

    /**
     * 是否处于绘制状态
     */
    private boolean mIsDrawing;
    /**
     * 帮助类
     */
    private SurfaceHolder mHolder;
    /**
     * 画布
     */
    private Canvas mCanvas;
    /**
     * 画笔
     */
    private Paint mPaint;
    private Paint mPaintTwo;
    private Paint mPaintThree;
    private Paint mPaintFour;
    /**
     * 宽高
     */
    private float width;
    private float height;

    private final int ALPHA = 50;
    private final int SLEEP_TIME = 100;
    /**
     * 坐标
     */
    PointF oneStartPoint;
    PointF twoStartPoint;
    PointF threeStartPoint;
    PointF fourStartPoint;
    /**
     * 判断是否绘制
     */
    boolean isDraw = true;
    boolean isDrawTwo = true;
    boolean isDrawThree = true;
    boolean isDrawFour = true;

    public BreatheView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView();
    }

    public BreatheView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public BreatheView(Context context) {
        super(context);
        initView();
    }

    private void initView() {
        mHolder = getHolder();
        mHolder.addCallback(this);
        setFocusable(true);
        setFocusableInTouchMode(true);
        this.setKeepScreenOn(true);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.CYAN);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAlpha(ALPHA);

        mPaintTwo = new Paint();
        mPaintTwo.setAntiAlias(true);
        mPaintTwo.setColor(Color.BLUE);
        mPaintTwo.setStyle(Paint.Style.FILL);
        mPaintTwo.setAlpha(ALPHA);

        mPaintThree = new Paint(mPaint);
        mPaintThree.setAntiAlias(true);
        mPaintThree.setColor(Color.RED);
        mPaintThree.setStyle(Paint.Style.FILL);
        mPaintThree.setAlpha(ALPHA);

        mPaintFour = new Paint();
        mPaintFour.setAntiAlias(true);
        mPaintFour.setColor(Color.GREEN);
        mPaintFour.setStyle(Paint.Style.FILL);
        mPaintFour.setAlpha(ALPHA);

        oneStartPoint = new PointF(300, 220);
        twoStartPoint = new PointF(20, 250);
        threeStartPoint = new PointF(500, 90);
        fourStartPoint = new PointF(0, 0);
    }

    private Canvas getCanvas(){
        return mCanvas;
    }

    private void setCanvas(Canvas aCanvas){
        this.mCanvas = aCanvas;
    }

    @Override
    public void run() {
        long start = System.currentTimeMillis();
        while (mIsDrawing) {
            try {
                Thread.sleep(SLEEP_TIME);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            draw();
        }
        long end = System.currentTimeMillis();
        if (end - start < SLEEP_TIME) {
            try {
                Thread.sleep(SLEEP_TIME - (end - start));
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    @Override
    public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
    }

    @Override
    public void surfaceCreated(SurfaceHolder arg0) {
        mIsDrawing = true;
        new Thread(this).start();
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder arg0) {
        mIsDrawing = false;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        height = h;
    }

    private synchronized void draw() {
        try {
            lockCanvas();
            drawOne();
            drawTwo();
            drawThree();
            drawFour();
            unlockCanvas();
        } catch (Exception e) {
        }
    }

    private void drawOne() {
        getCanvas().drawColor(Color.WHITE);
        if (oneStartPoint.x == 300 || oneStartPoint.y == 220) {
            isDraw = true;
        } else if (oneStartPoint.x == 330 || oneStartPoint.y == 250) {
            isDraw = false;
        }
        if (isDraw) {
            getCanvas().drawCircle(oneStartPoint.x++, oneStartPoint.y++, 180, mPaint);
        } else {
            getCanvas().drawCircle(oneStartPoint.x--, oneStartPoint.y--, 180, mPaint);
        }
    }

    private void lockCanvas() {
        setCanvas(mHolder.lockCanvas());
    }

    private void unlockCanvas() {
        if (getCanvas() != null) {
            mHolder.unlockCanvasAndPost(getCanvas());
        }
    }

    private void drawFour() {
        //第四个泡泡
        if (fourStartPoint.x == 0 || fourStartPoint.y == 0) {
            isDrawFour = true;
        } else if (fourStartPoint.x == 20 || fourStartPoint.y == 20) {
            isDrawFour = false;
        }
        if (isDrawFour) {
            getCanvas().drawCircle(fourStartPoint.x++, fourStartPoint.y++, 220, mPaintFour);
        } else {
            getCanvas().drawCircle(fourStartPoint.x--, fourStartPoint.y--, 220, mPaintFour);
        }
    }

    private void drawThree() {
        //第三个泡泡
        if (threeStartPoint.x == 500 || threeStartPoint.y == 200) {
            isDrawThree = true;
        } else if (threeStartPoint.x == 520 || threeStartPoint.y == 520) {
            isDrawThree = false;
        }
        if (isDrawThree) {
            getCanvas().drawCircle(threeStartPoint.x++, threeStartPoint.y++, 220, mPaintThree);
        } else {
            getCanvas().drawCircle(threeStartPoint.x--, threeStartPoint.y--, 220, mPaintThree);
        }
    }

    private void drawTwo() {
        //第二个泡泡
        if (twoStartPoint.x == 20 || twoStartPoint.y == 250) {
            isDrawTwo = true;
        } else if (twoStartPoint.x == 35 || twoStartPoint.y == 265) {
            isDrawTwo = false;
        }
        if (isDrawTwo) {
            getCanvas().drawCircle(twoStartPoint.x++, twoStartPoint.y++, 240, mPaintTwo);
        } else {
            getCanvas().drawCircle(twoStartPoint.x--, twoStartPoint.y--, 240, mPaintTwo);
        }
    }
}

github地址：https://github.com/519401502/-SurfaceView-

笔者能力有限，不足之处欢迎指出！