为你的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

更多

如果你有好的技术文章想和大家分享，欢迎向我的公众号投稿，投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号：