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

vnoj9675 8年前發布 | 15K 次閱讀安卓開發 Android開發移動開發

前言

早在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;
}</code></pre> 
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));

}</code></pre> 說到動畫集合，其實動畫類不僅可以通過類似 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> </li> 
</ul> 
然后再代碼中調用: 
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);

 }
}</code></pre> 
當觸發點擊事件時候，此時記錄下當前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());
}</code></pre> 
  
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));


}</code></pre> 
  
實現的效果如下: 
   
  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,"sharedimage")
        ,new Pair<View, String>(shared_text,"sharedtext"));
startActivity(intent,activityOptionsCompat.toBundle());
//xml
<TextView
  android:text="withShared"
  android:transitionName="sharedtext"
 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="sharedimage"
  android:layout_width="150dp"
  android:layout_height="150dp" /></code></pre> 
  
 
   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圖效果。 
   
   整個動畫包括Content Transition和Shared Element Transition。而A界面的 setExitTransition() 并沒有設置為null。 
   當進入B界面，這里的共享view只是單純的移動所以 setSharedElementEnterTransition(transition) 可以不用設置，默認為move。同時會執行一個水紋展開動畫，這個可以通過 ViewAnimationUtils.createCircularReveal() 方法實現。在Shared Element Transition結束之后執行Content Transition,可以看出是Slide動畫。所以可以通過設置 setExitTransition(new Slide()) 完成。注意這里Slide只作用于底部的item(要設置target)，否則就作用于一整個視圖了。 
   最關鍵的來了，在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的加強版，敬請期待吧。 
   
  拜拜 
  參考 
   
   Getting Started with Activity & Fragment Transitions 
   https://github.com/lgvalle/Material-Animations 
   
  如果有什么錯誤歡迎指正。 
    
  來自：http://www.jianshu.com/p/e497123652b5


                    
                         本文由用戶 vnoj9675 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1488856831494.html
                         安卓開發 Android開發 移動開發

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

前言

TransitionManager.go()

beginDelayedTransition()

界面切換動畫

Content Transition

Shared Element Transition

參考

相關經驗

相關資訊

相關文檔

目錄