为ViewGroup的子视图添加悦目的动画效果

作者：李旺成

时间：2016年5月11日

这个 Hack 将介绍如何为 ViewGroup 的子视图添加动画效果。

默认情况下，添加到 ViewGroup 中的子视图是直接显示出来的。有一个简单的方法可以为这个过程增加动画效果。

LayoutAnimationController 类简介

LayoutAnimationController 可以为 ViewGroup 的子视图添加动画效果。需要注意的是，并不能为每个子视图分别指定不同的动画效果（也就是说每个子视图都会有相同的动画效果），但是 LayoutAnimationController 可以决定各个子视图显示动画效果的时间。

先看下官方的介绍：

LayoutAnimationController类

文档上介绍了 ”XML Attributes“，那说明可以在 xml 中使用，也就是说有两种使用方式：直接在 Java 代码中用和在 xml 中定义。在稍微看一下提供了哪些方法：

LayoutAnimationController方法

有几个方法简单解释下：

• setInterpolator(Interpolator interpolator)：设置两个子视图之间延迟时间的插值器，注意添加的动画也是可以设置单独设置插值器的
• setOrder(int order)：设置控件显示的顺序
• willOverlap()：返回两个子视图的动画是否会出现重叠

LayoutAnimationController 简单使用

上面介绍 LayoutAnimationController 的时候提过，该类应该有两种使用方式，下面将分别介绍这两种方式。

先看下效果：

LayoutAnimationController使用演示

直接在 Java 代码中使用

1、创建动画

AnimationSet set = new AnimationSet(false); // 传入 false 表示组成动画集中的动画使用不同的 Interpolator
Animation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
alphaAnimation.setDuration(700);
alphaAnimation.setInterpolator(new FastOutSlowInInterpolator());
set.addAnimation(alphaAnimation);

Animation translateAnimation = new TranslateAnimation(
        Animation.RELATIVE_TO_SELF,
        0.0f,
        Animation.RELATIVE_TO_SELF,
        0.0f,
        Animation.RELATIVE_TO_SELF,
        -1.0f,
        Animation.RELATIVE_TO_SELF,
        0.0f);
translateAnimation.setDuration(1000);
translateAnimation.setInterpolator(new LinearOutSlowInInterpolator());
set.addAnimation(translateAnimation);

这里使用透明度动画和位移动画组合创建一个动画集，并且分别为这两个动画设置了不同的 Interpolator 以及 持续时间。

注意：直接使用某一种动画是完全一样的，这里使用动画集仅仅是为了演示。

2、代码创建 LayoutAnimationController

LayoutAnimationController lac = new LayoutAnimationController(
                set,
                1f);

3、设置子视图显示的顺序

lac.setOrder(LayoutAnimationController.ORDER_NORMAL);

order 可有如下取值：

• ORDER_NORMAL：顺序
• ORDER_REVERSE：相反
• ORDER_RANDOM：随机

4、为 ViewGroup 设置 LayoutAnimationController

mContentLV.setLayoutAnimation(lac);

5、为 ViewGroup 添加子视图
这里的 ViewGroup 是 ListView，所以要为其设置 Adapter：

mContentLV.setAdapter(new ArrayAdapter<String>(
                this,
                android.R.layout.simple_list_item_1,
                Countries.COUNTRIES));

使用很简单，就这么几步即可。

在 xml 中定义 LayoutAnimationController

其实与在 Java 代码中使用是一样的，只是定义方式的区别。

1、创建 layoutAnimation 的 xml 文件
在 res/anim 文件夹下面创建名为 list_item_anim_layout.xml 的文件，内容如下：

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

在这里可以直接设置子视图的顺序，延迟时间（注意：单位是”秒“），以及要显示的动画。

2、在布局中为 ViewGroup 设置 layoutAnimation 属性

<ListView
    android:id="@+id/lv_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutAnimation="@anim/list_item_anim_layout"/>

3、为 ListView 设置 Adapter
为 ListView 设置好 Adapter 应该就可以看到效果了。这里就不演示了，代码在演示项目中都有，感兴趣的可以自己下去尝试。

注意事项

只在第一次设置时有效？
示例中使用了 LinearLayout，通过点击按钮往 LinearLayout 中添加和删除子视图。你会发现在给 LinearLayout 设置好 LayoutAnimationController 后调用添加方法（也就是在 oncreate() 方法中执行的那段代码），会有动画效果。但是，当你再次点击”添加“或”删除“按钮，并没有出现动画效果。

这里没有深入研究了，只是在添加和删除子视图之前又调用了一下 ViewGroup 的 setLayoutAnimation() 方法，但是效果很诡异，所有的子视图都会执行动画。

项目地址

AndroidHacks合集
动画篇

项目示例代码：
VGChildrenAnimActivity.java
Countries.java
activity_vgchildrenanim.xml
list_item_anim_layout.xml

参考

LayoutAnimationController