Android开发——为EditText添加烟花效果的实现
0. 前言
在Android开发中,很多酷炫的效果是增加用户粘性的必要条件。本篇介绍一个为EditText添加烟花效果的示例,效果展示如下。
1. 烟花效果需要关注的点
(1)爆炸的位置:光标所在位置。
(2)火花飞出的方向:这里采用随机方向,0~180度,即只向上。
(3)发射速度:每个火花发射的速度是不一样的,在一定范围内随机。发射后速度衰减。
(4)风速固定:风向根据文字的增长或减少决定。
(5)重力:烟花飞出的应该是一条抛物线。
(6)火花的颜色:单次次发射的所有火花颜色一样,每次发射颜色随机。
(7)什么时候发射烟花:监听EditText的文字改变,获取文字数量的变化以确定风的方向,还有获取光标的位置确定爆炸的位置。光标的位置没有具体的方法确定坐标,要通过反射自己计算。
2. 主要实现类
库里包含三个类:
Element(int color, Double direction, floatspeed)
烟花的小火花,存放颜色,飞行方向,飞行速度这三个变量。
Firework(Location location, int windDirection)
烟花,控制整个烟花的动画,计算小火花的位置并绘制小火花。
FireworkView()
View类,监听EditText中文字的改变,获取光标的位置,并在该位置生成Firework。
3. 一些实现细节
首先我们看看FireworkView的使用方法:
mFireworkView = (FireworkView) findViewById(R.id.fire_work);
mFireworkView.bindEditText(mEditText);
是不是很简单,只要绑定需要呈现烟花效果的EditText就行了。
//Class FireworkView:
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
} @Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
/**
*i为EditText里的字符数,i1为减少的字符数,i2为增加的字符数。
*关于launch的第三个参数,决定风的方向,1为吹向右边,-1为左边。
*/
float [] coordinate = getCursorCoordinate();
launch(coordinate[0], coordinate[1], i1 ==0?-1:1);
} @Override
public void afterTextChanged(Editable editable) {
} private void launch(float x, float y, int direction){
final Firework firework = new Firework(new Firework.Location(x, y), direction);
firework.addAnimationEndListener(new Firework.AnimationEndListener() {
@Override
public void onAnimationEnd() {
//动画结束后把firework移除,当没有firework时不会刷新页面
fireworks.remove(firework);
}
});
fireworks.add(firework);
firework.fire();
invalidate();
}
在bindEditText()中我们监听EditText。当文字有改变时,首先计算文字是增多还是减少,以确定风的方向。然后getCursorCoordinate()获得光标的坐标。最后就可以发射烟花了。
用LinkedList<Firework>保存正在动画的Firework,如果里面Firework的数量不为0就不断地重绘view以实现动画,为0时不重绘。
//Class Firework
public void fire(){
animator = ValueAnimator.ofFloat(1,0);
animator.setDuration(duration);
animator.setInterpolator(new AccelerateInterpolator(2));
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
animatorValue = (float) valueAnimator.getAnimatedValue();
//计算每个火花的位置
for (Element element : elements){
element.x = (float) (element.x
+ Math.cos(element.direction)*element.speed*animatorValue
+ windSpeed*windDirection);
element.y = (float) (element.y
- Math.sin(element.direction)*element.speed*animatorValue
+ gravity*(1-animatorValue));
}
}
});
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
listener.onAnimationEnd();
}
});
animator.start();
}
用一个ValueAnimator实现动画。由于发射速度是衰减的,所以animator = ValueAnimator.ofFloat(1,0);同时设定一个new AccelerateInterpolator(2),即加速度是增长的。如果对Interpolator不熟悉可以看http://my.oschina.net/banxi/blog/135633 。
Class Firework:
public void draw(Canvas canvas){
mPaint.setAlpha((int) (225*animatorValue));
for (Element element : elements){
canvas.drawCircle(location.x + element.x, location.y + element.y, elementSize, mPaint);
}
}
最后只要不断地绘制小火花就行了。
4. 光标位置的识别
如何获得光标的位置呢?涉及到反射,需要自己查看TextView(EditText的父类是TextView)的源码并理清绘制过程。下面注释说的很清楚了,这里就不再反复说明。
//Class FireworkView
private float[] getCursorCoordinate (){
/*
*以下通过反射获取光标cursor的坐标。
* 首先观察到TextView的invalidateCursorPath()方法,它是光标闪动时重绘的方法。
* 方法的最后有个invalidate(bounds.left + horizontalPadding, bounds.top + verticalPadding,
bounds.right + horizontalPadding, bounds.bottom + verticalPadding);
*即光标重绘的区域,由此可得到光标的坐标
* 具体的坐标在TextView.mEditor.mCursorDrawable里,获得Drawable之后用getBounds()得到Rect。
* 之后还要获得偏移量修正,通过以下三个方法获得:
* getVerticalOffset(),getCompoundPaddingLeft(),getExtendedPaddingTop()。
*
*/ int xOffset = 0;
int yOffset = 0;
Class<?> clazz = EditText.class;
clazz = clazz.getSuperclass();
try {
Field editor = clazz.getDeclaredField("mEditor");
editor.setAccessible(true);
Object mEditor = editor.get(mEditText);
Class<?> editorClazz = Class.forName("android.widget.Editor");
Field drawables = editorClazz.getDeclaredField("mCursorDrawable");
drawables.setAccessible(true);
Drawable[] drawable= (Drawable[]) drawables.get(mEditor); Method getVerticalOffset = clazz.getDeclaredMethod("getVerticalOffset",boolean.class);
Method getCompoundPaddingLeft = clazz.getDeclaredMethod("getCompoundPaddingLeft");
Method getExtendedPaddingTop = clazz.getDeclaredMethod("getExtendedPaddingTop");
getVerticalOffset.setAccessible(true);
getCompoundPaddingLeft.setAccessible(true);
getExtendedPaddingTop.setAccessible(true);
if (drawable != null ){
if (drawable[0] != null){
Rect bounds = drawable[0].getBounds();
Log.d(TAG,bounds.toString());
xOffset = (int) getCompoundPaddingLeft.invoke(mEditText) + bounds.left;
yOffset = (int) getExtendedPaddingTop.invoke(mEditText) + (int)getVerticalOffset.invoke(mEditText, false)+bounds.bottom;
}
}
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
float x = mEditText.getX() + xOffset;
float y = mEditText.getY() + yOffset; return new float[]{ x , y};
}
Github地址:https://github.com/covetcode/EditTextFirework-Demo
原文地址:http://www.jianshu.com/p/a001192aaa4b
Android开发——为EditText添加烟花效果的实现的更多相关文章
- Android开发之动态添加控件
动态添加TextView控件: 一:创建一个Android project项目 activity_main.xml文件: 1.用两个LinearLayout布局分别包裹一对TextView,EditT ...
- Android开发学习之路-3DTouch效果模仿
3D Touch是什么效果的大家应该都知道了.什么?不知道,那也没办法呀,我也没有iPhone 6s演示给你看的. 本篇博客要做的效果图: 来个低质量动图: 这个动图效果不是很好,实际上模糊效果应该是 ...
- Android 开发笔记___textview_聊天室效果
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- android开发学习 ------- 仿QQ侧滑效果的实现
需要做一个仿QQ侧滑删除的一个效果: 一开始是毫无头绪,百度找思路,找到 https://blog.csdn.net/xiaxiazaizai01/article/details/53036994 ...
- 【Android开发】安卓炫酷效果集合
1. android-ripple-background 能产生波浪效果的背景图片控件,可以自定义颜色,波浪扩展的速度,波浪的圈数. github地址 2. android-shapeLoadingV ...
- android 开发 - 对图片进行虚化(毛玻璃效果,模糊)
概述 IPAD,IPHONE上首页背景的模糊效果是不是很好看,那么在 Android中如何实现呢.我通过一种方式实现了这样的效果. 开源库名称:anroid-image-blur 一个android ...
- Android开发中EditText的点击Enter键焦点改变处理(获取焦点和失去焦点交互变化)
最近因为项目需要,需要将EditText的焦点转移到LineraLayout上: 即为EditText输入完毕后,点击回车键或者按压其他嵌入式android设备的OK键,获取LineraLayout的 ...
- Android 开发笔记___textvieww__跑马灯效果
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- Android开发:在EditText中关闭软键盘 转来的
1.EditText有焦点(focusable为true)阻止输入法弹出 editText=(EditText)findViewById(R.id.txtBody); editText.setOnTo ...
随机推荐
- python appium笔记(一):appium android环境配置及示例
(一) 简介 Appium是一个开源的自动化测试框架,可以用来测试基于iOS.Android和Firefox OS平台的原生和混合应用.该框架使用Selenium Webdriver,在执行测试时和 ...
- Python笔记(四):异常处理机制与 open()
(一) 异常处理机制概述 就像日常生活中会遇到各种意外情况一样(例如:你可能考虑过如果中了500w该怎么做),代码运行过程中也会遇到这种意外情况,python提供了这么一种机制,处理意外情况(就像如 ...
- LeetCode题解之Climbing Stairs
1.题目描述 2.问题分析 使用动态规划. 3.代码 int climbStairs(int n) { ){ return n; } ]; dp[] = ; dp[] = ; dp[] = ; ; i ...
- Netstat Commands for Linux Network Management
netstat (network statistics) is a command line tool for monitoring network connections both incoming ...
- Go 在 TiDB 的实践
https://blog.csdn.net/RA681t58CJxsgCkJ31/article/details/79215751 更多TiDB链接: https://my.oschina.net/z ...
- oracl数据库中的substr()函数的用法
substr:字符串截取. 1.substr:(字符串 | 列 ,开始点):从开始一直截取到结尾. select substr(zym,2) from bqh4 2.substr:(字符串 | 列 , ...
- ZooKeeper 的读写操作 & 选举机制
0. 说明 记录 ZooKeeper 的读写操作和选举机制 1. ZooKeeper 的读写操作 读操作:所有 ZooKeeper 节点都可以提供读请求(包括 follower 和 leader ) ...
- Mysql学习第三天
mysqldump -u root -p booksdb > C:/backup/booksdb_20180316.sql # 使用mysqldump命令备份数据库中的所有表 mysqldump ...
- SA387Gr91
SA387Gr91 在DTCMS中,我做了一个SA387Gr91的网站,挺好看的.
- Hash Tables
哈希表 红黑树实现的符号表可以保证对数级别的性能,但我们可以做得更好.哈希表实现的符号表提供了新的数据访问方式,插入和搜索操作可以在常数时间内完成(不支持和顺序有关的操作).所以,在很多情况下的简单符 ...