為ViewGroup的子視圖添加悅目的動畫效果

作者：李旺成

時間：2016年5月11日

這個 Hack 將介紹如何為 ViewGroup 的子視圖添加動畫效果娶视。

默認(rèn)情況下羞延，添加到 ViewGroup 中的子視圖是直接顯示出來的策吠。有一個簡單的方法可以為這個過程增加動畫效果竹习。

LayoutAnimationController 類簡介

LayoutAnimationController 可以為 ViewGroup 的子視圖添加動畫效果茄猫。需要注意的是狈蚤，并不能為每個子視圖分別指定不同的動畫效果（也就是說每個子視圖都會有相同的動畫效果），但是 LayoutAnimationController 可以決定各個子視圖顯示動畫效果的時間划纽。

先看下官方的介紹：

LayoutAnimationController類

文檔上介紹了 ”XML Attributes“脆侮，那說明可以在 xml 中使用，也就是說有兩種使用方式：直接在 Java 代碼中用和在 xml 中定義阿浓。在稍微看一下提供了哪些方法：

LayoutAnimationController方法

有幾個方法簡單解釋下：

• setInterpolator(Interpolator interpolator)：設(shè)置兩個子視圖之間延遲時間的插值器他嚷，注意添加的動畫也是可以設(shè)置單獨設(shè)置插值器的
• setOrder(int order)：設(shè)置控件顯示的順序
• willOverlap()：返回兩個子視圖的動畫是否會出現(xiàn)重疊

LayoutAnimationController 簡單使用

上面介紹 LayoutAnimationController 的時候提過，該類應(yīng)該有兩種使用方式，下面將分別介紹這兩種方式筋蓖。

先看下效果：

LayoutAnimationController使用演示

直接在 Java 代碼中使用

1卸耘、創(chuàng)建動畫

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);

這里使用透明度動畫和位移動畫組合創(chuàng)建一個動畫集，并且分別為這兩個動畫設(shè)置了不同的 Interpolator 以及 持續(xù)時間粘咖。

注意：直接使用某一種動畫是完全一樣的蚣抗，這里使用動畫集僅僅是為了演示。

2瓮下、代碼創(chuàng)建 LayoutAnimationController

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

3翰铡、設(shè)置子視圖顯示的順序

lac.setOrder(LayoutAnimationController.ORDER_NORMAL);

order 可有如下取值：

• ORDER_NORMAL：順序
• ORDER_REVERSE：相反
• ORDER_RANDOM：隨機(jī)

4、為 ViewGroup 設(shè)置 LayoutAnimationController

mContentLV.setLayoutAnimation(lac);

5讽坏、為 ViewGroup 添加子視圖
這里的 ViewGroup 是 ListView锭魔，所以要為其設(shè)置 Adapter：

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

使用很簡單，就這么幾步即可路呜。

在 xml 中定義 LayoutAnimationController

其實與在 Java 代碼中使用是一樣的迷捧，只是定義方式的區(qū)別。

1胀葱、創(chuàng)建 layoutAnimation 的 xml 文件
在 res/anim 文件夾下面創(chuàng)建名為 list_item_anim_layout.xml 的文件漠秋，內(nèi)容如下：

<?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"/>

在這里可以直接設(shè)置子視圖的順序，延遲時間（注意：單位是”秒“）抵屿，以及要顯示的動畫庆锦。

2、在布局中為 ViewGroup 設(shè)置 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 設(shè)置 Adapter
為 ListView 設(shè)置好 Adapter 應(yīng)該就可以看到效果了搂抒。這里就不演示了，代碼在演示項目中都有朝群，感興趣的可以自己下去嘗試燕耿。

注意事項

只在第一次設(shè)置時有效？
示例中使用了 LinearLayout姜胖，通過點擊按鈕往 LinearLayout 中添加和刪除子視圖誉帅。你會發(fā)現(xiàn)在給 LinearLayout 設(shè)置好 LayoutAnimationController 后調(diào)用添加方法（也就是在 oncreate() 方法中執(zhí)行的那段代碼），會有動畫效果右莱。但是蚜锨，當(dāng)你再次點擊”添加“或”刪除“按鈕，并沒有出現(xiàn)動畫效果慢蜓。

這里沒有深入研究了亚再，只是在添加和刪除子視圖之前又調(diào)用了一下 ViewGroup 的 setLayoutAnimation() 方法，但是效果很詭異晨抡，所有的子視圖都會執(zhí)行動畫氛悬。

項目地址

AndroidHacks合集
動畫篇

項目示例代碼：
VGChildrenAnimActivity.java
Countries.java
activity_vgchildrenanim.xml
list_item_anim_layout.xml

參考

LayoutAnimationController