Android实现仿美团、顺丰快递数据加载效果
我们都知道在Android中,常见的动画模式有两种:一种是帧动画(Frame Animation),一种是补间动画(Tween Animation)。帧动画是提供了一种逐帧播放图片的动画方式,播放事先做好的图像,与gif图片原理类似,就像是在放电影一样。补间动画可以实现View组件的移动、放大、缩小以及渐变等效果。
今天我们主要来模仿一下美团中加载数据时小人奔跑动画的对话框效果,取个有趣的名字就是Running Man,奔跑吧,兄弟!话不多少,先上效果图,让各位大侠看看是不是你想要实现的效果,然后再决定是否往下阅读,因为做为程序员我们的时间都很宝贵,毕竟还没有女朋友呢?
(ps:因为技术原因,提供的动态图效果不是很明显,但在手机上运行是非常好的,有兴趣的朋友可以下载源码看看。)
下面讲讲实现的原理,首先我们在项目的res目录下新建一下anim文件夹,然后新建一个xml文件,添加如下代码:
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" > <item android:drawable="@drawable/app_loading0" android:duration="150"/> <item android:drawable="@drawable/app_loading1" android:duration="150"/> </animation-list>
animation-list 是动画列表,中间放很多的item 也就是组成帧动画的图片,
android:drawable[drawable]//加载Drawable对象
android:duration[long]//每一帧动画的持续时间(单位ms)
android:oneshot[boolean]//动画是否只运行一次,true运行一次,false重复运行
写好之后我们来看自定义一个对话框,来实现打开对话框时,自动加载奔跑的动画。见代码:
/** * @Description:自定义对话框 * @author http://blog.csdn.net/finddreams */ public class CustomProgressDialog extends ProgressDialog { private AnimationDrawable mAnimation; private Context mContext; private ImageView mImageView; private String mLoadingTip; private TextView mLoadingTv; private int count = 0; private String oldLoadingTip; private int mResid; public CustomProgressDialog(Context context, String content, int id) { super(context); this.mContext = context; this.mLoadingTip = content; this.mResid = id; setCanceledOnTouchOutside(true); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); initView(); initData(); } private void initData() { mImageView.setBackgroundResource(mResid); // 通过ImageView对象拿到背景显示的AnimationDrawable mAnimation = (AnimationDrawable) mImageView.getBackground(); // 为了防止在onCreate方法中只显示第一帧的解决方案之一 mImageView.post(new Runnable() { @Override public void run() { mAnimation.start(); } }); mLoadingTv.setText(mLoadingTip); } public void setContent(String str) { mLoadingTv.setText(str); } private void initView() { setContentView(R.layout.progress_dialog); mLoadingTv = (TextView) findViewById(R.id.loadingTv); mImageView = (ImageView) findViewById(R.id.loadingIv); } }
可以看到在代码中,我们使用到一个imageview.post(Runnable r)方法,因为帧动画需要不断的重画,所以必须在线程中运行,否则只能看到第一帧的效果,这和我们做游戏的原理是一样的,一个人物的走动,是有线程在控制图片的不断重画。
当然还有另外一个方法也能实现:
@Override public void onWindowFocusChanged(boolean hasFocus) { // TODO Auto-generated method stub mAnimation.start(); super.onWindowFocusChanged(hasFocus); }
最后就是在Activity中调用了,详情:
CustomProgressDialog dialog =new CustomProgressDialog(this, "正在加载中",R.anim.frame); dialog.show();
对于CustomProgressDialog这个自定义对话框类是封装的比较好的,调用起来十分方便,你可以快速的替换成你想要的效果,只需更改图片就可以了。
以上就是本篇文章的全部内容,大家在测试后如果还有任何不明白的地方可以在下方的留言区域导论,感谢你对脚本之家的支持。
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- 一篇文章上手Vue3中新增的API
- 先电OpenStack卸载脚本
- 先电OpenStack之neutron-vlan脚本
- 【7】进大厂必须掌握的面试题-Java面试-Jsp
- HTML5+JS 可交互360°&柱状全景图浏览
- Spring编译源代码解决spring-core缺少cglib和objenesis的jar包的办法
- 尤大 3 天前发在 GitHub 上的 vue-lit 是啥?
- CSS3旋转实例学习(附3D旋转实例)
- 学会23个linux常用命令,不做前端切图仔~
- Python新手之pycharm调试指南
- 【设计模式系列】行为型之状态模式
- PHP运行模式
- 马上2021年了线性表你还不知道原理?给老王整的明明白白
- 分治-芯片测试问题
- 你说啥什么?注解你还不会?