前言

早在Android 4.4，Transition 就已經引入，但在5.0才得以真正的實現。而究竟Transition是用來幹嘛的呢。接下來我將通過例項和原理解析來分析下Google這個強大的動畫框架。

先來張效果圖鎮住場面

Google Play上的Newsstand app(v3.3)

這個效果下文會介紹如何實現，不過要先理解透這個框架的一些基礎概念。

Transition Framework 核心就是根據Scene(場景,下文解釋)的不同幫助開發者們自動生成動畫。通常主要是通過以下幾個方法開啟動畫。

• TransitionManager.go()
• beginDelayedTransition()
• setEnterTransition() / setSharedElementEnterTransition()

我們來逐一解釋以上各種情況

TransitionManager.go()

首先，先介紹下Scene這個類，看看官方的解釋

A scene represents the collection of values that various properties in the View hierarchy will have when the scene is applied. A Scene can be configured to automatically run a Transition when it is applied, which will animate the various property changes that take place during the scene change.

通俗的解釋就是這個類儲存著一個根view下的各種view的屬性。通常由 getSceneForLayout (ViewGroup sceneRoot,int layoutId,Context context) 獲取例項。

• sceneRoot
  scene發生改變和動畫執行的位置
• layoutId
  即上文所說的根view

可能這樣解釋有點無力，下面我舉個例子。

栗子

private Scene scene1;
private Scene scene2;
private boolean isScene2;
@Override
protected void onCreate(Bundle savedInstanceState)
 
 {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_scene);
    initToolbar();
    initScene();
}

private void initScene() {
    ViewGroup sceneRoot= (ViewGroup) findViewById(R.id.scene_root);
    scene1=Scene.getSceneForLayout(sceneRoot,R.layout.scene_1,this);
    scene2=Scene.getSceneForLayout(sceneRoot,R.layout.scene_2,this);
    TransitionManager.go(scene1);
}

/**
 * scene1和scene2相互切換，播放動畫 * @param view
  */
public void change(View view){
    TransitionManager.go(isScene2?scene1:scene2,new ChangeBounds());
    isScene2=!isScene2;
}

scene1:

scene1

scene2:

scene2

注意，兩個scene佈局中1和4，2和3除了圖片位置大小不一樣，其id是一樣的。可以當成一個view.因為分析比較起始scene 的不同建立動畫是針對於同一個view的。

上述簡單的例子是通過第一種方式 TransitionManager.go() 觸發動畫。即在進入Activity的時候，手動將start scene通過

TransitionManager.go(scene1) 設定為scene1。點選button通過 TransitionManager.go(scene2，new ChangeBounds()) 切換到end scene狀態:scene2.Transition 框架通過 ChangeBounds 類分析start scene和end scene的不同建立並播放動畫。由於 ChangeBounds 類是分析比較兩個scene中view的位置邊界建立移動和縮放動畫。發現從scene1->scene2其實是1->4,2->3。於是就執行相應的動畫，即是如下效果:

scene_simple.gif

類似於 ChangeBounds 類的還有以下幾種，他們都是繼承Transiton類

• ChangeBounds
  檢測view的位置邊界建立移動和縮放動畫
• ChangeTransform
  檢測view的scale和rotation建立縮放和旋轉動畫
• ChangeClipBounds
  檢測view的剪下區域的位置邊界，和ChangeBounds類似。不過ChangeBounds針對的是view而ChangeClipBounds針對的是view的剪下區域( setClipBound(Rect rect) 中的rect)。如果沒有設定則沒有動畫效果
• ChangeImageTransform
  檢測 ImageView （這裡是專指ImageView）的尺寸，位置以及ScaleType，並建立相應動畫。
• Fade,Slide,Explode
  這三個都是根據view的visibility的不同分別建立漸入，滑動，爆炸動畫。
  以上各個動畫類的實現效果如下：

scene_all.gif

• AutoTransition

  如果 TransitionManager.go(scene1)

  不指定動畫，則預設動畫是AutoTransition類。它其實是一個動畫集合，檢視原始碼可知其實是動畫集合中添加了Fade和ChangeBounds類。

  private void init() {
    setOrdering(ORDERING_SEQUENTIAL);
    addTransition(new Fade(Fade.OUT)).
            addTransition(new ChangeBounds()).
            addTransition(new Fade(Fade.IN));
  }

  說到動畫集合，其實動畫類不僅可以通過類似 new ChangeBounds() 方法建立，也可以通過xml檔案建立。且如果對於動畫集合，xml方式可能會更加方便。

  只需要兩步，第一步在res/transition建立一個xml檔案

  如下:

  res/transition/changebounds_and_fade.xml

  :

  <?xml version="1.0" encoding="utf-8"?>
  <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeBounds />
  <fade />
  </transitionSet>

然後再程式碼中呼叫:

Transition sets=TransitionInflater.from(this).inflateTransition(R.transition.changebounds_and_fade);

最後補充一點，關於和 TransitionManager.go(scene2) 其實是呼叫當前的scene(scene1)的 scene1.exit() 以及下一個scene(scene2)的 scene2.enter()
而它們又分別會觸發 scene1.setExitAction() 和 scene1.setEnterAction() .可以在這兩個方法中定製一些特別的效果.

beginDelayedTransition()

接下來介紹下一個觸發方式，如果上面的理解透了話下面的就很簡單了。之前的那種 TransitionManager.go() 一直都是根據xml檔案創造start scene和end scene,這樣未免有些麻煩。

而 beginDelayedTransition() 原理則是通過程式碼改變view的屬性，然後通過之前介紹的ChangeBounds等類分析start scene和end Scene不同來建立動畫。

依然舉個例子：

栗子x2

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_begin_delayed);
    initToolBar();
    initView();
}

@Override
public void onClick(View v) {
    //start scene 是當前的scene
  TransitionManager.beginDelayedTransition(sceneRoot, TransitionInflater.from(this).inflateTransition(R.transition.explode_and_changebounds));
    //next scene 此時通過程式碼已改變了scene statue
  changeScene(v);
}

private void changeScene(View view) {
    changeSize(view);
    changeVisibility(cuteboy,cutegirl,hxy,lly);
    view.setVisibility(View.VISIBLE);
}

/**
 * view的寬高1.5倍和原尺寸大小切換 * 配合ChangeBounds實現縮放效果 * @param view
  */
private void changeSize(View view) {
    isImageBigger=!isImageBigger;
    ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
    if(isImageBigger){
        layoutParams.width=(int)(1.5*primarySize);
        layoutParams.height=(int)(1.5*primarySize);
    }else {
        layoutParams.width=primarySize;
        layoutParams.height=primarySize;
    }
    view.setLayoutParams(layoutParams);
}

/**
 * VISIBLE和INVISIBLE狀態切換 * @param views
  */
private void changeVisibility(View ...views){
    for (View view:views){
        view.setVisibility(view.getVisibility()==View.VISIBLE?View.INVISIBLE:View.VISIBLE);
    }
}

當觸發點選事件時候，此時記錄下當前scene status，然後改變被點選view的尺寸，並改變其他view的visibility，再記錄下改變後的scene status。而本例中 beginDelayedTransition() 第二個引數傳的是一個 ChangeBounds 和 Explode 動畫集合，所以這個集合的中改變尺寸的執行縮放動畫,改變visibility的執行爆炸效果。整體效果如下:

beginDelayed.gif

介面切換動畫

前面說了那麼多終於到了重頭戲了:Activity/Fragment之前的切換效果。介面切換有兩種，一種是不帶共享元素的Content Transition一種是帶有共享元素的Shared Element Transition。

Content Transition

先解釋下幾個重要概念：

transition_A_to_B.png

• A.exitTransition(transition)
  Transition框架會先遍歷A介面確定要執行動畫的view(非共享元素view)，執行 A.exitTransition() 前A介面會獲取介面的start scene(view 處於VISIBLE狀態)，然後將所有的要執行動畫的view設定為INVISIBLE，並獲取此時的end scene(view 處於INVISIBLE狀態).根據transition分析差異的不同建立執行動畫。
• B.enterTransition()
  Transition框架會先遍歷B介面，確定要執行動畫的view，設定為INVISIBLE。執行 B.enterTransition() 前獲取此時的start scene(view 處於INVISIBLE狀態)，然後將所有的要執行動畫的view設定為VISIBLE，並獲取此時的end scene(view 處於VISIBLE狀態).根據transition分析差異的不同建立執行動畫。

transition_B_to_A.png

根據上文解釋，介面切換動畫是建立在visibility的改變的基礎上的，所以 getWindow().setEnterTransition(transition); 中的引數一般傳的是 Fade , Slide , Explode 類的例項（因為這三個類是通過分析visibility不同建立動畫的）。通常寫一個完整的Activity Content Transiton有以下幾個步驟：

• 在style中新增

  <item name="android:windowActivityTransitions">true</item>

  Material主題的應用自動設定為true.
• 設定相應的A離開/B進入/B離開/A重新進入動畫。

  //A 不設定預設為null
  getWindow().setExitTransition(transition);
  //B 不設定預設為Fade
  getWindow().setEnterTransition(transition);
  //B 不設定預設為EnterTransition
  getWindow().setReturnTransition(transition);
  //A 不設定預設為ExitTransition
  getWindow().setReenterTransition(transition);

  當然也可以在主題中設定

  <item name="android:windowEnterTransition">@transition/slide_and_fade</item>
  <item name="android:windowReturnTransition">@transition/return_slide</item>

• 跳轉介面
  這裡的跳轉介面不能僅僅 startActivity(intent) ,
  需要

  Bundle bundle=ActivityOptionsCompat.makeSceneTransitionAnimation(activity).toBundle;
  startActivity(intent,bundle)

ok到這裡為止既可以執行activity之間的切換動畫了。

但是你會發現，在介面切換的時候，A退出時，過了一小會，B就進入了，（真是過分,不給A完全展示ExitTransition）如果你是想等A完全退出後B再進入可以通過設定 setAllowEnterTransitionOverlap(false) (預設是true)，同樣可以在xml中設定：

<item name="android:windowAllowEnterTransitionOverlap">false</item>
<item name="android:windowAllowReturnTransitionOverlap">false</item>

說了這麼多我覺得又得舉個簡單例子。

A.Activity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initToolBar();
    getWindow().setExitTransition(TransitionInflater.from(this).inflateTransition(R.transition.slide));
    //未設定setReenterTransition()預設和setExitTransition一樣
}

public void goContentTransitions(View view){
    Intent intent = new Intent(this, ContentTransitionsActivity.class);
    ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
    startActivity(intent,activityOptionsCompat.toBundle());
}

res/translation/slide.xml:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<slide android:duration="1000"></slide>
</transitionSet>

B.Activity:

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

    Slide slide=new Slide();
    slide.setDuration(500);
    slide.setSlideEdge(Gravity.LEFT);
    getWindow().setEnterTransition(slide);
    getWindow().setReenterTransition(new Explode().setDuration(600));

}

實現的效果如下:

contentTransition.gif

仔細看著動畫你其實可以發現A的狀態列也跟著下拉上拉了，而且和下面的檢視有一定的間距。處女座表示不能忍。

其實從原理上來解釋，Activity的切換動畫針對的是整個介面的view的visibility，而有沒有什麼方法能讓Transition框架只關注某一個view或者不關注某個view呢。當然， transition.addTarget() 和 transition.excludeTarget() 可以分別實現上述功能。

方便的是也可以在xml設定該屬性，那麼我們現在要做的是將statusBar排除掉，可以在slide.xml這樣寫:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<slide android:duration="1000">
    <targets >
        <!--表示除了狀態列-->
        <target android:excludeId="@android:id/statusBarBackground"/>
        <!--表示只針對狀態列-->
 <!--<target android:targetId="@android:id/statusBarBackground"/>-->  </targets>
</slide>
</transitionSet>

大功告成，效果我就不貼了，各位可以腦補一下...

Shared Element Transition

shared_element.png

介面切換中往往Content Transition和Shared Element Transition是同時存在的，區別於Content Transition,主要有以下幾個不同點:

• startActivity()

  Bundle bundle=ActivityOptionsCompat.makeSceneTransitionAnimation(activity，pairs).toBundle;
  startActivity(intent,bundle)

  這裡的pairs是 Pair<View, String> 類的例項集合，儲存著兩個activity之間共享view和name。這裡的name要和B介面的共享view的 transitionName 一致。就像這樣：

Intent intent = new Intent(this, WithSharedElementTransitionsActivity.class);
ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this
  ,new Pair<View, String>(shared_image,"shared_image_")
        ,new Pair<View, String>(shared_text,"shared_text_"));
startActivity(intent,activityOptionsCompat.toBundle());

//xml
<TextView
  android:text="withShared"
  android:transitionName="shared_text_"
 style="@style/MaterialAnimations.TextAppearance.Title.Inverse"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />


><de.hdodenhof.circleimageview.CircleImageView
  android:id="@+id/icon_gg"
  android:layout_centerInParent="true"
  android:src="@mipmap/xkl"
  android:transitionName="shared_image_"
  android:layout_width="150dp"
  android:layout_height="150dp" />

• setSharedElementEnterTransition() / setSharedElementReturnTransition()

不設定的話預設是 @android:transition/move 動畫。而 setExitTransition() 和 setEnterTransition() 預設為null和Fade.

其實Shared Element Transition原理和Content Transition類似都是根據始末scene status的不同建立動畫。

不同的是Content Transition是通過改變view的visibility來改變scene狀態從而進一步建立動畫，而Shared Element Transition是分析A B介面共享view的尺寸，位置，樣式的不同建立動畫化的。所以前者通常設定Fade等Transition後者通常設定ChangeBounds等Transition.

最後的最後讓我們來分析如何實現文章一開始的那個gif圖效果。

1. 整個動畫包括Content Transition和Shared Element Transition。而A介面的 setExitTransition() 並沒有設定為null。
2. 當進入B介面，這裡的共享view只是單純的移動所以 setSharedElementEnterTransition(transition) 可以不用設定，預設為move。同時會執行一個水紋展開動畫，這個可以通過 ViewAnimationUtils.createCircularReveal() 方法實現。在Shared Element Transition結束之後執行Content Transition,可以看出是Slide動畫。所以可以通過設定 setExitTransition(new Slide()) 完成。注意這裡Slide只作用於底部的item(要設定target)，否則就作用於一整個檢視了。
3. 最關鍵的來了，在B退出時候，可以看到螢幕上半部分向上滑過，下半部分向下滑過。一種從中間撕開的視覺效果。所以可以將佈局一分為二並指定為用兩個不同方向的Slide的Target,差不多像這樣:

   <transitionSet
   android:duration="800" xmlns:android="http://schemas.android.com/apk/res/android">
   <slide android:slideEdge="top">
    <targets >
        <target android:targetId="@id/viewGroup_top"></target>
    </targets>
   </slide>
   <slide android:slideEdge="bottom">
    <targets >
        <target android:targetId="@id/viewGroup_bottom"></target>
    </targets>
   </slide>
   </transitionSet>

   這裡其實有個坑，我們先來看看 isTransitionGroup() 這個方法:

   public boolean isTransitionGroup() {
    if ((mGroupFlags & FLAG_IS_TRANSITION_GROUP_SET) != 0) {
        return ((mGroupFlags & FLAG_IS_TRANSITION_GROUP) != 0);
    } else {
        final ViewOutlineProvider outlineProvider = getOutlineProvider();
        return getBackground() != null || getTransitionName() != null ||
                (outlineProvider != null && outlineProvider != ViewOutlineProvider.BACKGROUND);
    }
   }

   返回值為true表示這個ViewGroup作為一個整體執行Activity Transition，false表示這個ViewGroup中子view各自執行各自的。如果這個ViewGroup設定了background或者TransitionName，或者 setTransitionGroup(true) 則返回值為true表示作為一個整體執行動畫.
   所以這裡的 viewGroup_bottom 和 viewGroup_top 最好設定下 setTransitionGroup(true) .

實現效果如下，自己加了點其他特效

finish

具體程式碼我就不貼了，本文的所有的程式碼已上傳Github，包括Fragment的切換本文未作介紹程式碼中有寫。希望大家能點個star。

如果你看了一遍還是不知所云那我強烈建議你結合程式碼執行下在看一遍，其實搞懂了還是蠻簡單的。

最後我想說的是關於這個Transition Framework還有一些內容沒說完，可能要等過段時間更新了，接下來還會寫關於Dagger 2的相關文章以及NavigationBar的加強版，敬請期待吧。