为你的EditText添加一个烟花效果
近日,阿里移动事业群总裁兼高德集团总裁俞永福宣布,高德地图手机客户端的每日活跃数据已经超越百度地图,成为行业内排名第一的手机地图应用。并称出于对数据的自信,已经允许另一家第三方数据公司QuestMobile进行嵌入代码监测验证,但由于代码嵌入监测需要周期,将会在不久后公布监测情况。
而百度官方微博立马反击:你要战,我便战。跑个分出来给你看!排名不是光靠吹的,第三方的数据早已啪啪打脸。
高德地图与百度地图的撕逼口水战,实际上也是阿里集团与百度集团之间的博弈。
作者简介今天给大家带来 眼热 的投稿,分享了自己是如何实现在文字输入时产生烟花效果的,同时祝大家天天有精彩!
眼热 的博客地址:
http://www.jianshu.com/users/a07a43961696
效果预览
一个绚丽易用的输入框烟花效果,模仿网页360搜索框。
几个关键点
爆炸的位置:光标所在位置。
火花飞出的方向:我采用随机方向,0~180度,即只向上。
发射速度:每个火花发射的速度是不一样的,在一定范围内随机。发射后速度衰减。
风:风速固定,方向根据文字的增长或减少决定。
重力:烟花飞出的应该是一条抛物线。
火花的颜色:单次次发射的所有火花颜色一样,每次从颜色库随机挑选。
什么时候发射烟花:监听edittext,当文字改变时,获取文字数量的变化以确定风的方向。获取光标的位置确定爆炸的位置。
难点
光标的位置;反射;没有具体的方法确定坐标,要自己计算。
代码实现
库里包含三个类:
Element(int color, Double direction, float speed)
烟花的小火花,存放颜色,飞行方向,飞行速度这三个变量。
Firework(Location location, int windDirection)
烟花,控制整个烟花的动画,计算小火花的位置并绘制小火花。
FireworkView()
View类,监听 EditText 中文字的改变,并获取光标的位置。在该位置生成 Firework。
首先我们看看FireworkView的使用方法:
mFireworkView = (FireworkView) findViewById(R.id.fire_work);
mFireworkView.bindEditText(mEditText);
是不是很简单,只要绑定需要呈现烟花效果的EditText就行了。
在 bindEditText() 中我们监听 EditText。当文字有改变时,首先计算文字是增多还是减少,以确定风的方向。然后 getCursorCoordinate() 获得光标的坐标。最后就可以发射烟花了。
用 LinkedList<Firework> 保存正在动画的 Firework,如果里面 Firework 的数量不为0就不断地 重绘view 以实现动画,为0时不重绘。
用一个 ValueAnimator 实现动画。由于发射速度是衰减的,所以需要设定一个 new AccelerateInterpolator(2)。如果对 Interpolator 不熟悉可以看:
http://my.oschina.net/banxi/blog/135633
最后只要不断地绘制小火花就行了。
获得光标位置
涉及到反射,需要自己查看 TextView(EditText的父类是TextView)的源码并理清绘制过程。下面注释说的很清楚了,这里就不再反复说明。
如果想要下载上述效果的源码,可以访问如下地址:
更多https://github.com/covetcode/EditTextFirework-Demo
如果你有好的技术文章想和大家分享,欢迎向我的公众号投稿,投稿具体细节请在公众号主页点击“投稿”菜单查看。
欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号: