Android仿美团加载数据 小人奔跑进度动画对话框（附顺丰快递员奔跑效果）

Posted 2021-02-12 skiwnchhw

我们都知道在android中，常见的动画模式有两种：一种是帧动画（Frame Animation），一种是补间动画（Tween Animation）。帧动画是提供了一种逐帧播放图片的动画方式，播放事先做好的图像，与gif图片原理类似，就像是在放电影一样。补间动画可以实现View组件的移动、放大、缩小以及渐变等效果。

 

   今天我们主要来模仿一下美团中加载数据时小人奔跑动画的对话框效果，取个有趣的名字就是Running Man，奔跑吧，兄弟！话不多少，先上效果图，让各位大侠看看是不是你想要实现的效果，然后再决定是否往下阅读，因为做为程序员我们的时间都很宝贵，毕竟还没有女朋友呢？

（ps:因为技术原因，提供的动态图效果不是很明显，但在手机上运行是非常好的，有兴趣的朋友可以下载源码看看。）

    下面讲讲实现的原理，首先我们在项目的res目录下新建一下anim文件夹，然后新建一个xml文件，添加如下代码：

[html] view plaincopy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:oneshot="false" >  
4.   
5.     <item  
6.         android:drawable="@drawable/app_loading0"  
7.         android:duration="150"/>  
8.     <item  
9.         android:drawable="@drawable/app_loading1"  
10.         android:duration="150"/>  
11.   
12. </animation-list>  

 

animation-list 是动画列表，中间放很多的item 也就是组成帧动画的图片，

android:drawable[drawable]//加载Drawable对象

android:duration[long]//每一帧动画的持续时间（单位ms）
     android:oneshot[boolean]//动画是否只运行一次，true运行一次，false重复运行

 写好之后我们来看自定义一个对话框，来实现打开对话框时，自动加载奔跑的动画。见代码：

[java] view plaincopy

 

1. /** 
2.  * @Description:自定义对话框 
3.  * @author http://blog.csdn.net/finddreams 
4.  */  
5. public class CustomProgressDialog extends ProgressDialog {  
6.   
7.     private AnimationDrawable mAnimation;  
8.     private Context mContext;  
9.     private ImageView mImageView;  
10.     private String mLoadingTip;  
11.     private TextView mLoadingTv;  
12.     private int count = 0;  
13.     private String oldLoadingTip;  
14.     private int mResid;  
15.   
16.     public CustomProgressDialog(Context context, String content, int id) {  
17.         super(context);  
18.         this.mContext = context;  
19.         this.mLoadingTip = content;  
20.         this.mResid = id;  
21.         setCanceledOnTouchOutside(true);  
22.     }  
23.   
24.     @Override  
25.     protected void onCreate(Bundle savedInstanceState) {  
26.         super.onCreate(savedInstanceState);  
27.         initView();  
28.         initData();  
29.     }  
30.   
31.     private void initData() {  
32.   
33.         mImageView.setBackgroundResource(mResid);  
34.         // 通过ImageView对象拿到背景显示的AnimationDrawable  
35.         mAnimation = (AnimationDrawable) mImageView.getBackground();  
36.         // 为了防止在onCreate方法中只显示第一帧的解决方案之一  
37.         mImageView.post(new Runnable() {  
38.             @Override  
39.             public void run() {  
40.                 mAnimation.start();  
41.   
42.             }  
43.         });  
44.         mLoadingTv.setText(mLoadingTip);  
45.   
46.     }  
47.   
48.     public void setContent(String str) {  
49.         mLoadingTv.setText(str);  
50.     }  
51.   
52.     private void initView() {  
53.         setContentView(R.layout.progress_dialog);  
54.         mLoadingTv = (TextView) findViewById(R.id.loadingTv);  
55.         mImageView = (ImageView) findViewById(R.id.loadingIv);  
56.     }  
57.   
58. }  

         可以看到在代码中，我们使用到一个imageview.post(Runnable r)方法，因为帧动画需要不断的重画，所以必须在线程中运行，否则只能看到第一帧的效果，这和我们做游戏的原理是一样的，一个人物的走动，是有线程在控制图片的不断重画。

   当然还有另外一个方法也能实现：

[java] view plaincopy

 

1. @Override  
2.     public void onWindowFocusChanged(boolean hasFocus) {  
3.         // TODO Auto-generated method stub  
4.         mAnimation.start();   
5.         super.onWindowFocusChanged(hasFocus);  
6.     }  

     

    最后就是在Activity中调用了，详情：

[java] view plaincopy

 

1. CustomProgressDialog dialog =new CustomProgressDialog(this, "正在加载中",R.anim.frame);  
2.         dialog.show();  

        对于CustomProgressDialog这个自定义对话框类是封装的比较好的，调用起来十分方便，你可以快速的替换成你想要的效果，只需更改图片就可以了。

最后附上源代码，还不够理解的朋友可以下载看看，希望对你有所帮助；

http://download.csdn.net/detail/finddreams/8401429

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！http://www.captainbed.net