android右上角动画,RecyclerView与LayoutAnimation实现的进入动画（二）:Grid

介绍

这是本教程的第二部分,也是最后一部分。第一部分我们讲述了RecyclerView用于列表的例子&＃xff0c;文章见&＃xff1a;

在第一部分中我们演示了如何使用自定义的动画渲染一个RecyclerView的初始加载。采用的是LayoutAnimation&＃xff0c;效果也不错。这篇文章我们谈谈如何用类似的方法去处理grid。

本教程的demo项目List和Grid的例子都有&＃xff0c;在这里:

apk见 这里!

为什么grid场景下会有所不同&＃xff1f;

首先采用第一部分中的方法完全可以在grid上很好的工作&＃xff0c;没有crash&＃xff0c;动画也是相同的运作方式。但是 LayoutAnimation与使用GridLayoutManager的RecyclerView得到的结果是这样的&＃xff1a;

左边是LayoutAnimation的grid&＃xff0c;右边是我们想要的效果。

之所以会这样是因为item的动画是基于它在grid中的线性位置来的(从左到右&＃xff0c;从上到下)&＃xff0c;所以才会制造出奇怪的动画。我们想要的是不同列与行上的item同时运行&＃xff0c;这样就能减短持续时间。概括起来就是我们需要对动画的顺序和延迟有更多的控制。

所以开始吧

为了解决这个问题&＃xff0c;我们将使用GridLayoutAnimation。基本上它就是一个LayoutAnimation&＃xff0c;但是可以为行与列定义delay&＃xff0c;同时还允许设置 layout animation的方向。这就使得我们能更好的控制一个特定item的动画&＃xff0c;更容易让多个item的动画同时运行。

首先在 res/anim/下创建一个名为grid_layout_animation_from_bottom.xml的文件&＃xff0c;然后添加&＃xff1a;

xmlns:android&＃61;"http://schemas.android.com/apk/res/android"

android:animation&＃61;"&＃64;anim/item_animation_from_bottom"

android:animationOrder&＃61;"normal"

android:columnDelay&＃61;"15%"

android:rowDelay&＃61;"15%"

android:direction&＃61;"top_to_bottom|left_to_right"

/>

其中&＃xff1a;android:animation&＃61;"&＃64;anim/item_animation_from_bottom”

定义布局中的每个item所要应用的动画

android:animationOrder&＃61;"normal"

可以选择三种类型&＃xff1a;normal, reverse 以及 random。它控制内容动画的顺序。Normal&＃xff1a;遵循direction和delay所定义的顺序&＃xff1b;Reverse的顺序恰好跟Normal相反&＃xff1b;Random为随机的顺序。

android:columnDelay&＃61;”15%"

应用到每列上的动画延迟&＃xff0c;定义为item动画持续时间的百分比。

android:rowDelay&＃61;”15%"

应用到每行上的动画延迟&＃xff0c;定义为item动画持续时间的百分比。

android:direction&＃61;”top_to_bottom|left_to_right"

定义动画执行的方向。这里动画将从左上角开始&＃xff0c;移动到右下角。如果定义为top_to_bottom|right_to_left&＃xff0c;那么将从右上角开始移动到左下角。

对于一个GridLayoutAnimation来说&＃xff0c;每个item最终的延迟是根据行和列的延迟以及方向计算出来的&＃xff1a;itemAnimationDuration &＃61; 300ms

rowDelay              &＃61; 10% (30ms)

columnDelay           &＃61; 10% (30ms)

direction             &＃61; top_to_bottom|left_to_right

&＃43;------->

| &＃43;---&＃43;---&＃43;---&＃43;

| | 0 | 1 | 2 |

| &＃43;---&＃43;---&＃43;---&＃43;

V | 3 | 4 | 5 |

&＃43;---&＃43;---&＃43;---&＃43;

| 6 | 7 | 8 |

&＃43;---&＃43;---&＃43;---&＃43;    ROW   COLUMN

0 &＃61; 0*30 &＃43; 0*30 &＃61; 0ms

1 &＃61; 0*30 &＃43; 1*30 &＃61; 30ms

2 &＃61; 0*30 &＃43; 2*30 &＃61; 60ms3 &＃61; 1*30 &＃43; 0*30 &＃61; 30ms

4 &＃61; 1*30 &＃43; 1*30 &＃61; 60ms

5 &＃61; 1*30 &＃43; 2*30 &＃61; 90ms6 &＃61; 2*30 &＃43; 0*30 &＃61; 60ms

7 &＃61; 2*30 &＃43; 1*30 &＃61; 90ms

8 &＃61; 2*30 &＃43; 2*30 &＃61; 120msFinal animation order by delay

&＃43;-----&＃43;-----&＃43;-----&＃43;

|  0  | 30  | 60  |

&＃43;-----&＃43;-----&＃43;-----&＃43;

| 30  | 60  | 90  |

&＃43;-----&＃43;-----&＃43;-----&＃43;

| 60  | 90  | 120 |

&＃43;-----&＃43;-----&＃43;-----&＃43;

把行和列的延迟设置为相同值可以让item动画的执行是对称的(沿对角线)。第一部分的item动画 item_animation_from_bottom.xml是如此定义的&＃xff1a;

android:duration&＃61;"&＃64;integer/anim_duration_long">

android:interpolator&＃61;"&＃64;android:anim/accelerate_decelerate_interpolator"

android:fromYDelta&＃61;"50%p"

android:toYDelta&＃61;"0"

/>

android:fromAlpha&＃61;"0"

android:toAlpha&＃61;"1"

android:interpolator&＃61;"&＃64;android:anim/accelerate_decelerate_interpolator"

/>

应用 GridLayoutAnimation

GridLayoutAnimation的使用方式跟普通的LayoutAnimation是一样的&＃xff0c;可以在java代码中也可以在xml中&＃xff1a;

javaint resId &＃61; R.anim.grid_layout_animation_from_bottom;

LayoutAnimationController animation &＃61; AnimationUtils.loadLayoutAnimation(ctx, resId);

recyclerview.setLayoutAnimation(animation);

xml

android:layout_width&＃61;"match_parent"

android:layout_height&＃61;"match_parent"

android:layoutAnimation&＃61;"&＃64;anim/grid_layout_animation_from_bottom"

/>

但是如果你把GridLayoutAnimation用到标准的RecyclerView中会得到如下的异常&＃xff1a;com.patrickiv.demo.enteranimationdemo E/AndroidRuntime: FATAL EXCEPTION: main

Process: com.patrickiv.demo.enteranimationdemo, PID: 19510

java.lang.ClassCastException: android.view.animation.LayoutAnimationController$AnimationParameters cannot be cast to android.view.animation.GridLayoutAnimationController$AnimationParameters

at android.view.animation.GridLayoutAnimationController.getDelayForView(GridLayoutAnimationController.java:299)

at android.view.animation.LayoutAnimationController.getAnimationForView(LayoutAnimationController.java:323)

at android.view.ViewGroup.bindLayoutAnimation(ViewGroup.java:4584)

at android.view.ViewGroup.dispatchDraw(ViewGroup.java:3453)

at android.view.View.draw(View.java:17240)

at android.support.v7.widget.RecyclerView.draw(RecyclerView.java:3985)

...

这是因为RecyclerView是使用LayoutManager来布局自己的子view的&＃xff0c;它并不知道LayoutManager如何放置子view。因此RecyclerView不知道到底该把AnimationParameter应用到list上还是grid上&＃xff0c;而默认是list。为了修复这个问题我们需要一个自定义的RecyclerView&＃xff0c;让它知道GridLayoutManager的存在。/**

* RecyclerView with support for grid animations.

*

* Based on:

* https://gist.github.com/Musenkishi/8df1ab549857756098ba

* Credit to Freddie (Musenkishi) Lust-Hed

*

* ...which in turn is based on the GridView implementation of attachLayoutParameters(...):

* https://android.googlesource.com/platform/frameworks/base/&＃43;/master/core/java/android/widget/GridView.java

*

*/

public class GridRecyclerView extends RecyclerView {

/** &＃64;see View#View(Context) */

public GridRecyclerView(Context context) { super(context); }

/** &＃64;see View#View(Context, AttributeSet) */

public GridRecyclerView(Context context, AttributeSet attrs) { super(context, attrs); }

/** &＃64;see View#View(Context, AttributeSet, int) */

public GridRecyclerView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); }

&＃64;Override

protected void attachLayoutAnimationParameters(View child, ViewGroup.LayoutParams params,

int index, int count) {

final LayoutManager layoutManager &＃61; getLayoutManager();

if (getAdapter() !&＃61; null && layoutManager instanceof GridLayoutManager){

GridLayoutAnimationController.AnimationParameters animationParams &＃61;

(GridLayoutAnimationController.AnimationParameters) params.layoutAnimationParameters;

if (animationParams &＃61;&＃61; null) {

// If there are no animation parameters, create new once and attach them to

// the LayoutParams.

animationParams &＃61; new GridLayoutAnimationController.AnimationParameters();

params.layoutAnimationParameters &＃61; animationParams;

}

// Next we are updating the parameters

// Set the number of items in the RecyclerView and the index of this item

animationParams.count &＃61; count;

animationParams.index &＃61; index;

// Calculate the number of columns and rows in the grid

final int columns &＃61; ((GridLayoutManager) layoutManager).getSpanCount();

animationParams.columnsCount &＃61; columns;

animationParams.rowsCount &＃61; count / columns;

// Calculate the column/row position in the grid

final int invertedIndex &＃61; count - 1 - index;

animationParams.column &＃61; columns - 1 - (invertedIndex % columns);

animationParams.row &＃61; animationParams.rowsCount - 1 - invertedIndex / columns;

} else {

// Proceed as normal if using another type of LayoutManager

super.attachLayoutAnimationParameters(child, params, index, count);

}

}

}

现在唯一的事情就是在xml中把RecyclerView替换成新的GridRecyclerView&＃xff1a;

android:id&＃61;"&＃64;&＃43;id/recycler_view"

android:layout_width&＃61;"match_parent"

android:layout_height&＃61;"match_parent"

android:layoutAnimation&＃61;"&＃64;anim/grid_layout_animation_from_bottom"

/>

结语

使用GridLayoutAnimation和自定义的GridRecyclerView&＃xff0c;我们得到了想要的效果&＃xff1a;

左边是LayoutAnimation的grid&＃xff0c;右边是我们想要的效果。

代码地址。