延遲共享元素的過渡動畫 (part 3b)

• 原文鏈接 : Postponed Shared Element Transitions (part 3b)
• 作者 : Alex Lockwood
• 譯文出自 : 開發(fā)技術(shù)前線 www.devtf.cn
• 譯者 : tiiime
• 校對者: chaossss
• 狀態(tài) : 完成

通過討論 Lollipop Transition API 的一個重要的特性：延遲共享元素的過渡動畫，這篇博文將繼續(xù)我們關(guān)于共享元素 Transition 的深度解析。這也是我關(guān)于 Transition 這個專欄的第四篇文章。

• Part 1: 在 Activity 和 Fragment 中使用 Transition
• Part 2: 深入理解 Transition
• Part 3a: 深入理解共享元素的 Transition
• Part 3b: 延遲共享元素的 Transition
• Part 3c: 共享元素回調(diào)實(shí)踐 (coming soon!)
• Part 4: Activity & Fragment 過渡動畫示例(coming soon!)

我們通過一個常見的問題來解釋為什么需要推遲某些共享元素的過渡動畫。

理解問題

通常問題的根源是框架在 Activity 生命周期非常早的時候啟動共享元素 Transition ?；叵胛覀兊牡谝黄恼?，Transitions 必須捕獲目標(biāo) View 的起始和結(jié)束狀態(tài)來構(gòu)建合適的動畫。因此，如果框架在共享元素獲得它在調(diào)用它的 Activity 中所給定的大小和位置前啟動共享元素的過渡動畫，這個 Transition 將不能正確捕獲到共享元素的結(jié)束狀態(tài)值,生成動畫也會失敗(一個過渡失敗的例子Video 3.3).

Transition 開始前，能否計(jì)算出正確的共享元素的結(jié)束值主要依靠兩個因素:

(1) 調(diào)用共享元素的 Activity 的布局復(fù)雜度以及布局層次結(jié)構(gòu)的深度
(2)調(diào)用共享元素Activity載入數(shù)據(jù)消耗的時間

布局越復(fù)雜，在屏幕上確定共享元素的大小位置耗時越長。同樣，如果調(diào)用共享元素的 Activity 依賴一個異步的數(shù)據(jù)載入，框架仍有可能會在數(shù)據(jù)載入完成前自動開始共享元素 Transition。下面列出的是你可能遇到的常見問題:

• 存在于 Activity 托管的 Fragment 中的共享元素。FragmentTransactions 在 commit 后并不會被立即執(zhí)行，它們會被安排到主線程中等待執(zhí)行。因此，如果共享元素存在的 Fragment 的視圖層和FragmentTransaction沒有被及時執(zhí)行，框架有可能在共享元素被正確測量大小和布局到屏幕前啟動共享元素 Transition。<a id="b1" href="#1">(1)</a>

• 共享元素是一個高分辨率的圖片。給 ImageView 設(shè)置一個超過其初始化邊界的高分辨率圖片，最終可能會導(dǎo)致在這個視圖層里出現(xiàn)額外的布局傳遞，由此增加在共享元素準(zhǔn)備好前就啟動 Transition 的幾率。流行的異步圖片處理庫比如 Volley 和 Picasso ，也不能可靠的解決這個問題：框架不能預(yù)先了解圖片是要被下載，縮放還是在后臺線程中從磁盤讀取，也不管圖片是否處理完畢就啟動共享元素 Transition。

• 共享元素依賴于異步的數(shù)據(jù)加載如果共享元素所需的數(shù)據(jù)是通過AsyncTask，AsyncQueryHandler,Loader或者其他類似的東西加載，在它們獲得在調(diào)用它們的 Activity 的最終數(shù)據(jù)（大小、位置）前，框架就有可能在主線程中啟動 Transition。

現(xiàn)在你可能會想：如果有辦法能讓暫時延遲 Transition 的使用，直到我們確定了共享元素的確切大小和位置才使用它就好了。幸好 Activity Transitions API<a id="b2" href="#2">(2)</a> 為我們提供了解決方案。

在 Activity 的onCreate()中調(diào)用postponeEnterTransition() 方法來暫時阻止啟動共享元素 Transition。之后，你需要在共享元素準(zhǔn)備好后調(diào)用 startPostponedEnterTransition 來恢復(fù)過渡效果。常見的模式是在一個OnPreDrawListener中啟動延時 Transition，它會在共享元素測量和布局完畢后被調(diào)用<a id="b3" href="#3">(3)</a>。

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

    // Postpone the shared element enter transition.
    postponeEnterTransition();

    // TODO: Call the "scheduleStartPostponedTransition()" method
    // below when you know for certain that the shared element is
    // ready for the transition to begin.
}

/**
 * Schedules the shared element transition to be started immediately
 * after the shared element has been measured and laid out within the
 * activity's view hierarchy. Some common places where it might make
 * sense to call this method are:
 *
 * (1) Inside a Fragment's onCreateView() method (if the shared element
 *     lives inside a Fragment hosted by the called Activity).
 *
 * (2) Inside a Picasso Callback object (if you need to wait for Picasso to
 *     asynchronously load/scale a bitmap before the transition can begin).
 *
 * (3) Inside a LoaderCallback's onLoadFinished() method (if the shared
 *     element depends on data queried by a Loader).
 */
private void scheduleStartPostponedTransition(final View sharedElement) {
    sharedElement.getViewTreeObserver().addOnPreDrawListener(
        new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                sharedElement.getViewTreeObserver().removeOnPreDrawListener(this);
                startPostponedEnterTransition();
                return true;
            }
        });
}

忽略方法名，這里還有第二種方法可以延遲共享元素的返回 Transition，在調(diào)用Activity的onActivityReenter() 方法中延緩返回 Transition<a id="b4" href="#4">(4)</a>

/**
 * Don't forget to call setResult(Activity.RESULT_OK) in the returning
 * activity or else this method won't be called!
 */
@Override
public void onActivityReenter(int resultCode, Intent data) {
    super.onActivityReenter(resultCode, data);

    // Postpone the shared element return transition.
    postponeEnterTransition();

    // TODO: Call the "scheduleStartPostponedTransition()" method
    // above when you know for certain that the shared element is
    // ready for the transition to begin.
}

盡管添加延時可以讓共享元素 Transition 更加流暢準(zhǔn)確，但是你也要知道在應(yīng)用中引入共享元素 Transition 的延遲可能會產(chǎn)生一些負(fù)面影響：

• 調(diào)用postponeEnterTransition后不要忘記調(diào)用startPostponedEnterTransition。
  忘記調(diào)用startPostponedEnterTransition會讓你的應(yīng)用處于死鎖狀態(tài)，用戶無法進(jìn)入下個Activity。

• 不要將共享元素 Transition 延遲設(shè)置到1s以上。延遲時間過長會在應(yīng)用中產(chǎn)生不必要的卡頓，影響用戶體驗(yàn)。

感謝閱讀！希望這篇文章對你有所幫助。

<a id="1" href="#b1">1</a>: 當(dāng)然，許多應(yīng)用通過調(diào)用 FragmentManager#executePendingTransactions() 來避開這個問題，這樣會強(qiáng)制立即執(zhí)行FragmentTransactions而不是異步。

<a id="2" href="#b2">2</a>: 注意!postponeEnterTransition()和startPostponedEnterTransition()只對 Activity Transition起作用，對Fragment無效。詳細(xì)信息可以在這里找到 StackOverflow & Google+

<a id="3" href="#b3">3</a>: 小貼士:你可以先調(diào)用 View#isLayoutRequested() 來確認(rèn)是否需要調(diào)用 OnPreDrawListener，有必要的話 View#isLaidOut() 在一些情況下也能派上用場

<a id="4" href="#b4">4</a>: 在開發(fā)者選項(xiàng)中啟用不保留 Activity 選項(xiàng)可以方便調(diào)試共享元素返回/重新進(jìn)入時對應(yīng)過渡動畫的行為，這也可以幫助測試在返回的過渡效果開始之前可能發(fā)生最糟糕的情況( Activity 需要重新構(gòu)造布局加載數(shù)據(jù)...)