Android動(dòng)畫總結(jié)——布局動(dòng)畫、轉(zhuǎn)場(chǎng)動(dòng)畫

之前一篇文章總結(jié)了View動(dòng)畫、屬性動(dòng)畫、幀動(dòng)畫，這篇文章繼續(xù)總結(jié)布局動(dòng)畫、轉(zhuǎn)場(chǎng)動(dòng)畫。

一、布局動(dòng)畫

布局動(dòng)畫的作用于ViewGroup，執(zhí)行動(dòng)畫效果的是內(nèi)部的子View。布局動(dòng)畫在android中可以通過LayoutAnimation或LayoutTransition來實(shí)現(xiàn)。

1.LayoutAnimation

LayoutAnimation實(shí)際上是一個(gè)View動(dòng)畫，用來控制子View顯示時(shí)的動(dòng)畫效果?？梢酝ㄟ^Java代碼或者Xml文件來定義LayoutAnimation動(dòng)畫。

（1）通過Java代碼來定義LayoutAnimation

定義子View的顯示動(dòng)畫layout_item_anim_set.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="300"
     android:interpolator="@android:anim/accelerate_interpolator"
     android:shareInterpolator="true">

    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
    <translate
        android:fromXDelta="500"
        android:toXDelta="0"/>
</set>

以ListView為例，給ListView設(shè)置item的顯示動(dòng)畫：

private void setLayoutAnimation() {
    Animation animation = AnimationUtils.loadAnimation(this, R.anim.layout_item_anim_set);
    LayoutAnimationController controller = new LayoutAnimationController(animation);
    controller.setDelay(0.5f);
    controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
    mListView.setLayoutAnimation(controller);
}
（2）通過Xml代碼來定義LayoutAnimation：

layout_anim.xml

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

在ListView所在布局中調(diào)用：

<ListView
    android:id="@+id/list_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="#f1f1f1"
    android:dividerHeight="1dp"
    android:layoutAnimation="@anim/layout_anim"
    android:listSelector="?android:attr/selectableItemBackground"/>

setDelay()方法以及android:delay屬性表示子View動(dòng)畫顯示的延遲時(shí)間比例。比如動(dòng)畫執(zhí)行時(shí)間是300ms，延遲比例是0.5，那么延遲時(shí)間就是150ms，在Listview中，第一個(gè)item在延遲150ms開始動(dòng)畫后，第二個(gè)在300ms后開始動(dòng)畫，第三個(gè)在450ms后開始，以此類推。
setOder()方法以及android:animationOrder表示動(dòng)畫執(zhí)行的順序類型，共有三種：normal表示子View按順序顯示，reverse表示子View按逆序顯示，random表示子View隨機(jī)先后顯示。

LayoutAnimation效果圖

2.LayoutTransition

LayoutTransition用于在ViewGroup中有子View添加、刪除、隱藏、顯示時(shí)所有子View動(dòng)畫效果。LayoutTransition有5中動(dòng)畫變化形式

LayoutTransition.APPEARING：子View添加到容器中時(shí)的動(dòng)畫效果LayoutTransition.CHANGE_APPEARING：子View添加到容器中時(shí)，其他子View位置改變的動(dòng)畫效果
LayoutTransition.DISAPPEARING：子View被移除時(shí)的動(dòng)畫效果
LayoutTransition.CHANGE_DISAPPEARING：子View被移除時(shí)，其他子View的動(dòng)畫效果
LayoutTransition.CHANGING：子View在容器中位置變化時(shí)其他子View的動(dòng)畫效果

（1）使用默認(rèn)的動(dòng)畫樣式

只需要在使用的LinearLayout、FrameLayout、RelativeLayout等ViewGroup容器的布局文件中添加android:animateLayoutChanges="true"即可，系統(tǒng)會(huì)使用默認(rèn)的LayoutTransition來實(shí)現(xiàn)子View添加、刪除或變化是的動(dòng)畫效果。

默認(rèn)的LayoutTransition效果

（2）使用自定義動(dòng)畫樣式
private void init() {
    mContainer = (LinearLayout) findViewById(R.id.container);
    setLayoutTransition();
}

private void setLayoutTransition() {
    LayoutTransition transition = new LayoutTransition();
    // 子View添加到mContainer時(shí)的動(dòng)畫
    Animator appearAnim = ObjectAnimator
            .ofFloat(null, "rotationX", 90, 0)
            .setDuration(transition.getDuration(LayoutTransition.APPEARING));
    transition.setAnimator(LayoutTransition.APPEARING, appearAnim);
    // 子Veiw從mContainer中移除時(shí)的動(dòng)畫
    Animator disappearAnim = ObjectAnimator
            .ofFloat(null, "rotationX", 0, 90)
            .setDuration(transition.getDuration(LayoutTransition.DISAPPEARING));
    transition.setAnimator(LayoutTransition.DISAPPEARING, disappearAnim);
    // 子Veiw添加到mContainer中時(shí)其他子View的動(dòng)畫
    PropertyValuesHolder pvhLeft = PropertyValuesHolder.ofInt("left", 0, 0);
    PropertyValuesHolder pvhTop = PropertyValuesHolder.ofInt("top", 0, 0);
    PropertyValuesHolder pvhTranslationY = PropertyValuesHolder
            .ofFloat("translationX", 0, 150, 0);
    Animator changeAppearAnim = ObjectAnimator
            .ofPropertyValuesHolder(mContainer, pvhLeft, pvhTop, pvhTranslationY)
            .setDuration(transition.getDuration(LayoutTransition.CHANGE_APPEARING));
    transition.setAnimator(LayoutTransition.CHANGE_APPEARING, changeAppearAnim);
    // 子View從mContainer中移除時(shí)其他子View的動(dòng)畫
    PropertyValuesHolder outLeft = PropertyValuesHolder.ofInt("left", 0, 0);
    PropertyValuesHolder outTop = PropertyValuesHolder.ofInt("top", 0, 0);
    PropertyValuesHolder pvhTranslationYDis = PropertyValuesHolder
            .ofFloat("translationX", 0, -150, 0);
    ObjectAnimator changeDisAppearAnim = ObjectAnimator
            .ofPropertyValuesHolder(mContainer, outLeft, outTop, pvhTranslationYDis)
            .setDuration(transition.getDuration(LayoutTransition.CHANGE_DISAPPEARING));
    transition.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, changeDisAppearAnim);

    mContainer.setLayoutTransition(transition);
}

// 添加子View到第0個(gè)位置
public void addData(View view) {
    View child = LayoutInflater.from(this)
            .inflate(R.layout.item, mContainer, false);
    mContainer.addView(child, 0);
}

// 移除第0個(gè)子View
public void deleteData(View view) {
    if (mContainer.getChildCount() != 0) mContainer.removeViewAt(0);
}

在使用PropertyValuesHolder時(shí)，需要注意一下幾點(diǎn)：
1.LayoutTransition.CHANGE_APPEARING和LayoutTransition.CHANGE_DISAPPEARING必須使用PropertyValuesHolder構(gòu)造動(dòng)畫才會(huì)有效果，其他任何方式構(gòu)造動(dòng)畫都不會(huì)有效果。
2.在使用PropertyValuesHolder時(shí)，”left”、”top”屬性就算不需要變化也必須要寫，如果不需要變化可以寫成：

PropertyValuesHolder pvhLeft = PropertyValuesHolder.ofInt("left", 0, 0);
PropertyValuesHolder pvhTop = PropertyValuesHolder.ofInt("top", 0, 0);

3.ofInt，ofFloat中的參數(shù)值，第一個(gè)值和最后一個(gè)值必須相同，不然此屬性所對(duì)應(yīng)的的動(dòng)畫將被放棄，在此屬性值上將不會(huì)有效果：

PropertyValuesHolder pvhTranslationY = PropertyValuesHolder
            .ofFloat("translationX", 0, 150, 0);

4.使用的ofInt，ofFloat中，如果所有參數(shù)值都相同，也將不會(huì)有動(dòng)畫效果。

PropertyValuesHolder pvhTop = PropertyValuesHolder.ofInt("top", 0, 0);

動(dòng)畫的參數(shù)全部相同，left這個(gè)屬性的動(dòng)畫不會(huì)有任何效果。

說明：關(guān)于PropertyValuesHolder幾個(gè)注意點(diǎn)參考自文章animateLayoutChanges與LayoutTransition。

自定義動(dòng)畫樣式配置LayoutTransition效果

二、轉(zhuǎn)場(chǎng)動(dòng)畫

1.Android 5.0之前轉(zhuǎn)場(chǎng)動(dòng)畫

在Android 5.0以前實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫是通過補(bǔ)間動(dòng)畫來實(shí)現(xiàn)，通常是在Activity中是overridePendingTransition(int enterAnim, int exitAnim)方法。
enterAnim和exitAnim兩個(gè)參數(shù)對(duì)應(yīng)的是兩個(gè)View動(dòng)畫：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_anim);
    setStartActivityAnim();
}

private void setStartActivityAnim() {
    overridePendingTransition(R.anim.activity_right_in, R.anim.activity_left_out);
}

入場(chǎng)動(dòng)畫activity_right_in.xml：

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromXDelta="100%p"
    android:toXDelta="0"/>

出場(chǎng)動(dòng)畫activity_left_out.xml：

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromXDelta="0"
    android:toXDelta="-100%p"/>

在Activity的onCreate中調(diào)用overridePendingTransition方法只對(duì)主動(dòng)啟動(dòng)Activity有效，如果我們返回上一個(gè)Activity也需要同樣的轉(zhuǎn)場(chǎng)動(dòng)畫，就需要在finish方法也添加上這個(gè)方法。

@Override
public void finish() {
    super.finish();
    setEndActivityAnim();
}

private void setEndActivityAnim() {
    overridePendingTransition(R.anim.activity_left_in, R.anim.activity_right_out);
}

finish時(shí)入場(chǎng)動(dòng)畫activity_left_in.xml：

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromXDelta="-100%p"
    android:toXDelta="0"/>

finish時(shí)出場(chǎng)動(dòng)畫activity_right_out.xml：

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromXDelta="0"
    android:toXDelta="100%p"/>
Android 5.0前轉(zhuǎn)場(chǎng)動(dòng)畫效果
2.Android 5.0之后轉(zhuǎn)場(chǎng)動(dòng)畫 Activity Transition

Android 5.0之后，谷歌引入了 Activity Transition 來實(shí)現(xiàn)交互更加友好的轉(zhuǎn)場(chǎng)動(dòng)畫效果。

Tansition的類型共有三種：
進(jìn)入 —— 決定Activity中的所有視圖怎么進(jìn)入屏幕
退出 —— 決定Activity中的所有視圖怎么退出屏幕
共享元素 —— 決定兩個(gè)Activity之間的過渡時(shí)怎么共享它們的視圖

進(jìn)入和退出包含如下動(dòng)畫效果：
explode(分解) —— 從屏幕中間進(jìn)或出
slide(滑動(dòng)) —— 從屏幕邊緣進(jìn)或出地
fade(淡出) —— 改變屏幕上視圖的不透明度實(shí)現(xiàn)添加或移除視圖的效果

共享元素包含如下動(dòng)畫效果：
changeBounds —— 改變目標(biāo)視圖的布局邊界
changeClipBounds —— 裁剪目標(biāo)視圖邊界
changeTransform —— 改變目標(biāo)視圖的縮放比例和旋轉(zhuǎn)角度
changeImageTransform —— 改變目標(biāo)圖片的大小和縮放比例

說明：Tansition分類及動(dòng)畫效果說明參考《Android群英傳》

先來看下Explode（分解）、Slide（滑動(dòng)）、Fade（淡出）三種轉(zhuǎn)場(chǎng)動(dòng)畫的使用。

第一個(gè)Activity中：

public void explode(View view) {
    Intent intent = new Intent(this, NextTransitionActivity.class);
    intent.putExtra("flag", "explode");
    startActivity(intent,
            ActivityOptionsCompat.makeSceneTransitionAnimation(this).toBundle());
}

public void slide(View view) {
    Intent intent = new Intent(this, NextTransitionActivity.class);
    intent.putExtra("flag", "slide");
    startActivity(intent,
            ActivityOptionsCompat.makeSceneTransitionAnimation(this).toBundle());
}

public void fade(View view) {
    Intent intent = new Intent(this, NextTransitionActivity.class);
    intent.putExtra("flag", "fade");
    startActivity(intent,
            ActivityOptionsCompat.makeSceneTransitionAnimation(this).toBundle());
}

啟動(dòng)的第二個(gè)Activity中：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
    switch (getIntent().getStringExtra("flag")) {
        case "explode":
            getWindow().setEnterTransition(new Explode());
            getWindow().setExitTransition(new Explode());
            break;
        case "slide":
            getWindow().setEnterTransition(new Slide());
            getWindow().setExitTransition(new Slide());
            break;
        case "fade":
            getWindow().setEnterTransition(new Fade());
            getWindow().setExitTransition(new Fade());
            break;
    }
    setContentView(R.layout.activity_next_transition);
}

在第二個(gè)Activity中可以通過在style中配置<item name="android:windowContentTransitions">true</item>
就不需要調(diào)用getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)。


共享元素轉(zhuǎn)場(chǎng)動(dòng)畫，使用也比較簡(jiǎn)單：

@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    TransitionAdapter.TransitionViewHolder holder = (TransitionAdapter.TransitionViewHolder) view.getTag();
    View shareViewImg = holder.civImg;
    View shareViewName = holder.tvName;
    Intent intent = new Intent(this, NextTransitionActivity.class);
    intent.putExtra("flag", "share");
    startActivity(intent, ActivityOptionsCompat
            .makeSceneTransitionAnimation(this,
                    Pair.create(shareViewImg, "shareView_img"),
                    Pair.create(shareViewName, "shareView_name"))
            .toBundle());
}

這里使用ListView實(shí)現(xiàn)一個(gè)列表，列表中的頭像和名字作為共享元素。在ListView的item的布局以及第二個(gè)啟動(dòng)的Activity的布局中，被共享的View都需要在布局文件中添加上相同android:transitionName屬性，當(dāng)然也可以在Java代碼中通過ViewCompat.setTransitionName(View view, String transitionName)方法來設(shè)置共享View的transitionName。
我們給頭像和名稱分別指定android:transitionName="shareView_img"和android:transitionName="shareView_name"。
點(diǎn)擊item后啟動(dòng)目標(biāo)Activity時(shí)，指定的options參數(shù)為：

ActivityOptionsCompat.makeSceneTransitionAnimation(this,
        Pair.create(shareViewImg,"shareView_img"),
        Pair.create(shareViewName, "shareView_name"))
.toBundle());

通過options參數(shù)，可以利用Pair構(gòu)造多個(gè)共享元素，但是共享元素View的共享名稱transitionName必須一一對(duì)應(yīng)。

共享元素轉(zhuǎn)場(chǎng)動(dòng)畫效果

源碼：https://github.com/xiaoyanger0825/AnimationSummary

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,323評(píng)論 25贊 708
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 47,183評(píng)論 22贊 665
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,650評(píng)論 4贊 61
  • 六一兒童節(jié)快樂，希望身邊的人都能擁有一顆兒童之心，保持點(diǎn)兒童般的純真和快樂，或許我們的生活會(huì)有不同的變化。 所為人...
    開拓者2021閱讀 304評(píng)論 0贊 0
  • 夜色深如海，寒氣疾若潮。 惱人秋風(fēng)逐花凋。 香冷高樓無緒， 詩吟度殘宵。 試墨遠(yuǎn)箋瘦， 憑欄嘆夢(mèng)遙。 鬢絲依舊為誰...
    逸塵居士閱讀 228評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容