為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