Android实现仿美团、顺丰快递数据加载效果

所属分类: 软件编程 / Android 阅读数: 41
收藏 0 赞 0 分享

我们都知道在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这个自定义对话框类是封装的比较好的,调用起来十分方便,你可以快速的替换成你想要的效果,只需更改图片就可以了。

以上就是本篇文章的全部内容,大家在测试后如果还有任何不明白的地方可以在下方的留言区域导论,感谢你对脚本之家的支持。

更多精彩内容其他人还在看

Android异常 java.lang.IllegalStateException解决方法

这篇文章主要介绍了Android异常 java.lang.IllegalStateException解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android中Split()字符串分割特殊用法案例详解

本文通过案例的形式给大家详细介绍了android中split()字符串分割特殊用法的知识,非常不错具有参考借鉴价值,感兴趣的朋友参考下
收藏 0 赞 0 分享

Android仿新浪微博启动界面或登陆界面(1)

这篇文章主要为大家详细介绍了Android仿新浪微博启动界面或登陆界面的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android仿新浪微博oauth2.0授权界面实现代码(2)

这篇文章主要为大家详细介绍了Android仿新浪微博oauth2.0授权界面实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android开发中使用sqlite实现新闻收藏和取消收藏的功能

本篇文章主要介绍了sqlite实现新闻收藏和取消收藏功能,主要涉及到oracle数据库方面的内容,对于Android开发sqlite实现收藏和取消功能感兴趣的朋友可以参考下本文
收藏 0 赞 0 分享

Android仿新浪微博分页管理界面(3)

这篇文章主要为大家详细介绍了Android仿新浪微博分页管理界面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android UI自定义ListView实现下拉刷新和加载更多效果

这篇文章主要介绍了Android UI自定义ListView实现下拉刷新和加载更多效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android—基于微信开放平台v3SDK开发(微信支付填坑)

这篇文章主要介绍了Android—基于微信开放平台v3SDK开发(微信支付填坑),具有一定的参考价值,有需要的可以了解一下。
收藏 0 赞 0 分享

Android仿新浪微博自定义ListView下拉刷新(4)

这篇文章主要为大家详细介绍了Android仿新浪微博自定义ListView下拉刷新,重点介绍了Adapter的详细代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android控件之使用ListView实现时间轴效果

这篇文章主要介绍了Android基础控件之使用ListView实现时间轴效果的相关资料,本文是以查看物流信息为例,给大家介绍了listview时间轴的实现代码,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多