wing带你玩转自定义view系列(3)模仿微信下拉眼睛
发现了爱神的自定义view系列,我只想说一个字:凸(艹皿艹 ) !!相见恨晚啊,早看到就不会走这么多弯路了
另外相比之下我这完全是小儿科。。所以不说了,这篇是本系列完结篇....我要从零开始跟随爱哥脚步去学自定义view了:爱哥自定义view专题
然后要说的就是 之前的博客都犯了很严重的错误,那就是不要在onDraw里new东西,不要在onDraw里new东西,不要在onDraw里new东西。重要的话说三遍。
上一篇介绍了qq未读消息提醒去除效果的简化实现,不知道小伙伴们掌握的怎么样了。
转载请注明出处:http://write.blog.csdn.net/postedit/50503858
今天带给大家一个很熟悉的东西,当当当当,就是微信下拉眼睛的实现了。 先看效果图:
自评相似度 80% 哈哈= = 。
用我们一贯的方法来剖析这个view。
首先 从内到外:
1.内部其实是两段弧,只不过在改变画笔的宽度。
2.中间是个圆,一直在改变透明度。
3.最外面是两条贝塞尔曲线(重点加难点)。
首先来画静态的眼睛。按照顺序,相信你已经轻车熟路:
mPaint.setStrokeWidth(10);
canvas.drawArc(mRectF, 180, 10, false, mPaint);
canvas.drawArc(mRectF, 205, 25, false, mPaint); //画圆圈
mPaint.setStrokeWidth(2);
canvas.drawCircle(225, 225, 40, mPaint);
canvas.drawPath(mPath, mPaint);
这样就画出了眼珠的静态部分,然后根据我们的percent大法,分三个阶段:1.弧变粗 2.圆圈透明度改变 3.贝塞尔区限 起点,终点,辅助点改变。
那么将这三个阶段用同一个percent来控制 0-33为1阶段 33-66为2阶段 66-100为3阶段:
意外收获:当setStrokeWidth 为0时,实际上不是0.
if(mPercent<33) {//如果为1阶段,改变画笔的大小 float stroke = mPercent/3f; //用0-33 来控制0-10的变化 计算的方法
Log.e("wing","st" + stroke);
if(stroke == 0.0){ //如果为0 则不绘制,这里用背景色解决
mPaint.setColor(Color.BLACK);
}else {
mPaint.setColor(Color.GRAY);
}
mPaint.setStrokeWidth(stroke);
canvas.drawArc(mRectF, 180, 10, false, mPaint); canvas.drawArc(mRectF, 205, 25, false, mPaint);
}else if(mPercent < 66) { //如果为2阶段 则画静态的1阶段 //画内部
mPaint.setStrokeWidth(10);
canvas.drawArc(mRectF, 180, 10, false, mPaint);
canvas.drawArc(mRectF, 205, 25, false, mPaint); //画圆圈
mPaint.setStrokeWidth(2);
int alpha = (int) ((mPercent - 33f) / 33f * 255);//根据百分比去动态控制透明度的值、 mPaint.setAlpha(alpha);
canvas.drawCircle(225, 225, 40, mPaint); }else
以上都没什么好说的,现在来说最难的第三阶段(搞了我好久)
第三阶段全局用一个percent参数,由 66-100演变来的
float percent = (mPercent-66)*3f/100;
然后观察曲线的动态变化,是从顶点开始像两侧绘制、这时候很容易想到 根据百分比动态改变起点,终点的值,代码如下:
float mStartX = 225 -(225-115)*percent;
float mEndX = 225+ (335-225)*percent; mTopPath.moveTo(mStartX ,175+(225-175)*percent);
// Log.e("wing","start:"+(225 -(225-145)*percent) + " y:"+125+(225-125)*percent);
mTopPath.quadTo(225, 175, mEndX, 175+(225-175)*percent ); canvas.drawPath(mTopPath, mPaint);
然后你会惊奇的发现如下效果:
这是因为只改变了起终点,并没有改变辅助点的Y轴。那么辅助点到底应该怎么去改变呢,来看一张图:
根据之前在 模仿360内存清理效果的研究里发现, 在辅助点x为线段一半的情况下, 弧的切点y轴也为辅助点y的一半。 所以得出 辅助点的Y变化应为:
175-50*percent
然后来改写贝塞尔曲线绘制代码:
float mStartX = 225 -(225-115)*percent;//贝塞尔区限的开始x坐标
float mEndX = 225+ (335-225)*percent;//贝塞尔区限的结束x坐标 mTopPath.moveTo(mStartX ,175+(225-175)*percent);
// Log.e("wing","start:"+(225 -(225-145)*percent) + " y:"+125+(225-125)*percent);
mTopPath.quadTo(225, 175-50*percent, mEndX, 175+(225-175)*percent );//辅助点的Y坐标动态改变 canvas.drawPath(mTopPath, mPaint);
mTopPath.reset();
//
// //画静态下边线
//// mPath.moveTo(145, 225);
//// mPath.quadTo(225, 325, 305, 225);
//// canvas.drawPath(mPath, mPaint);
//
mPath.moveTo(mStartX ,275-(275-225)*percent);
mPath.quadTo(225, 275+50*percent, mEndX , 275-(275-225)*percent );
canvas.drawPath(mPath,mPaint); mPath.reset();
最后 给他一个setPercent方法:
public void setPercent(int percent){
mPercent = percent;
invalidate();
}
然后在MainActivity内 用seekbar动态改变他的percent值 即可达到我们想要的效果。
本篇难度较大,请读者动手认真练习,文中坐标可根据个人喜好改变。
本项目地址:点击打开链接 求star
wing带你玩转自定义view系列(3)模仿微信下拉眼睛的更多相关文章
- wing带你玩转自定义view系列(2) 简单模仿qq未读消息去除效果
上一篇介绍了贝塞尔曲线的简单应用 仿360内存清理效果 这一篇带来一个 两条贝塞尔曲线的应用 : 仿qq未读消息去除效果. 转载请注明出处:http://blog.csdn.net/wingicho ...
- wing带你玩转自定义view系列(1) 仿360内存清理效果
本篇是接自 手把手带你做自定义view系列 宗旨都是一样,带大家一起来研究自定义view的实现,与其不同的是本系列省去了简单的坐标之类的讲解,重点在实现思路,用简洁明了的文章,来与大家一同一步步学习. ...
- 自定义View系列教程05--示例分析
站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Android多分辨率适配框架(3)- 使用指南 自定 ...
- 自定义View系列教程04--Draw源码分析及其实践
深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...
- 自定义View系列教程01--常用工具介绍
站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Android多分辨率适配框架(3)- 使用指南 自定 ...
- 自定义View系列教程08--滑动冲突的产生及其处理
深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...
- 自定义View系列教程07--详解ViewGroup分发Touch事件
深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...
- 自定义View系列教程06--详解View的Touch事件处理
深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...
- 自定义View系列教程03--onLayout源码详尽分析
深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...
随机推荐
- Azure AI 服务之语音识别
笔者在前文<Azure AI 服务之文本翻译>中简单介绍了 Azure 认知服务中的文本翻译 API,通过这些简单的 REST API 调用就可以轻松地进行机器翻译.如果能在程序中简单的集 ...
- 微信小程序基础之在微信上显示和体验小程序?
随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小 ...
- SimpleDateFormat中parse和format的区别
parse()返回的是一个Date类型数据,format返回的是一个StringBuffer类型的数据 //SimpleDateFormat中的parse方法可以 //把String型的字符串转换成特 ...
- Dubbo框架应用之(二)--服务治理
Dubbo服务治理全貌图 当我们现有ITOO平台系统的业务随着用户的逐渐增大,设计的业务越来越广,系统会异常的复杂,在大规模服务之前,我们可以采用的是RMI或Hessian等工具,暴露和引用远程服务, ...
- 2017京东校招面试回忆(已成功拿到offer)
一面 24日 晚上5:30-6:40 1 先说自己熟悉的领域 2 list的实现有什么? arraylist1.6 1.7区别 底层 linkedlist 底层是怎么实现的 单向还是双向 ...
- MT8127:如何让system分区可读写(MTK安卓6.0)
Android 系统默认情况下,system 分区是只读 mount 的,因为无法进行往里写数据的,可 以用 adb 命令 adb remount 重新 mount 一下. 也可以通过在板子上,输入以 ...
- Unity角色残影特效
残影特效在网上有很多例子,比如这个,我参考着自己整合了一下,算是整合了一个比较完整且特别简单易用的出来,只需要一个脚本挂上去无需任何设定就能用. 这里只针对SkinnedMeshRenderer的网格 ...
- Android使用HttpClient请求服务器代码优化版
首先,我在前面的两篇博文中介绍了在Android中,除了使用java.net包下HttpUrlConnection的API访问HTTP服务之外,我们还可以换一种途径去完成工作.Android SDK附 ...
- Dynamics CRM 通过PowerShell启用AllowDeclarativeWorkflows即自定义XAML WorkFlows
CRM的工作流即workflow,不了解的人乍听之下以为是审批流,其实不是的,CRM本身是不带审批功能的,要实现审批必须要第三方的工作流引擎的配合,当然你也可以自己开发. 工作流刚开始出现的时候只有异 ...
- EBS采购(PO)模块常用表
select * from po_requisition_headers_all 请求头 select * from po_requisition_lines_all 请求行 select * ...