仿京东顶部加载动画

原创 2015年11月21日 14:35:49

  昨天的时候我们仿照了一个美团的加载的图标的小人,今天我们也来看看京东在下拉刷新的时候也会有一个快递的小人是怎么实现的,还是依靠惯例,我们解压一下它的apk,然后去里面找一找那些素材,发现原来也有几张图片,原来它的原理是和美团是一样的,其他的就不多说了。

  • 我们先把素材取出来再说:
    这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述
  • 接下来我们就在drawable 目录下新建一个 loading_jd.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_refresh_people_0" android:duration="60"></item>
    <item android:drawable="@drawable/app_refresh_people_1" android:duration="60"></item>
    <item android:drawable="@drawable/app_refresh_people_2" android:duration="60"></item>
    <item android:drawable="@drawable/app_refresh_people_3" android:duration="60"></item>

</animation-list>
  • 然后我们在我们的布局文件中的使用:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:gravity="center"
    >

    <ImageView
        android:id="@+id/iv_loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/loading_jd"
        android:layout_gravity="center"
        />

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dip"
        android:textSize="18sp"
        android:text="加载中。。。"
        />

</LinearLayout>
  • 3、接下来我们就在Activity中开启帧动画
public class MainActivity extends Activity 
{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.activity_main);

        ImageView iv_loading = (ImageView) findViewById(R.id.iv_loading);
        AnimationDrawable loadingDrawable = (AnimationDrawable) iv_loading.getDrawable();
        loadingDrawable.start();
    }
}

其实这个动画是非常简单的,就是利用了Android里面的帧动画来实现的,通过多张图片的无限循环的播放来达到这个效果,最后我们看看这个效果与我们的效果是不是一样的。
这里写图片描述

Github - 三种不错的开源loading效果

最近突然心血来潮,对一些Loading感兴趣,Loading这玩意说重要也重要,说不重要也不重要,因为这是一个提升你产品体验的一个细节,如果loading做的好,对于一些耗时需要用户等待的页面来说会转...
  • u013101864
  • u013101864
  • 2016年05月25日 17:31
  • 2427

Android动画之帧动画,及实现京东下拉加载动画

Android动画之帧动画,及实现京东下拉加载动画关于帧动画何为帧动画 图片一张一张不断的切换,形成动画效果 利用帧动画实现京东下拉菜单中的快递员奔跑动画先上效果图: 素材: 第一步、在dra...
  • weiwosuoai
  • weiwosuoai
  • 2015年10月30日 11:15
  • 1454

仿美团加载动画效果

这两天在用美团的时候,平时中没有注意的一个小细节,今天注意到了,就是在进入新页面还没有加载数据的时候,我们都可以看到一个小人像是在跑步,于是我非常好奇这个东西是怎么做的呢?于是乎我就把它的apk下载下...
  • u012417984
  • u012417984
  • 2015年11月20日 23:06
  • 2683

android模仿支付宝生活圈下拉加载控件TriangleLoadingView

前言 之前看到支付宝做的loading的效果感觉很棒的UI设计,于是就来模仿一个,模仿的效果一般。 支付宝的loading的效果朋友们可以自己看看,这里就不放出来了,下面是loading的模样 正...
  • u010360371
  • u010360371
  • 2015年11月17日 00:18
  • 1098

【Android】Android开发之常用的loading等待效果实现,仿微博等待动画。两种实现方式详解

  • 2016年10月18日 11:33
  • 20.31MB
  • 下载

【Android】Android开发之常用的loading等待效果实现,仿微博等待动画。两种实现方式详解

作者:程序员小冰 (转载请说明出处)博客地址:http://blog.csdn.net/qq_21376985长期维护的Android项目,里面包括常用功能实现,以及知识点详解, 当然还有Java中的...
  • qq_21376985
  • qq_21376985
  • 2016年10月18日 11:24
  • 17100

【Android】Android开发之常用的loading等待效果实现,仿微博等待动画。两种实现方式详解

作者:程序员小冰 (转载请说明出处)博客地址:http://blog.csdn.net/qq_21376985 长期维护的Android项目,里面包括常用功能实现,以及知识点详解, 当然还有Java...
  • fengyeNom1
  • fengyeNom1
  • 2017年06月28日 15:47
  • 861

仿京东顶部加载动画

昨天的时候我们仿照了一个美团的加载的图标的小人,今天我们也来看看京东在下拉刷新的时候也会有一个快递的小人是怎么实现的,还是依靠惯例,我们解压一下它的apk,然后去里面找一找那些素材,发现原来也有几张图...
  • u012417984
  • u012417984
  • 2015年11月21日 14:35
  • 1377

Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例

仿淘宝京东多条件筛选可自行结合ajax加载,使用Jquery简单实现,具体如下,喜欢的朋友可以参考 复制代码代码如下:         Jquery分类    ...
  • zkn_CS_DN_2013
  • zkn_CS_DN_2013
  • 2013年11月05日 10:18
  • 2373

Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果)

今天我们主要来模仿一下美团中加载数据时小人奔跑动画的对话框效果,取个有趣的名字就是Running Man,奔跑吧,兄弟!话不多少,先上效果图,让各位大侠看看是不是你想要实现的效果,然后再决定是否往下阅...
  • finddreams
  • finddreams
  • 2015年01月27日 14:53
  • 9360
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿京东顶部加载动画
举报原因:
原因补充:

(最多只允许输入30个字)