先看下效果圖
QQ20170410-214631-HD.gif
不記得從哪里看到的這樣的效果了，今天想起來(lái)了，覺得挺好玩就隨便實(shí)現(xiàn)了一下权埠。
大致的步驟如下：
1、繼承SurfaceView 并實(shí)現(xiàn)SurfaceHolder.Callback,和Runnable接口煎谍。至于為什么使用SurfaceView而不用View攘蔽，大家可以讀一下下面這個(gè)文章：http://blog.csdn.net/tianfeng701/article/details/7601627
2、畫四個(gè)球球（很簡(jiǎn)單吧~）透明度隨喜好調(diào)一下呐粘。
3满俗、四個(gè)球，那么以圓心為起點(diǎn)事哭，定義四個(gè)軌跡線漫雷。（軌跡線方向隨意）
4、通過子線程不斷移動(dòng)小球（移動(dòng)球球圓心）
代碼是最好的老師鳍咱，我就不啰嗦了降盹。
public class BreatheView extends SurfaceView implements SurfaceHolder.Callback, Runnable {
/**
* 是否處于繪制狀態(tài)
*/
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;
/**
* 坐標(biāo)
*/
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() {
//第四個(gè)泡泡
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() {
//第三個(gè)泡泡
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() {
//第二個(gè)泡泡
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-
筆者能力有限，不足之處歡迎指出谤辜！
