Android Transition Framework詳解---超炫的動畫框架

好長時間都沒寫的東西了，這段時間一直不知道該寫些什麼，所以今天趁着午休的時候，分享給大家點我看到的文章，寫的不錯，很早之前就想去實現這個，沒想到今天看到了，哈哈；廢話不多收，直接開車；
很早之前看過的這個動畫效果是在youtobe上，一直沒時間琢磨，現在看到這個感覺還不錯；

前言：

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

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

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;
}

上述簡單的例子是通過第一種方式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。於是就執行相應的動畫，即是如下效果:

類似於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的不同分別創建漸入，滑動，爆炸動畫。

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不同來創建動畫。

依然舉個例子：

@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的執行爆炸效果。整體效果如下:

界面切換動畫

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

Content Transition
先解釋下幾個重要概念：

● 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分析差異的不同創建執行動畫。

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

在style中添加

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

Material主題的應用自動設置爲true.

//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)

但是你會發現，在界面切換的時候，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>

@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));

}

仔細看着動畫你其實可以發現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

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

startActivity()

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

這裏的pairs是Pair

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的不同創建動畫。

最後的最後讓我們來分析如何實現文章一開始的那個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).

本文轉自：http://www.jianshu.com/p/e497123652b5
GitHub 代碼：https://github.com/softwareboy92/TransitionExample