先看下效果图
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-
笔者能力有限，不足之处欢迎指出！
