仿手机管家加速球的自定义控件

之前说想要写一篇自动补全的EditText,不过后来随便写了一下,发现并没有想象中的简单,加上最近项目进度一直在赶,没时间认认真真捣鼓了,看到腾讯的手机管家加速球还不错,而且实现起来逻辑不是很复杂,所以这周就尝试如何实现加速球这种动画效果。

先来看看手机管家的加速球是什么样的

手机管家上的效果图

功能需求

这个控件大概需要实现三个部分的功能

1、在最底层画出一个圆

2、画出底层的小波浪和外层的大波浪(一开始我以为这两个波浪是分开的,后来发现合在一起更加好实现)

3.添加横向的动画,设置一个修改水位的纵向动画

4、我发现手机管家在水位下降之后没有根据当前的手机内存耗用情况把刷新水位,虽然我不是很理解,不过我认为应该加上的,添加一个回调。

知识点,也是难点

首先肯定是先定义一个BallView继承自View类了,接着重写onDraw方法。那么在重写onDraw方法之前,先介绍一下今天涉及到canvas的一些知识,但是都不会扩展来讲,因为要学好自定义控件,以下的东西都必须要掌握的:

贝塞尔曲线:关于贝塞尔曲线,我想学习过自定义控件的人都会接触到,因为它对于绘制曲线非常的强大,而我们大多数情景下绘制的东西都不是标准的圆或者矩形。

setXfermode():这是Paint里面的一个API,设置图片相交模式,对于多图层叠的时候,这个函数就会非常的强大,虽然设置起来很简单,但是要理解记住每一种模式也是相当困难的。

离屏绘制:涉及到Canvas的图层概念,虽然简单来说只有两行代码。

接下来就是正文部分了,因为这个功能很简单,而且对于尝试自定义控件的朋友会觉得蛮有意思的吧,所以我就按着我自己的思路直接从代码上来讲解如何实现这个动画效果了:

1、我们知道画笔对象其实就那么几个,就好比如我们画画的时候,首先需要准备好纸画笔颜料这些零零碎碎的东西,纸就是系统提供给我们的Canvas对象了,而至于画笔我们需要提前准备好:

不知道大家有没有用过TakeColor这个取色工具,上面的颜色就是用这个工具取得,以后要是我们独立开发的时候看到好的颜色搭配,可以直接用这个工具就知道颜色的RGB值了。

2、接下来就是今天想重点讲解的部分了,我们都知道贝塞尔曲线能够画出波浪形的圆滑的路径,但是要怎么滑还是需要斟酌斟酌,像手机管家中的加速球的波浪是有内外两层的,这样给人一种立体感,用户体验也就蹭蹭上去了。毕竟,用户体验就是用户使用过程中的感觉吗,细节很重要啊。接下来就看看这个自定义控件是如何进行绘图的吧:

onDraw:

在这里可以看到一共调用了canvas的两次draw方法,所画即所得:

画圆

必须加一个背景,不然图层混合后,两个图层重合部分的透明区域都会消失,重叠之后就看不到波浪的圆背景了。如下图所示:

画内层小波浪

     小波浪的路径其实是有讲究的,要是小波浪跟大波浪的路径方向是一样的,即从左到右,你就会发现压根看不出波浪流动的效果了,因为大小波浪都往同一个方向匀速地运动,那么他们相对是静止的。这个时候我想有两个方法,第一个方法是设置两个速率不一样的属性动画,那么我们就可以看到这两个动画相对是

运动

的。不过这里我用的是第二个方法,用的是同一个属性动画,但是大波浪是从左到右,而小波浪是从右到左的。这样不管速率问题,他们相互都是

运动

的。最后稍微添加一点水平方向的偏移量,设置rQuad的第一个参数,也就是转点的坐标均小于大波浪的转点坐标,就可以实现前浪(大波浪)比后浪(小波浪)更大的效果。PS:水平偏移量跟波浪的波峰我想是有关联的,不过具体如何这里就无从考究了。

这里再说一下具体的路径是怎么考虑的。我们绘制组件的时候,最困扰我们的可能是Path路径的创建,有了路径,剩下的就只是上色还有两个图层重叠时如何显示了。

mWaveLength:一个波浪(有起有伏)的长度,如果波浪长度少于控件的宽度,那么控件就会显示多个波浪,在这里这个值设置为控件的实际宽度,而转点的x坐标决定波峰在波浪中的水平位置。

d_value:动画在水平方向上的偏移量,因为这个偏移量是波浪的一个周期,所以for循环的起点是-mWaveLength+getX(),这样不管d_value怎么改变,波浪不会"断"掉,那么终点为什么设置为getWidth+mWaveLength呢,这里纯粹是逻辑上视图更加连贯而已。

画外层大波浪

这里大致上和获取小波浪是一样的,不一样的地方是,起始点moveTo的坐标,大波浪的起点是从左到右的,水位线startPosition就是我们设定的值。

该画的部分都已经画完了,接下来就是动画部分了。动画部分难度不大,动画的速度就是波浪流动的速度,所以duration不要设置的太小。总体来说都不复杂,只是要实现流动很自然的效果,就要用点心了。直接贴代码了

水平方向的动画(波浪流动)

竖直方向的动画(设置水位,水位上升下降的动画)

整个控件制作过程就是这样了,难度要比EditText简单很多很多,当然跟那些很炫很炫的控件是没法比的,尤其是跟数据绑定在一起的控件,至于手机管家上的那个小飞机,pressed的时候飞机放大,点击的时候飞机上升,水位下降,然后飞机再从底下升起来,这些实现起来都不难,但是这些效果这里不扩展了。

所以最终实现出来的效果是

以后有空再写一篇图层混合模式还有View事件的分发消费拦截,感觉像我这样的新手学习这两个东西的时候总是不得要领!得先把狠话搁下了督促一下自己才行-_-||,妈的最近压力好大,债台高筑啊

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容