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)模仿微信下拉眼睛相关推荐
- 带你玩转自定义view系列
这些方法可以分成如下两个类别: View提供的获取坐标方法: **getTop(): **获取到的是View自身的顶边到其父布局顶边的距离 **getLeft(): **获取到的是View自身的左边到 ...
- Android 自定义view 实现点击 展示下拉选项效果
思路: 使用PopWindow ,里面布局为listview,点击展示PopWindow,点击其他区域或者选择完成时 关闭PopWindow~ 关键点: 1,实现头部视图(本文名为:pop_out_t ...
- 一篇文章带你走近Android自定义view
系列文章目录 一篇文章带你走近Android自定义view 文章目录 系列文章目录 前言 一.为什么要自定义view 二.先看看一个超级简单的自定义view(三个构造函数) 三.了解手机的坐标系 四. ...
- Android仿IOS解锁密码界面-自定义view系列(6)
Android仿IOS解锁密码界面-自定义view系列 功能简介 主要实现步骤-具体内容看github项目里的代码 xml相关属性设置 Android Studio 代码 Android技术生活交流 ...
- Android仿IOS滑动关机-自定义view系列(6)
Android仿IOS滑动关机-自定义view系列 功能简介 GIf演示 主要实现步骤-具体内容看github项目里的代码 Android技术生活交流 更多其他页面-自定义View-实用功能合集:点击 ...
- Android安卓仿IOS音量调节-自定义view系列(4)
Android安卓仿IOS音量调节-自定义view系列 功能简介 主要实现步骤 xml相关属性设置 java代码 Android技术生活交流 更多其他页面-自定义View-实用功能合集:点击查看 Gi ...
- 带新手玩转MVC——不讲道理就是干(下)
带新手玩转MVC--不讲道理就是干(下) 前言:废话不多说,直接开干 完整案例演示 案例代码 LoginServlet package servlet;import domain.User;impor ...
- android绘制心形_Android自定义View系列(一)——打造一个爱心进度条
写作原因:Android进阶过程中有一个绕不开的话题--自定义View.这一块是安卓程序员更好地实现功能自主化必须迈出的一步.下面这个系列博主将通过实现几个例子来认识安卓自定义View的方法.从自定义 ...
- 新手学自定义View系列(一)Demo
简述: 为什么要另写这篇Demo博客? 上篇博客最后给出了一个折线图的例子,记得当时是说下篇博客给出其源码,但是后来我又想了下,咱们既然是新手系列的自定义View,内容就需要做到详细,清楚和明白.如果 ...
最新文章
- 数据中心网络架构 — 云数据中心网络 — 新型叶脊二层网络架构
- 【Python入门】Python列表的11个方法全解
- 二叉树最近公共祖先相关题目(Leetcode题解-Python语言)
- 使用Java EE安全性和JBoss AS 7.x保护JSF应用程序的安全
- 编译型和解释型语言的区别
- ping命令linux软件包,linux下安装 ping 命令
- springcloud多租户实现原理-Saas多租户实现-以及几种方案_设计思路---springcloud工作笔记108
- Postman界面介绍及实例(转)
- oracle load data infile
- HttpClients调用restful接口get,post,put,delete接口工具类
- hashmap hash冲突怎么解决_对HashMap的思考及手写实现
- 关于我考研的这一年随记 —— 2022暨南大学电子信息计算机技术专业初试第三复试第一
- matlab怎设置静态变量,Matlab/Simulink中的静态变量和全局变量
- ele饿了么表单验证的校验提示突破v-if的限制
- 《Linux就是这种范儿》读后感
- VC6 VS2010 环境变量
- 2021.5.10-2021.5.16周报
- JavaDay29 CSS
- 40岁左右适合干个什么样的小生意?
- (23)语义分割--UNet
热门文章
- mysql物理删除索引_mysql创建索引,mysql索引优化,mysql索引创建删除
- pyscripter支持python什么版本_pyscripter 64位下载-pyscripter x64下载2.5.3 官方最新版-Python集成开发环境IDE西西软件下载...
- 2021中国最具创新力企业榜发布,50家企业上榜
- 可以几分钟快速对接支付宝APP支付和手机网站支付?
- 关掉win10电脑hyper-v虚拟机方法
- Flask教程(二十)flask-apscheduler
- 大学物理实验长度的测量实验报告_大学物理实验长度测量
- 机器学习之监督学习:分类
- 制作咖啡店的banner
- 10万一平米的北京房价是如何让清华天才陨落的?