仿美团加载动画效果

原创 2015年11月20日 23:06:15

这两天在用美团的时候,平时中没有注意的一个小细节,今天注意到了,就是在进入新页面还没有加载数据的时候,我们都可以看到一个小人像是在跑步,于是我非常好奇这个东西是怎么做的呢?于是乎我就把它的apk下载下来,然后解压之后,看到了 drawable-xxhdpi-v4 目录下有4张类似跑步的图片;发现原来它是用了 Android动画中的帧动画来实现的。下面我们也来实现一个这样子的效果吧。

  • 第一步我们把这几张图片放到那个 drawable-xhdpi 中
    图片素材 这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述

  • 第二步:我们在drawable 目录下新建一个 loading.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/progress_loading_image_01" android:duration="80"/>
    <item android:drawable="@drawable/progress_loading_image_02" android:duration="80"/>
    <item android:drawable="@drawable/progress_loading_image_03" android:duration="80"/>
    <item android:drawable="@drawable/progress_loading_image_04" android:duration="80"/>

</animation-list>

第三部:上传布局文件,放在res/layout 目录下,文件名位 activity_main.xml

<?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"
        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>

第四部:就在我们的Activity中开启帧动画来就可以了

package com.example.demo;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.widget.ImageView;
import com.example.progressbar.R;

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();
    }
}

效果图(由于生成gif的软件不是很好,中间会有一个停顿的过程,但是实际的效果是没有这个的):
这里写图片描述

仿京东顶部加载动画

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

各类加载loading动画效果

效果一:   一、HTML Loading... 二、CSS /*绿色背景*/ body {    background:#4ea980;    margin:50px; } /*纯白色圈*/ .lo...

css3实现三种不同的loading加载动画效果

HTML:
  • web_hwg
  • web_hwg
  • 2017年03月31日 16:40
  • 821

CSS3实现Loading加载动画特效大全

目前大部分WEB开发加载(loading)特效是采用gif图片形式展现,随着HTML5+CSS3技术的成熟,纯CSS3版本的Loading加载动画效果已经可以比拟gif动画效果,当然是需要浏览器的兼容...

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

今天我们主要来模仿一下美团中加载数据时小人奔跑动画的对话框效果,取个有趣的名字就是Running Man,奔跑吧,兄弟!话不多少,先上效果图,让各位大侠看看是不是你想要实现的效果,然后再决定是否往下阅...

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

我们都知道在Android中,常见的动画模式有两种:一种是帧动画(Frame Animation),一种是补间动画(Tween Animation)。帧动画是提供了一种逐帧播放图片的动画方式,播放...
  • jdsjlzx
  • jdsjlzx
  • 2015年02月04日 17:51
  • 15411

Android应用之——仿美团loading加载中动画

前言 想必用过美团客户端的用户对美团那个加载小人的动画印象很深刻,一个可爱的小人在那拼命的跑。这个动画实现的方法其实很多,今天这里就用frame动画来实现一下。 一、效果图 二、布局文件 ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

android 动画--帧动画--仿美团加载中小人

1 把资源图片放到drawable中2 在drawable中写动画的xml文件animation01Animation01.xml

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿美团加载动画效果
举报原因:
原因补充:

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