轉場/過渡(Transition) 動畫

Transition 是指不同 UI 狀態轉換時的動畫。

界面過渡

界面 的 過渡 可以 分為 進入/出場 的過渡動畫

設置進場/出場/返回/重新進入 的過渡場動畫：

• Window.setEnterTransition(Transition transition) 設置進場動畫 主界面-(跳轉)->A，A 進入過渡
• Window.setExitTransition(Transition transition) 設置出場動畫 A-(跳轉)->B，A 出場過渡
• Window.setReturnTransition(Transition transition) 設置返回動畫 A-(返回)->主界面，A 出場過渡
• Window.setReenterTransition(Transition transition) 設置重新進入動畫 B-(返回)->A，A 進入過渡
• setAllowEnterTransitionOverlap()：是否運行布局顯示時重疊
• setAllowReturnTransitionOverlap()：是否運行布局顯示時重疊

來看一個界面過渡的動畫效果小栗子

看下小栗子代碼

// 過渡效果 Explode explode = new Explode(); // 從屏幕中間進入或退出，移動視圖 explode.setInterpolator() // 設置插值器 expload.setDuration(1000) // 過渡動效執行時間 // 主界面 getWindow().setReenterTransition(explode); // 重新進入 getWindow().setExitTransition(explode); // 出場 // 界面A getWindow().setReenterTransition(explode); // 重新進入 getWindow().setExitTransition(explode); // 出場 getWindow().setReturnTransition(explode); // 返回 getWindow().setEnterTransition(explode); // 進入 //界面B getWindow().setEnterTransition(explode); getWindow().setReturnTransition(explode);// 啟動Activity，讓過渡動畫生效 ActivityOptions activityOptions = ActivityOptions.makeSceneTransitionAnimation(TransitionManagerActivity.this); startActivity(intent, activityOptions.toBundle());

相關知識點1(過渡transition效果)
進入/出場/重新進入/返回過渡效果(這三個類都繼承于 Transition ，有一些相同的屬性 setDuration,setInterpolator)

• Explode(分解)：從場景的中心移入或移出 官方API資料
• Slide(滑動)：從場景的邊緣移入或移出，滑動 (Gravity 可以設置方向 LEFT, TOP等)， [官方API資料] (https://developer.android.google.cn/reference/android/support/transition/Slide)
• Fade(淡出)：調整透明度產生漸變效果 官方API資料
  

xml方式的過渡效果，類似前面章節動畫的XML文件

Transition explode = TransitionInflater.from(this).inflateTransition(R.transition.new_explode); // 存放的目錄為 res/transition/new_explode.xml <explode xmlns:android="http://schemas.android.com/apk/res/android"android:interpolator="@android:interpolator/插值器"android:duration="2000" />

主題Style設置

舉個栗子： <style name="AppTheme" parent="Theme.xxxx.xxxx"><item name="android:windowExitTransition">@transition/new_explode</item><item name="android:windowEnterAnimation">@transition/new_explode</item><item name="android:windowReenterTransition">@transition/new_explode</item><item name="android:windowReturnTransition">@transition/new_explode</item> </style>

相關知識點2(ActivityOptions)

• makeSceneTransitionAnimation(Activity activity, Pair<View, String>... sharedElements) - 用在共享，expolad，slide，fade 上
• makeCustomAnimation(Context context, int enterResId, int exitResId) - 使用自定義的xml動畫
• makeScaleUpAnimation(View source, int startX, int startY, int width, int height) - 從指定大小放大到最大顯示
• makeClipRevealAnimation(View source, int startX, int startY, int width, int height) - 從一個點以圓形漸變到滿屏
• makeThumbnailScaleUpAnimation(View source, Bitmap thumbnail, int startX, int startY) - 縮略圖形縮放轉場動畫

ActivityOptions的小栗子
makeSceneTransitionAnimation
這個在前面已經使用過，后續會講解的 共享元素界面過渡 的小栗子

makeCustomAnimation 自定義 進入，退出動畫

# 從 界面A(exit:no_anim) 進入 界面B(enter:enter_up) ActivityOptionsCompat.makeCustomAnimation(this, R.anim.enter_up, R.anim.no_anim);# 界面B enter:res/anim/enter_up.xml <set xmlns:android="http://schemas.android.com/apk/res/android"android:duration="10000"><translate android:fromYDelta="100%p"/><translate android:toYDelta="0%p"/> </set># 界面A exit:res/anim/no_anim.xml <alpha xmlns:android="http://schemas.android.com/apk/res/android"android:fromAlpha="1.0"android:toAlpha="0.1"android:duration="10000" />

makeScaleUpAnimation | makeClipRevealAnimation | makeThumbnailScaleUpAnimation
這三種是系統提供的默認動畫效果, 我實際使用感覺效果不是很明顯, 感覺用處不大.
感興趣的同學可以自行搜索

• makeScaleUpAnimation：比如 界面A 點擊某個View，打開B頁面，B頁面會以相對于View的某個位置放大展開。
  

ActivityOptions options = ActivityOptions.makeScaleUpAnimation(view, 0, 0, //拉伸開始的坐標view.getMeasuredWidth(), view.getMeasuredHeight()); // 初始的寬高 startActivity(intent, options.toBundle());

• makeClipRevealAnimation：跳轉新頁面時，新頁面的剪切范圍逐漸擴大，直到完全顯示。(從一個點以圓形漸變到滿屏)

• makeThumbnailScaleUpAnimation：切換時，會先顯示一個Bitmap，再過渡到新的頁面。
  

Bitmap bitmap = view.getDrawingCache(); ActivityOptions options = ActivityOptions.makeThumbnailScaleUpAnimation(view, bitmap, 0, 0); startActivity(intent, options.toBundle());

相關知識點3(過渡transition效果2)

• ChangeBounds - 檢測view的位置邊界創建移動和縮放 過渡動畫
• ChangeClipBounds - 檢測view的scale和rotation創建縮放和旋轉動畫
• ChangeTransform - 檢測view的剪切區域的位置邊界，和ChangeBounds類似。不過ChangeBounds針對的是view而ChangeClipBounds針對的是view的剪切區域(setClipBound(Rect rect) 中的rect)。如果沒有設置則沒有動畫效果
• ChangeImageTransform - 檢測ImageView（這里是專指ImageView）的尺寸，位置以及ScaleType，并創建相應動畫。
  以上的 繼承Transiton類
  后續的布局場景切換會使用這個知識點來講解.

參考資料

自定義transition
當然你可以繼承Transition，編寫自己的自定義 Transition. 感興趣的同學可以自行搜索相關資料.

public class CustomTransition extends Transition {@Overridepublic void captureStartValues(TransitionValues values) {}@Overridepublic void captureEndValues(TransitionValues values) {}@Overridepublic Animator createAnimator(ViewGroup sceneRoot,TransitionValues startValues,TransitionValues endValues) {} }

場景小劇場

這里可以看看 Launcher3 startActivity 的使用，啟動第三方的應用，保持了統一的啟動過渡動畫，它的方式也是安全啟動的代碼；

建議編寫電視相關的桌面的時候按照Launcher3的方式來寫.

代碼片段

共享元素界面過渡

從一個界面 跳轉 到 一個新的界面，界面元素 過渡 到 新界面的元素上.

如何去實現共享元素的過渡的動畫效果

比如 Activity1 跳轉到 Activity2，共享元素 view1->view2:

為兩個頁面的共享元素指定同樣 的 transitionName

# Activity1，你需要設置 view1 的 transitionName 的名稱為 "ShardTest" Intent intent = new Intent(this, Activity2.class); ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, view1, "ShardTest"); startActivity(intent, options.toBundle()); # activity2 的 view2 需要和 Activity2 的 view1 的 transitionName 的名稱保持一致. 1. 代碼中使用(代碼中使用View.setTransitionName(String)方法) ViewCompat.setTransitionName(view2, "ShardTest"); 2. 布局XML中指定(在布局文件中使用android:transitionName屬性) android:transitionName="robot"

如果界面上又多個共享元素，要如何寫？

如果有多個共享元素，也可以使用下面的方式：

Pair.create(view2, "ShardTestOne") new Pair<View, String>(view2, "ShardTestOne")ActivityOptionsCompat.makeSceneTransitionAnimation(this,Pair.create(view1, "ShardTestOne"), Pair.create(view11, "ShardTestTwo"));

在另外一端，也需要處理多個共享元素：

ViewCompat.setTransitionName(view2, "ShardTestOne"); ViewCompat.setTransitionName(view22, "ShardTestTwo"); // 或者布局中指定(android:transitionName)，這里不過多解釋，同上

看看效果，這就是imageview與TextView共享元素的效果

電視系統中 SystemUI 最近任務的共享元素的過渡動畫效果 栗子，可以看看效果(從系統設置的界面到最近任務界面的縮略圖布局)

TranstionManger + Screne(場景) 布局過渡

Android L(api19) 引入的場景(Scene)動畫的擴展. 使開發者更加方便的實現布局(界面)變化時候的過渡動畫.

相關API：

• Scene.getSceneForLayout(ViewGroup sceneRoot, int layoutId, Context context) 根據布局ID，加載一個場景
• Scene(ViewGroup sceneRoot, View view) 根據 view, 加載一個場景
• TransitionManager.go(Scene scene, Transition transition) 切換場景布局
• TransitionManager.beginDelayedTransition 保存一個當前視圖樹狀態的場景，

參考官方的API文檔

舉幾個小栗子

兩個布局的過渡

// 從布局生成場景(Scene) final Scene scene1 = Scene.getSceneForLayout(container, R.layout.scene1_layout, context); // View scene1Layout = LayoutInflater.from(context).inflate(R.layout.scene1_layout, null); final Scene scene2 = Scene.getSceneForLayout(container, R.layout.scene2_layout/*scene1Layout*/, context); TransitionManager.go(scene1, new Fade()); // fade_in 淡入視圖，fade_out 淡出視圖，fade_in_out（默認) TransitionManager.go(scene2, new Fade());

一個界面中的兩個 view 過渡

final Scene scene1 = new Scene(containerView, imageview1); final Scene scene2 = new Scene(container, imageview2); TransitionManager.go(scene1, transition); TransitionManager.go(scene2, transition);

控件的屬性改變的過渡

ChangeBounds transition = new ChangeBounds(); // 執行TransitionManager.beginDelayedTransition后，會保存一個當前視圖樹狀態的場景 TransitionManager.beginDelayedTransition(containerView, transition); // ViewGroup.LayoutParams lp = containerView.getLayoutParams(); lp.width = 200; // width = 500; lp.height = 200; // height = 500; container.setLayoutParams(lp);

如果上面的栗子不太直觀，可以看看其它的效果(改變了寬高，隱藏，顯示 屬性，使用的 explode + Changebounds)

可以使用XML方式加載過渡效果

Transition transition = TransitionInflater.from(context).inflateTransition(R.transition.test_trantion);// test_trantion.xml <?xml version="1.0" encoding="utf-8"?> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"android:duration="1500"android:interpolator="@android:interpolator/decelerate_cubic"><changeBounds /><explode /> </transitionSet>

再看一個 Changebounds 小栗子效果

相關DEMO代碼

感興趣的小伙伴 查詢 官方資料 或者 搜索相關資料

也可以了解 最新的 布局過渡 ConstraintLayout 2.0 的 motionlayout

---

注意

1.從 Activity1 跳轉到 Activity2 的后，如果要退出 Activity2 ，調用 Activity.finishAfterTransition()，不要調用 Activity.finish().
不然沒有從 Activity2 回到 Activity1 的動畫效果.

2.如果不生效可以加入支持

// 1. 主題 <item name="android:windowContentTransitions">true</item> // 2. 代碼加入，記得要在 setContentView 之前加. getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); setContentView(R.layout.activity_start_anim);

3.Overlay的具體效果不太明白，但是從語義來說應該是讓動畫更加的融合自然。禁用(false)/開啟(true) 默認效果
getWindow().setSharedElementsUseOverlay(true);

參考資料

谷歌過渡動畫指南
過渡動畫視頻1
過渡動畫視頻2
高逼格Android轉場動畫
Android轉場動畫和共享元素動畫兼容5.0以下版本的實現
動起來！動起來！- Android Transitions 轉場動畫
Android炫酷的Activity切換效果，共享元素
Android動畫之Transition和TransitionManager使用
Android Transition Framework詳解—超炫的動畫框架
A beginners guide to implement Android Animations (Part 2)
Animate all the things. Transitions in Android
程序員與設計/動效師的溝通工具

---

Android動畫了解—屬性動畫(Property Animation)<=上個章節 下個章節=> Android動畫了解—RecyclerView Animator

總結

以上是生活随笔為你收集整理的Android动画了解—转场/过渡(Transition) 动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。