本文將深入分析共享元素變換（shared element transition）以及它在Activity 和Fragment Transitions API中所扮演的角色。這是這Transition系列文章的第三部分：

第三章（本章）將分為兩部分：上著重底層的原理，下著重api的具體實現，比如延遲某些元素變換的重要性以及SharedElementCallbacks的實現。

什麼是共享元素變換？

元素共享式變換（shared element transition）決定了共享的view元素從一個Activity/Fragment 到另一個Activity/Fragment t的切換中是如何動畫變化的。共享元素在被呼叫Activity進入和返回時播放動畫，共享元素在進入和返回時的變換效果通過window和Fragment的如下方法來設定：

進入：

setSharedElementEnterTransition()

設定在B進入時播放的動畫，共享元素以A中的位置作為起始，B中的位置為結束來播放動畫。

返回：

setSharedElementReturnTransition()

設定在B返回A時的動畫，共享元素以B中的位置作為起始，A中的位置為結束來播放動畫。

注意，Activity Transition API 也可以使用 setSharedElementExitTransition() 和setSharedElementReenterTransition()方法分別設定共享元素的exit 和reenter 變換。但是一般來講這是不必要的。如果你想看先關的例子，可以檢視這篇部落格

this blog post.至於為什麼Fragment中沒有共享元素的exit 和reenter 變換，請檢視George Mount在stackoverflow上的回答:this StackOverflow post。

上圖演示了google play music應用中的共享元素變換效果。變換包含了兩個共享的view元素：一個ImageView以及他的父親CardView。ImageView在兩個activity之間無縫的動畫切換，而CardView則是漸漸的擴充套件到介面上。

在第一章中我們簡單的介紹了這個話題，這篇文章則是更深入的去分析共享元素變換（shared element transition）。共享元素變換的原理是什麼？有哪些共享元素變換效果可用？共享元素變換動畫是如何繪製的，又是在哪裡繪製的？接下來的小節中我們將一一回答。

共享元素變換揭祕

從前兩篇文章中我們知道，一個變換（Transition ）主要有兩方面的職責：

捕獲view開始和結束狀態以及建立一能在兩個狀態間漸變的動畫。共享元素變換沒有什麼不同。在共享元素變換開始之前，必須首先捕獲每個共享元素的開始和結束狀態（呼叫activity以及被呼叫activity中的位置、大小、外觀），有了這些資訊才能決定每個共享元素的入場動畫。

和深入理解Content Transition 中類似，framework的共享元素變換是通過執行時改變其屬性實現的，當Activity A 呼叫 Activity B ，發生的事件流如下：

1.Activity A呼叫startActivity()， Activity B被建立，測量，同時初始化為半透明的視窗和透明的背景顏色。

2.framework重新分配每個共享元素在B中的位置與大小，使其跟A中一模一樣。之後，B的進入變換（enter transition）捕獲到共享元素在B中的初始狀態。

3.framework重新分配每個共享元素在B中的位置與大小，使其跟B中的最終狀態一致。之後，B的進入變換（enter transition）捕獲到共享元素在B中的結束狀態。

4.B的進入變換（enter transition）比較共享元素的初始和結束狀態，同時基於前後狀態的區別建立一個Animator(屬性動畫物件)。

5.framework 命令A隱藏其共享元素，動畫開始執行。隨著動畫的進行，framework 逐漸將B的activity視窗顯示出來，當動畫完成，B的窗口才完全可見。

與內容變換（content transition）取決於view的可見性不同（visibility），共享元素變換取決於每個共享元素的位置、大小以及外觀。在api 21中，框架層提供了幾個Transition 的實現，可以用於定義共享元素在場景中的切換效果。

ChangeBounds -捕獲共享元素的layout bound，然後播放layout bound變化動畫。ChangeBounds 是共享元素變換中用的最多的，因為前後兩個activity中共享元素的大小和位置一般都是不同的。

ChangeTransform -  捕獲共享元素的縮放（scale）與旋轉（rotation）屬性 ，然後播放縮放（scale）與旋轉（rotation）屬性變化動畫。

ChangeClipBounds -  捕獲共享元素clip bounds，然後播放clip bounds變化動畫。

ChangeImageTransform -  捕獲共享元素（ImageView）的transform matrices 屬性，然後播放ImageViewtransform matrices 屬性變化動畫。與ChangeBounds相結合，這個變換可以讓ImageView在動畫中高效實現大小，形狀或者ImageView.ScaleType 屬性平滑過度。

@android:transition/move -  將上述所有變換同時進行的一個TransitionSet 。就如在第一章中所講的一樣，如果共享元素的進入和返回變換沒有特別宣告，框架將使用它作為預設的變換。

我們可以看到，共享元素變換並不是真正實現了兩個activity或者Fragment之間元素的共享，實際上我們看到的幾乎所有變換效果中（不管是B進入還是B返回A）,共享元素都是在B中繪製出來的。Framework沒有真正試圖將A中的某個元素傳遞給B，而是採用了不同的方法來達到相同的視覺效果。A傳遞給B的是共享元素的狀態資訊。B利用這些資訊來初始化共享View元素，讓它們的位置、大小、外觀與在A中的時候完全一致。當變換開始的時候，B中除了共享元素之外，所有的其他元素都是不可見的。隨著動畫的進行，framework 逐漸將B的activity視窗顯示出來，當動畫完成，B的窗口才完全可見。

使用共享元素的 Overlay

最後，我們需要討論一下shared element overlay這個概念才算是對共享元素變換的繪製過程有了一個完整的瞭解。

雖然不是非常明顯的可以看到，共享元素預設其實是繪製在整個view樹結構的最上層，在一個叫ViewOverlay的東西上面。你可能沒聽說過ViewOverlay，他是4.3之後才有的一個新類，它是view的最上面的一個透明的層，新增到ViewOverlay上面的Drawable和view可以被繪製到任何東西的上面，甚至是ViewGroup的子元素。這似乎可以解釋為什麼framework 會選擇ViewOverlay來作為共享元素變換的繪製空間了。

雖然共享元素預設是繪製在ViewOverlay上面，但是framework 還是提供了關閉這個選項的功能，呼叫Window的setSharedElementsUseOverlay(false) 方法。這樣主要是為了防止萬一有這樣的開發需要。如果你選擇了關閉overlay，那麼請注意這是有一定副作用的。

在上圖的效果中，我們運行了兩次不同方式的動畫，第二次便是關閉overlay之後的效果，我們可以明顯的看到這導致了一個問題。

總之除非有一萬個理由，否則不要關閉shared element overlay。

總結

這篇文章涵蓋了如下幾個要點：

1.元素共享式變換（shared element transition）決定了共享的view元素從一個Activity/Fragment 到另一個Activity/Fragment t的切換中是如何動畫變化的。

2.共享元素變換取決於每個共享元素的位置、大小以及外觀。

3.共享元素預設其實是繪製在整個view樹結構的最上層，在一個叫ViewOverlay的東西上面。

4.共享元素變換並不是真正實現了兩個activity或者Fragment之間元素的共享，Framework採用了不同的方法來達到相同的視覺效果。

注：作者在github上上傳了一個transaction的demo，雖然沒有在文章中明確說明，但我覺得就是這系列文章的相關demo：activity-transitions