android自定义组件（手机加速球+水面波动效果）

先看效果

本项目实现起来大体上我们分三步讲解

【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() {@Overridepublic 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;

【2】显示加速球圆形

这一步需要用到的知识比较多

1我来给讲解一下，画布的问题；首先onDraw（）提供一个默认的canvas；我们可以想象一下，这块画布就是手机屏幕，我们可以使用这块画布画背景色；
2我们的球形加速球，是通过两层图重叠取得重叠的部分
示意图如下

我们先画出了矩形，代码如下

  path.reset();path.moveTo(600, courentProgress);path.lineTo(600, 600);path.lineTo(count, 600);path.lineTo(count, courentProgress);

然后画出了圆形，设置画笔，使得只显示两部分重叠的部分：
此处可参考上一篇：http://blog.csdn.net/taoolee/article/details/48527917

  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() {@Overridepublic void handleMessage(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.*/
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() {@Overridepublic 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;@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);}@Overrideprotected 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);}
}

android自定义组件（手机加速球+水面波动效果）相关推荐

mysql抽屉图标_React Native自定义组件实现抽屉菜单控件效果
一.需求分析原生开发中,自定义View可谓是屡见不鲜的事情,往往系统的控件总不能满足现实的需求.五花八门的产品设计需要我们做出不同的View.关于自定义View的内容网上已经有很多的博文,本篇博客要 ...
Android 抖音爱心动画,Android自定义View实现抖音飘动红心效果
本文实例为大家分享了Android自定义View实现抖音飘动红心效果的具体代码,供大家参考,具体内容如下自定义View--抖音飘动红心效果展示动画效果使用自定义view完成红心飘动效果 Vie ...
Android自定义view--SurfaceView实现墨迹天气的风车效果
Android自定义view--SurfaceView实现墨迹天气的风车效果 SurfaceView也是继承自View,它和我们以前接触到的View(Button.TextView等)最大的不同是,S ...
android 自定义红心,Android自定义View实现抖音飘动红心效果
本文实例为大家分享了Android自定义View实现抖音飘动红心效果的具体代码,供大家参考,具体内容如下自定义View--抖音飘动红心效果展示动画效果使用自定义view完成红心飘动效果 Vie ...
android 自定义透明等待 dialog,Android自定义Dialog内部透明、外部遮罩效果
Android自定义Dialog内部透明.外部遮罩效果发布时间:2020-09-09 03:01:41 来源:脚本之家阅读:117 作者:zst1303939801 本文实例为大家分享了Andro ...
Android 自定义viewpage + videoview 实现竖屏视频播放效果
Android 自定义viewpage + videoview 实现竖屏视频播放效果效果图实现步骤前提概要自定义 viewpage 自定义 videoview 主逻辑代码效果图由于用的是v ...
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果由于最近一段时间真的是太忙了,没有顾上即使更新博客,还请粉丝们见谅,最近要实现这样一个效果,这个效果跟淘宝二层楼和新 ...
android自定义radiogroup,Android 自定义View实现任意布局的RadioGroup效果
前言 RadioGroup是继承LinearLayout,只支持横向或者竖向两种布局.所以在某些情况,比如多行多列布局,RadioGroup就并不适用 . 本篇文章通过继承RelativeLayout ...
android 自定义加载动画效果,Android自定义View实现loading动画加载效果
项目开发中对Loading的处理是比较常见的,安卓系统提供的不太美观,引入第三发又太麻烦,这时候自己定义View来实现这个效果,并且进行封装抽取给项目提供统一的loading样式是最好的解决方式了. ...
android代码实现手机加速功能,Android自定义View实现内存清理加速球效果
Android自定义View实现内存清理加速球效果发布时间:2020-09-21 22:21:57 来源:脚本之家阅读:105 作者:程序员的自我反思前言用过猎豹清理大师或者相类似的安全软件, ...