使用RecyclerView和LayoutAnimation給列表添加進入動畫

使用RecyclerView和LayoutAnimation給列表添加進入動畫

白詩秀兒 收藏於2018-05-14  轉藏1次舉報

這裏講解下使用RecyclerView和LayoutAnimation給列表添加進入動畫。分爲三個步驟：

1. 給列表項添加動畫
2. 使用列表項的動畫定義LayoutAnimation
3. RecyclerView應用LayoutAnimation的動畫

使用LayoutAnimation定義動畫的好處是，它是單獨定義，能夠應用於任何ViewGroup的子類。這裏是以RecyclerView爲示例。

示例效果

示例是一個向下掉的進入效果，如圖：

定義列表項動畫

在res/anim/路徑下添加文件item_animation_fall_down.xml，它用來定義列表項的動畫。添加內容以下：

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="@integer/anim_duration_medium">

    <translate
        android:fromYDelta="-20%"
        android:toYDelta="0"
        android:interpolator="@android:anim/decelerate_interpolator"
        />

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:interpolator="@android:anim/decelerate_interpolator"
        />

    <scale
        android:fromXScale="105%"
        android:fromYScale="105%"
        android:toXScale="100%"
        android:toYScale="100%"
        android:pivotX="50%"
        android:pivotY="50%"
        android:interpolator="@android:anim/decelerate_interpolator"
        />

</set>

說明：

• Translate Y -20%到0%：在動畫開始以前，向上移動視圖20％的高度，並讓它落到最終位置。
• Alpha 0到1：視圖從開始徹底不可見，並緩慢出現，直至徹底可見。
• Scale X/Y 105% 到 100%：scale設置爲105％，以使其縮小至最終尺寸。 這會使它看起來好像掉下來同樣，落到背景上。

定義LayoutAnimation

使用上面定義的每一項的動畫來定義LayoutAnimation。在res/anim/添加layout_animation_fall_down.xml文件，它用來定義LayoutAnimation。內容以下：

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

• android:animation="@anim/item_animation_fall_down」：定義將哪一個動畫應用於佈局中的每一項。
• android:delay=」15%"：設置動畫延遲，0%表示全部項目同時進行動畫，100%表示每一個項目完成其動畫後纔開始下一個項目。15%則表示項目動畫到達15%時開始下一個項目的動畫。
• android:animationOrder="normal"：控制內容的動畫順序，有三種類型：normal，reverse和random。normal表示根據佈局的天然順序（垂直：從上到下，水平：從左到右）出現動畫。reverse與normal相反。random表示動畫隨機出現。

應用LayoutAnimation

有兩種方式使用LayoutAnimation：編程方式和xml方式。

編程方式：

int resId = R.anim.layout_animation_fall_down;
LayoutAnimationController animation = AnimationUtils.loadLayoutAnimation(ctx, resId);
recyclerview.setLayoutAnimation(animation);

xml方式：

<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"                                        
    android:layoutAnimation="@anim/layout_animation_fall_down"
    />

若是須要更改數據集，能夠這樣作：

private void runLayoutAnimation(final RecyclerView recyclerView) {
    final Context context = recyclerView.getContext();
    final LayoutAnimationController controller =
            AnimationUtils.loadLayoutAnimation(context, R.anim.layout_animation_fall_down);

    recyclerView.setLayoutAnimation(controller);
    recyclerView.getAdapter().notifyDataSetChanged();
    recyclerView.scheduleLayoutAnimation();
}

動畫二：從右側滑入

項目動畫：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="@integer/anim_duration_long">

    <translate
        android:interpolator="@android:anim/decelerate_interpolator"
        android:fromXDelta="100%p"
        android:toXDelta="0"
        />

    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        />

</set>

LayoutAnimation動畫

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

動畫三：從底部滑入

項目動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="@integer/anim_duration_long">

    <translate
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromYDelta="50%p"
        android:toYDelta="0"
        />

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        />

</set>

LayoutAnimation動畫

<?xml version=1.0 encoding=utf-8?>
<layoutAnimation
    xmlns:android=http://schemas.android.com/apk/res/android
    android:animation=@anim/item_animation_from_bottom
    android:delay=15%
    android:animationOrder=normal
    />

摘錄自：https://proandroiddev.com/enter-animation-using-recyclerview-and-layoutanimation-part-1-list-75a874a5d213