自定义ListView加载动画，实现不一样的加载效果

本篇博客主要介绍如何通过animation和LayoutAnimation来实现ListView的item显示动画。实现ListView中的item显示动画需要注意，这种动画只会在ListView第一次加载item的时候起作用，在之后的item重新绘制等一系列情况都不会起作用！！！这一点需要注意，确定是否符合你的需求！！！

先看一下效果图吧：





看一下主布局文件吧（其实没什么好看的，就是一个listview）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layoutAnimation="@anim/list_layout_animation"
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
</LinearLayout>

list_animation_1.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0" />
<translate
android:fromXDelta="150%p"
android:toXDelta="0" />
</set>

liat_animation.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0" />
<translate
android:fromXDelta="-50%p"
android:toXDelta="0" />
<rotate
android:fromDegrees="0"
android:pivotX="0"
android:pivotY="50%"
android:toDegrees="360" />
</set>

list_layout_animation.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:animation="@anim/list_animation_1"
android:animationOrder="normal"
android:delay="0.5"/>

这些属性在前几篇介绍动画的博客中都有介绍，主要来介绍一下layoutAnimation标签中的几个属性，其中animationOrder的值代表的是ListView中item执行动画的顺序，其中对应三个值，分别是normal reverse和random，根据意思就可以分辨出来，normal就是顺序显示，reverse就是倒序显示，random就是随机了！！

在LayoutAnimation标签中可以设置插值器，不过影响的只是动画的执行开始时间（什么？不明白什么是插值器，请自己翻阅前几篇博客！！），至于delay，这个就比较有意思的，先看下相关源码在解释吧，这样更容易理解！！！

protected long getDelayForView(View view) {
ViewGroup.LayoutParams lp = view.getLayoutParams();
AnimationParameters params = lp.layoutAnimationParameters;

if (params == null) {
return 0;
}

final float delay = mDelay * mAnimation.getDuration();
final long viewDelay = (long) (getTransformedIndex(params) * delay);
final float totalDelay = delay * params.count;

if (mInterpolator == null) {
mInterpolator = new LinearInterpolator();
}

float normalizedDelay = viewDelay / totalDelay;
normalizedDelay = mInterpolator.getInterpolation(normalizedDelay);

return (long) (normalizedDelay * totalDelay);
}

从这里就可以看出，其实动画的开始是由插值器的返回值和属性中的delay值共同决定的，不信你可以设置相同的属性然后变更不同的插值器试一下，效果还是比较明显的！！！

Java文件：

package com.example.listlayoutanimationdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.animation.LayoutAnimationController;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.SimpleAdapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class MainActivity extends AppCompatActivity {

private ListView mListView;
private SimpleAdapter mAdapter;
private LayoutAnimationController l;
List<HashMap<String, String>> mData = new ArrayList<>();
List<HashMap<String, String>> data = new ArrayList<>();
private LinearLayout mContainer;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
mContainer = (LinearLayout)findViewById(R.id.activity_main);
mListView = (ListView) findViewById(R.id.list_view);
mAdapter = new SimpleAdapter(MainActivity.this, mData, android.R.layout.simple_list_item_1, new String[]{"index"}, new int[]{android.R.id.text1});
mListView.setAdapter(mAdapter);
}

private void init() {
HashMap<String, String> mWindCode = null;
mWindCode = new HashMap<>();
mWindCode.put("index", "无持续风向");
mData.add(mWindCode);
data.add(mWindCode);
mWindCode = new HashMap<>();
mWindCode.put("index", "东北风");
mData.add(mWindCode);
data.add(mWindCode);
mWindCode = new HashMap<>();
mWindCode.put("index", "东风");
mData.add(mWindCode);
mWindCode = new HashMap<>();
mWindCode.put("index", "东南风");
mData.add(mWindCode);
data.add(mWindCode);
mWindCode = new HashMap<>();
mWindCode.put("index", "南风");
mData.add(mWindCode);
mWindCode = new HashMap<>();
mWindCode.put("index", "西南风");
mData.add(mWindCode);
data.add(mWindCode);
mWindCode = new HashMap<>();
mWindCode.put("index", "西风");
mData.add(mWindCode);
mWindCode = new HashMap<>();
mWindCode.put("index", "西北风");
mData.add(mWindCode);
data.add(mWindCode);
mWindCode = new HashMap<>();
mWindCode.put("index", "北风");
mData.add(mWindCode);
mWindCode = new HashMap<>();
mWindCode.put("index", "旋转风");
mData.add(mWindCode);
data.add(mWindCode);

}

}

java文件在这里就不多说了，就是往一个list里面简单的填充数据，具体看上面的代码！！！

在这一篇博客中，我们是使用xml设置layout动画，在下一篇博客中，我将使用java代码为grideview设置动画，希望大家多多关注！！！

这是我的微信公众号，如果可以的话，希望您可以帮忙关注一下，这将是对我最大的鼓励了，谢谢！！



代码地址：

https://github.com/zhuyuqiang2017/Animation