如何使用GridLayoutAnimation实现gridView加载动画

在上一篇的博客中介绍了，如何使用LayoutAnimationController实现ListView的加载动画（当然我只是用了在xml加载动画的方式），在本篇博客中，我将使用java代码加载GridLayoutAnimationController来实现GridView的加载动画，这两个的加载动画类似，其实也可以理解为GridView的GridLayoutAnimationController就是对LayoutAnimationController进行了扩展！！属性也有相似的地方，在介绍属性的时候会稍微介绍一下的！！！

先看一下效果图：





下面是使用了插值器后的动画，其实两者都是有插值器的，上面的两幅效果图是默认插值器（不知道是加速度插值器还是线性插值器，有兴趣的朋友可以自己看一下源码）





看一下主布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.gridviewanimationdemo.MainActivity">

<GridView
android:id="@+id/grid_view"
android:numColumns="4"
android:layout_width="match_parent"
android:layout_height="match_parent">

</GridView>
</LinearLayout>

看一下java代码文件：

package com.example.gridviewanimationdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.AnimationUtils;
import android.view.animation.CycleInterpolator;
import android.view.animation.GridLayoutAnimationController;
import android.widget.GridView;
import android.widget.ListAdapter;
import android.widget.SimpleAdapter;

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

public class MainActivity extends AppCompatActivity {

private GridView mGridView;
private SimpleAdapter mAdapter;
private List<HashMap<String,String>> mData;
private GridLayoutAnimationController mController;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mGridView = (GridView) findViewById(R.id.grid_view);
initData();
mController = new GridLayoutAnimationController(MainActivity.this,null);
initAnimation();
mAdapter = new SimpleAdapter(MainActivity.this,mData,android.R.layout.simple_list_item_1,new String[]{"index"},new int[]{android.R.id.text1});
mGridView.setLayoutAnimation(mController);
mGridView.setAdapter(mAdapter);

}

private void initAnimation(){
mController.setColumnDelay(0.5f);
mController.setDirection(GridLayoutAnimationController.DIRECTION_LEFT_TO_RIGHT|GridLayoutAnimationController.DIRECTION_TOP_TO_BOTTOM);
mController.setDirectionPriority(GridLayoutAnimationController.PRIORITY_ROW);
mController.setAnimation(AnimationUtils.loadAnimation(MainActivity.this,R.anim.grid_animation));
mController.setRowDelay(0.5f);
mController.setInterpolator(new CycleInterpolator(1.0f));
}
private void initData(){
mData = new ArrayList<>();
HashMap<String,String> mMap = null;
for(int i = 0 ;i<27;i++){
mMap = new HashMap<>();
mMap.put("index","这是第"+(i+1)+"数据");
mData.add(mMap);

}
}
}

在这里通过一个方法设置GridLayoutAnimationController的属性，这里面的属性与xml中的属性是对应的，其中setDirection表示的是item加载的方向，setDirectionPriority表示的加载顺序，delay这个就跟LayoutAnimationController里面的delay代表的意义一样，确定每个item的动画的开始时间：

看一下源码吧：

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

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

final int column = getTransformedColumnIndex(params);
final int row = getTransformedRowIndex(params);

final int rowsCount = params.rowsCount;
final int columnsCount = params.columnsCount;

final long duration = mAnimation.getDuration();
final float columnDelay = mColumnDelay * duration;
final float rowDelay = mRowDelay * duration;

float totalDelay;
long viewDelay;

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

switch (mDirectionPriority) {
case PRIORITY_COLUMN:
viewDelay = (long) (row * rowDelay + column * rowsCount * rowDelay);
totalDelay = rowsCount * rowDelay + columnsCount * rowsCount * rowDelay;
break;
case PRIORITY_ROW:
viewDelay = (long) (column * columnDelay + row * columnsCount * columnDelay);
totalDelay = columnsCount * columnDelay + rowsCount * columnsCount * columnDelay;
break;
case PRIORITY_NONE:
default:
viewDelay = (long) (column * columnDelay + row * rowDelay);
totalDelay = columnsCount * columnDelay + rowsCount * rowDelay;
break;
}

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

return (long) (normalizedDelay * totalDelay);
}

是不是跟上一篇中的源码方法很相似，真正的delay时间都是有我们设置的delay值和插值器的返回值决定的，具体的就不细说了，不明白的看一下源码吧！！

grid_animtion.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"
android:toAlpha="1"/>
<scale android:fromXScale="2"
android:fromYScale="2"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1"/>
<translate android:fromXDelta="0"
android:fromYDelta="100%p"
android:toXDelta="0"
android:toYDelta="0"/>

</set>

在源码中，不仅给出了在java中加载layout动画的方法，也提供了在xml文件加载layout动画的方法，需要的朋友可以自行去源码中查询！！

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



源码地址：

https://github.com/zhuyuqiang2017/Animation