先看效果
本项目实现起来大体上我们分三步讲解
【1】水面波动效果
实现代码
首先画出波浪线，通过通过贝塞尔曲线
<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（）提供一个默认的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>
然后画出了圆形，设置画笔，使得只显示两部分重叠的部分：
此处可参考上一篇：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】实现点击加速球，加速效果
先要添加点击事件<喎?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处理改变当前水面高度，
我们先默认初始高度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>