Android Transition Framework詳解---超炫的動(dòng)畫(huà)框架
前言
早在A(yíng)ndroid 4.4，Transition 就已經(jīng)引入，但在5.0才得以真正的實(shí)現(xiàn)。而究竟Transition是用來(lái)干嘛的呢。接下來(lái)我將通過(guò)實(shí)例和原理解析來(lái)分析下Google這個(gè)強(qiáng)大的動(dòng)畫(huà)框架。
先來(lái)張效果圖鎮(zhèn)住場(chǎng)面
這個(gè)效果下文會(huì)介紹如何實(shí)現(xiàn)，不過(guò)要先理解透這個(gè)框架的一些基礎(chǔ)概念。
Transition Framework 核心就是根據(jù)Scene(場(chǎng)景,下文解釋)的不同幫助開(kāi)發(fā)者們自動(dòng)生成動(dòng)畫(huà)。通常主要是通過(guò)以下幾個(gè)方法開(kāi)啟動(dòng)畫(huà)。
- TransitionManager.go()
- beginDelayedTransition()
- setEnterTransition()/setSharedElementEnterTransition()
我們來(lái)逐一解釋以上各種情況
TransitionManager.go()
首先，先介紹下Scene這個(gè)類(lèi)，看看官方的解釋
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.
通俗的解釋就是這個(gè)類(lèi)存儲(chǔ)著一個(gè)根view下的各種view的屬性。通常由getSceneForLayout (ViewGroup sceneRoot,int layoutId,Context context)獲取實(shí)例。
- sceneRoot
scene發(fā)生改變和動(dòng)畫(huà)執(zhí)行的位置
- layoutId
即上文所說(shuō)的根view
可能這樣解釋有點(diǎn)無(wú)力，下面我舉個(gè)例子。
- 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相互切換，播放動(dòng)畫(huà) * @param view
- */
- public void change(View view){
- TransitionManager.go(isScene2?scene1:scene2,new ChangeBounds());
- isScene2=!isScene2;
- }
scene1:
scene2:
注意，兩個(gè)scene布局中1和4，2和3除了圖片位置大小不一樣，其id是一樣的?？梢援?dāng)成一個(gè)view.因?yàn)榉治霰容^起始scene 的不同創(chuàng)建動(dòng)畫(huà)是針對(duì)于同一個(gè)view的。
上述簡(jiǎn)單的例子是通過(guò)第一種方式TransitionManager.go()觸發(fā)動(dòng)畫(huà)。即在進(jìn)入Activity的時(shí)候，手動(dòng)將start scene通過(guò)TransitionManager.go(scene1)設(shè)置為scene1。點(diǎn)擊button通過(guò)TransitionManager.go(scene2，new ChangeBounds())切換到end scene狀態(tài):scene2.Transition 框架通過(guò)ChangeBounds類(lèi)分析start scene和end scene的不同創(chuàng)建并播放動(dòng)畫(huà)。由于ChangeBounds類(lèi)是分析比較兩個(gè)scene中view的位置邊界創(chuàng)建移動(dòng)和縮放動(dòng)畫(huà)。發(fā)現(xiàn)從scene1->scene2其實(shí)是1->4,2->3。于是就執(zhí)行相應(yīng)的動(dòng)畫(huà)，即是如下效果:
類(lèi)似于ChangeBounds類(lèi)的還有以下幾種，他們都是繼承Transiton類(lèi)
- ChangeBounds
檢測(cè)view的位置邊界創(chuàng)建移動(dòng)和縮放動(dòng)畫(huà)
- ChangeTransform
檢測(cè)view的scale和rotation創(chuàng)建縮放和旋轉(zhuǎn)動(dòng)畫(huà)
- ChangeClipBounds
檢測(cè)view的剪切區(qū)域的位置邊界，和ChangeBounds類(lèi)似。不過(guò)ChangeBounds針對(duì)的是view而ChangeClipBounds針對(duì)的是view的剪切區(qū)域(setClipBound(Rect rect)中的rect)。如果沒(méi)有設(shè)置則沒(méi)有動(dòng)畫(huà)效果
- ChangeImageTransform
檢測(cè)ImageView(這里是專(zhuān)指ImageView)的尺寸，位置以及ScaleType，并創(chuàng)建相應(yīng)動(dòng)畫(huà)。
- Fade,Slide,Explode
這三個(gè)都是根據(jù)view的visibility的不同分別創(chuàng)建漸入，滑動(dòng)，爆炸動(dòng)畫(huà)。
以上各個(gè)動(dòng)畫(huà)類(lèi)的實(shí)現(xiàn)效果如下：
- AutoTransition
如果TransitionManager.go(scene1)不指定動(dòng)畫(huà)，則默認(rèn)動(dòng)畫(huà)是AutoTransition類(lèi)。它其實(shí)是一個(gè)動(dòng)畫(huà)集合，查看源碼可知其實(shí)是動(dòng)畫(huà)集合中添加了Fade和ChangeBounds類(lèi)。
- private void init() {
- setOrdering(ORDERING_SEQUENTIAL);
- addTransition(new Fade(Fade.OUT)).
- addTransition(new ChangeBounds()).
- addTransition(new Fade(Fade.IN));
- }
說(shuō)到動(dòng)畫(huà)集合，其實(shí)動(dòng)畫(huà)類(lèi)不僅可以通過(guò)類(lèi)似new ChangeBounds()方法創(chuàng)建，也可以通過(guò)xml文件創(chuàng)建。且如果對(duì)于動(dòng)畫(huà)集合，xml方式可能會(huì)更加方便。
只需要兩步，第一步在res/transition創(chuàng)建一個(gè)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>
然后再代碼中調(diào)用:
- Transition sets=TransitionInflater.from(this).inflateTransition(R.transition.changebounds_and_fade);
最后補(bǔ)充一點(diǎn)，關(guān)于和TransitionManager.go(scene2)其實(shí)是調(diào)用當(dāng)前的scene(scene1)的scene1.exit()以及下一個(gè)scene(scene2)的scene2.enter()
而它們又分別會(huì)觸發(fā)scene1.setExitAction()和scene1.setEnterAction().可以在這兩個(gè)方法中定制一些特別的效果.
beginDelayedTransition()
接下來(lái)介紹下一個(gè)觸發(fā)方式，如果上面的理解透了話(huà)下面的就很簡(jiǎn)單了。之前的那種TransitionManager.go()一直都是根據(jù)xml文件創(chuàng)造start scene和end scene,這樣未免有些麻煩。
而beginDelayedTransition()原理則是通過(guò)代碼改變view的屬性，然后通過(guò)之前介紹的ChangeBounds等類(lèi)分析start scene和end Scene不同來(lái)創(chuàng)建動(dòng)畫(huà)。
依然舉個(gè)例子：
- @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 是當(dāng)前的scene
- TransitionManager.beginDelayedTransition(sceneRoot, TransitionInflater.from(this).inflateTransition(R.transition.explode_and_changebounds));
- //next scene 此時(shí)通過(guò)代碼已改變了scene statue
- changeScene(v);
- }
- private void changeScene(View view) {
- changeSize(view);
- changeVisibility(cuteboy,cutegirl,hxy,lly);
- view.setVisibility(View.VISIBLE);
- }
- /**
- * view的寬高1.5倍和原尺寸大小切換 * 配合ChangeBounds實(shí)現(xiàn)縮放效果 * @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狀態(tài)切換 * @param views
- */
- private void changeVisibility(View ...views){
- for (View view:views){
- view.setVisibility(view.getVisibility()==View.VISIBLE?View.INVISIBLE:View.VISIBLE);
- }
- }
當(dāng)觸發(fā)點(diǎn)擊事件時(shí)候，此時(shí)記錄下當(dāng)前scene status，然后改變被點(diǎn)擊view的尺寸，并改變其他view的visibility，再記錄下改變后的scene status。而本例中beginDelayedTransition()第二個(gè)參數(shù)傳的是一個(gè)ChangeBounds和Explode動(dòng)畫(huà)集合，所以這個(gè)集合的中改變尺寸的執(zhí)行縮放動(dòng)畫(huà),改變visibility的執(zhí)行爆炸效果。整體效果如下:
界面切換動(dòng)畫(huà)
前面說(shuō)了那么多終于到了重頭戲了:Activity/Fragment之前的切換效果。界面切換有兩種，一種是不帶共享元素的Content Transition一種是帶有共享元素的Shared Element Transition。
Content Transition
先解釋下幾個(gè)重要概念：
- A.exitTransition(transition)
Transition框架會(huì)先遍歷A界面確定要執(zhí)行動(dòng)畫(huà)的view(非共享元素view)，執(zhí)行A.exitTransition()前A界面會(huì)獲取界面的start scene(view 處于VISIBLE狀態(tài))，然后將所有的要執(zhí)行動(dòng)畫(huà)的view設(shè)置為INVISIBLE，并獲取此時(shí)的end scene(view 處于INVISIBLE狀態(tài)).根據(jù)transition分析差異的不同創(chuàng)建執(zhí)行動(dòng)畫(huà)。
- B.enterTransition()
Transition框架會(huì)先遍歷B界面，確定要執(zhí)行動(dòng)畫(huà)的view，設(shè)置為INVISIBLE。執(zhí)行B.enterTransition()前獲取此時(shí)的start scene(view 處于INVISIBLE狀態(tài))，然后將所有的要執(zhí)行動(dòng)畫(huà)的view設(shè)置為VISIBLE，并獲取此時(shí)的end scene(view 處于VISIBLE狀態(tài)).根據(jù)transition分析差異的不同創(chuàng)建執(zhí)行動(dòng)畫(huà)。
根據(jù)上文解釋?zhuān)缑媲袚Q動(dòng)畫(huà)是建立在visibility的改變的基礎(chǔ)上的，所以getWindow().setEnterTransition(transition);中的參數(shù)一般傳的是Fade,Slide,Explode類(lèi)的實(shí)例(因?yàn)檫@三個(gè)類(lèi)是通過(guò)分析visibility不同創(chuàng)建動(dòng)畫(huà)的)。通常寫(xiě)一個(gè)完整的Activity Content Transiton有以下幾個(gè)步驟：
- 在style中添加
- <item name="android:windowActivityTransitions">true</item>
Material主題的應(yīng)用自動(dòng)設(shè)置為true.
- 設(shè)置相應(yīng)的A離開(kāi)/B進(jìn)入/B離開(kāi)/A重新進(jìn)入動(dòng)畫(huà)。
- //A 不設(shè)置默認(rèn)為null
- getWindow().setExitTransition(transition);
- //B 不設(shè)置默認(rèn)為Fade
- getWindow().setEnterTransition(transition);
- //B 不設(shè)置默認(rèn)為EnterTransition
- getWindow().setReturnTransition(transition);
- //A 不設(shè)置默認(rèn)為ExitTransition
- getWindow().setReenterTransition(transition);
當(dāng)然也可以在主題中設(shè)置
- <item name="android:windowEnterTransition">@transition/slide_and_fade</item>
- <item name="android:windowReturnTransition">@transition/return_slide</item>
- 跳轉(zhuǎn)界面
這里的跳轉(zhuǎn)界面不能僅僅startActivity(intent),需要
- Bundle bundle=ActivityOptionsCompat.makeSceneTransitionAnimation(activity).toBundle;
- startActivity(intent,bundle)
ok到這里為止既可以運(yùn)行activity之間的切換動(dòng)畫(huà)了。
但是你會(huì)發(fā)現(xiàn)，在界面切換的時(shí)候，A退出時(shí)，過(guò)了一小會(huì)，B就進(jìn)入了，(真是過(guò)分,不給A完全展示ExitTransition)如果你是想等A完全退出后B再進(jìn)入可以通過(guò)設(shè)置setAllowEnterTransitionOverlap(false)(默認(rèn)是true)，同樣可以在xml中設(shè)置：
- <item name="android:windowAllowEnterTransitionOverlap">false</item>
- <item name="android:windowAllowReturnTransitionOverlap">false</item>
說(shuō)了這么多我覺(jué)得又得舉個(gè)簡(jiǎn)單例子。
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));
- //未設(shè)置setReenterTransition()默認(rèn)和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));
- }
實(shí)現(xiàn)的效果如下:
仔細(xì)看著動(dòng)畫(huà)你其實(shí)可以發(fā)現(xiàn)A的狀態(tài)欄也跟著下拉上拉了，而且和下面的視圖有一定的間距。處女座表示不能忍。
其實(shí)從原理上來(lái)解釋?zhuān)珹ctivity的切換動(dòng)畫(huà)針對(duì)的是整個(gè)界面的view的visibility，而有沒(méi)有什么方法能讓Transition框架只關(guān)注某一個(gè)view或者不關(guān)注某個(gè)view呢。當(dāng)然，transition.addTarget()和transition.excludeTarget()可以分別實(shí)現(xiàn)上述功能。
方便的是也可以在xml設(shè)置該屬性，那么我們現(xiàn)在要做的是將statusBar排除掉，可以在slide.xml這樣寫(xiě):
- <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
- <slide android:duration="1000">
- <targets >
- <!--表示除了狀態(tài)欄-->
- <target android:excludeId="@android:id/statusBarBackground"/>
- <!--表示只針對(duì)狀態(tài)欄-->
- <!--<target android:targetId="@android:id/statusBarBackground"/>--> </targets>
- </slide>
- </transitionSet>
大功告成，效果我就不貼了，各位可以腦補(bǔ)一下...
Shared Element Transition
界面切換中往往Content Transition和Shared Element Transition是同時(shí)存在的，區(qū)別于Content Transition,主要有以下幾個(gè)不同點(diǎn):
- startActivity()
- Bundle bundle=ActivityOptionsCompat.makeSceneTransitionAnimation(activity，pairs).toBundle;
- startActivity(intent,bundle)
這里的pairs是Pair<View, String>類(lèi)的實(shí)例集合，存儲(chǔ)著兩個(gè)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()
不設(shè)置的話(huà)默認(rèn)是@android:transition/move動(dòng)畫(huà)。而setExitTransition()和setEnterTransition()默認(rèn)為null和Fade.
其實(shí)Shared Element Transition原理和Content Transition類(lèi)似都是根據(jù)始末scene status的不同創(chuàng)建動(dòng)畫(huà)。
不同的是Content Transition是通過(guò)改變view的visibility來(lái)改變scene狀態(tài)從而進(jìn)一步創(chuàng)建動(dòng)畫(huà)，而Shared Element Transition是分析A B界面共享view的尺寸，位置，樣式的不同創(chuàng)建動(dòng)畫(huà)化的。所以前者通常設(shè)置Fade等Transition后者通常設(shè)置ChangeBounds等Transition.
最后的最后讓我們來(lái)分析如何實(shí)現(xiàn)文章一開(kāi)始的那個(gè)gif圖效果。
- 整個(gè)動(dòng)畫(huà)包括Content Transition和Shared Element Transition。而A界面的setExitTransition()并沒(méi)有設(shè)置為null。
- 當(dāng)進(jìn)入B界面，這里的共享view只是單純的移動(dòng)所以setSharedElementEnterTransition(transition)可以不用設(shè)置，默認(rèn)為move。同時(shí)會(huì)執(zhí)行一個(gè)水紋展開(kāi)動(dòng)畫(huà)，這個(gè)可以通過(guò)ViewAnimationUtils.createCircularReveal()方法實(shí)現(xiàn)。在Shared Element Transition結(jié)束之后執(zhí)行Content Transition,可以看出是Slide動(dòng)畫(huà)。所以可以通過(guò)設(shè)置setExitTransition(new Slide())完成。注意這里Slide只作用于底部的item(要設(shè)置target)，否則就作用于一整個(gè)視圖了。
- 最關(guān)鍵的來(lái)了，在B退出時(shí)候，可以看到屏幕上半部分向上滑過(guò)，下半部分向下滑過(guò)。一種從中間撕開(kāi)的視覺(jué)效果。所以可以將布局一分為二并指定為用兩個(gè)不同方向的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>
這里其實(shí)有個(gè)坑，我們先來(lái)看看isTransitionGroup()這個(gè)方法:
- 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表示這個(gè)ViewGroup作為一個(gè)整體執(zhí)行Activity Transition，false表示這個(gè)ViewGroup中子view各自執(zhí)行各自的。如果這個(gè)ViewGroup設(shè)置了background或者TransitionName，或者setTransitionGroup(true)則返回值為true表示作為一個(gè)整體執(zhí)行動(dòng)畫(huà).
所以這里的viewGroup_bottom和viewGroup_top最好設(shè)置下setTransitionGroup(true).
實(shí)現(xiàn)效果如下，自己加了點(diǎn)其他特效
具體代碼我就不貼了，本文的所有的代碼已上傳Github(我是鏈接)，包括Fragment的切換本文未作介紹代碼中有寫(xiě)。希望大家能點(diǎn)個(gè)star。
如果你看了一遍還是不知所云那我強(qiáng)烈建議你結(jié)合代碼運(yùn)行下在看一遍，其實(shí)搞懂了還是蠻簡(jiǎn)單的。
最后我想說(shuō)的是關(guān)于這個(gè)Transition Framework還有一些內(nèi)容沒(méi)說(shuō)完，可能要等過(guò)段時(shí)間更新了，接下來(lái)還會(huì)寫(xiě)關(guān)于Dagger 2的相關(guān)文章以及NavigationBar的加強(qiáng)版，敬請(qǐng)期待吧。
