先看效果
本项目实现起来大体上我们分三步讲解
【1】水面波动效果
实现代码
首先画出波浪线，通过通过贝塞尔曲线 for (int i = 0; i < 20; i++) {path.rQuadTo(20, size, 40, 0);path.rQuadTo(20, -size, 40, 0);}
然后让曲线动起来
private Handler handler = new Handler() {(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;【2】显示加速球圆形
这一步需要用到的知识比较多
1我来给讲解一下，画布的问题；首先onDraw（）提供一个默认的canvas；我们可以想象一下，这块画布就是手机屏幕，我们可以使用这块画布画背景色； 2我们的球形加速球，是通过两层图重叠取得重叠的部分 示意图如下
我们先画出了矩形，代码如下
path.reset();path.moveTo(600, courentProgress);path.lineTo(600, 600);path.lineTo(count, 600);path.lineTo(count, courentProgress);
然后画出了圆形，设置画笔，使得只显示两部分重叠的部分： 此处可参考上一篇：
PorterDuffXfermode mode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);paintRect.setXfermode(mode);
这样显示的效果就是
【3】实现点击加速球，加速效果 先要添加点击事件
private float x;private float y;@Overridepublic 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%
private int courentProgress=325;private Handler handler = new Handler() {(Message msg) {super.handleMessage(msg);switch (msg.what) {case 0x11:if(courentProgress<550){courentProgress+=5;sendEmptyMessageDelayed(0x11,50);invalidate();}break;}}};最后附上源代码/** * Created by Administrator on 2015/9/17. */{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() {(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;(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;(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);}(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);}}
，感受不同地域不一样的节奏与表象。
