先看效果
本項目實現(xiàn)起來大體上我們分三步講解
【1】水面波動效果
實現(xiàn)代碼
首先畫出波浪線，通過通過貝塞爾曲線
<code class="hljs" matlab="">for (int i = 0; i < 20; i++) { path.rQuadTo(20, size, 40, 0); path.rQuadTo(20, -size, 40, 0); }</code>
然后讓曲線動起來
<code class="hljs" java="">private Handler handler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); switch (msg.what) { case 0x23: count += 5; if (count >= 80) { count = 0; } if (isAdd) { size++; if (size > 10) { isAdd = false; } } else { size--; if (size <= -10) { isAdd = true; } } invalidate(); sendEmptyMessageDelayed(0x23, 100); break;</code>【2】顯示加速球圓形
這一步需要用到的知識比較多
1我來給講解一下，畫布的問題；首先onDraw（）提供一個默認(rèn)的canvas；我們可以想象一下，這塊畫布就是手機屏幕，我們可以使用這塊畫布畫背景色；
2我們的球形加速球，是通過兩層圖重疊取得重疊的部分
示意圖如下
我們先畫出了矩形，代碼如下
<code avrasm="" class="hljs">path.reset(); path.moveTo(600, courentProgress); path.lineTo(600, 600); path.lineTo(count, 600); path.lineTo(count, courentProgress);</code>
然后畫出了圓形，設(shè)置畫筆，使得只顯示兩部分重疊的部分：
此處可參考上一篇：http://blog.csdn.net/taoolee/article/details/48527917
<code avrasm="" class="hljs">PorterDuffXfermode mode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP); paintRect.setXfermode(mode);</code>
這樣顯示的效果就是
【3】實現(xiàn)點擊加速球，加速效果
先要添加點擊事件<喎?http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;">private float x; private float y; @Override public boolean onTouchEvent(MotionEvent event) { x = event.getX(); y = event.getY(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: if (x>250&&x<550&&y>250&&y<550) { handler.sendEmptyMessage(0x11); return true; } } return super.onTouchEvent(event); }
然后使用handler處理改變當(dāng)前水面高度，
我們先默認(rèn)初始高度75%
<code class="hljs" java="">private int courentProgress=325; private Handler handler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); switch (msg.what) { case 0x11: if(courentProgress<550){ courentProgress+=5; sendEmptyMessageDelayed(0x11,50); invalidate(); } break; } } };</code>最后附上源代碼
<code class="hljs" java="">/** * Created by Administrator on 2015/9/17. */public class MyPathView extends View { private Path path; private Paint paintRect; private Paint paintBubble; private Paint paintWave; private int width; private int height; private int count = 0; private int size = 0; private int courentProgress=325; private boolean isAdd = true; private Handler handler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); switch (msg.what) { case 0x23: count += 5; if (count >= 80) { count = 0; } if (isAdd) { size++; if (size > 10) { isAdd = false; } } else { size--; if (size <= -10) { isAdd = true; } } invalidate(); sendEmptyMessageDelayed(0x23, 100); break; case 0x11: if(courentProgress<550){ courentProgress+=5; sendEmptyMessageDelayed(0x11,50); invalidate(); } break; } } }; public MyPathView(Context context, AttributeSet attrs) { super(context, attrs); paintWave = new Paint(); paintWave.setStyle(Paint.Style.STROKE); paintWave.setTextSize(70); paintRect = new Paint(); paintRect.setStrokeWidth(5); paintRect.setColor(Color.rgb(251,122,108)); PorterDuffXfermode mode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP); paintRect.setStyle(Paint.Style.FILL); paintRect.setXfermode(mode); paintBubble = new Paint(); paintBubble.setStyle(Paint.Style.FILL); paintBubble.setColor(Color.rgb(86,111,141)); path = new Path(); handler.sendEmptyMessageDelayed(0x23, 1000); } private Bitmap bitmapBubble; private Canvas canvasBubble; protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec); height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec); setMeasuredDimension(width, height); bitmapBubble = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); canvasBubble = new Canvas(bitmapBubble); } private float x; private float y; @Override public boolean onTouchEvent(MotionEvent event) { x = event.getX(); y = event.getY(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: if (x>250&&x<550&&y>250&&y<550) { handler.sendEmptyMessage(0x11); return true; } } return super.onTouchEvent(event); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawColor(Color.rgb( 246, 235, 188)); canvasBubble.drawCircle(400, 400, 150, paintBubble); path.reset(); path.moveTo(600, courentProgress); path.lineTo(600, 600); path.lineTo(count, 600); path.lineTo(count, courentProgress); for (int i = 0; i < 20; i++) { path.rQuadTo(20, size, 40, 0); path.rQuadTo(20, -size, 40, 0); } path.close(); canvasBubble.drawPath(path, paintRect); canvas.drawBitmap(bitmapBubble, 0, 0, null); canvas.drawText((550-courentProgress)/3+%,400,400,paintWave); }}</code>