前言
早在Android 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)面
Google Play上的Newsstand app(v3.3)
這個(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:
scene1
scene2:
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à)，即是如下效果:
scene_simple.gif
類(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)效果如下：
scene_all.gif
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ā)方式，如果上面的理解透了話下面的就很簡(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è)例子：
栗子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 是當(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í)行爆炸效果。整體效果如下:
beginDelayed.gif
界面切換動(dòng)畫(huà)
前面說(shuō)了那么多終于到了重頭戲了:Activity/Fragment之前的切換效果。界面切換有兩種，一種是不帶共享元素的Content Transition一種是帶有共享元素的Shared Element Transition。
Content Transition
先解釋下幾個(gè)重要概念：
transition_A_to_B.png
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à)。
transition_B_to_A.png
根據(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)的效果如下:
contentTransition.gif
仔細(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
shared_element.png
界面切換中往往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 類(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(shared_image,"shared_image_")? ? ? ? ,new Pair(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è)置的話默認(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)其他特效
finish
具體代碼我就不貼了，本文的所有的代碼已上傳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)期待吧。
拜拜
參考
