Android Studio 中的 Motion Editor 用法詳解

做者 / Scott Swarthout

在同 Android 開發者社區交流之中，咱們深知動畫效果的加入對於 UI 來講相當重要，它可讓 UI 看起來更加直觀，同時還利於用戶理解其所要表達的意圖。可是，開發者們在 Android 應用中添加複雜的動畫效果卻有着較大的工做量。爲了解決這一問題，咱們使用 Motion Layout 構建了一組功能強大的 API，併爲之提供了 Motion Editor 工具，組合使用時能夠輕鬆構建出像素級別完美的動畫效果。

本文會帶您快速瞭解新的 Motion Editor 工具，以及如何在開發過程當中使用其最新功能。此外，咱們還專門製做了一系列 視頻 來指導您關於包含 Motion Layout 在內的一系列 API 的知識。

Motion Editor 是一款專門針對 MotionLayout 佈局類型所構建的可視化編輯器，經過它能夠輕鬆地建立和預覽動畫效果。自 Android Studio 4.0 版本開始，咱們發佈了穩定版本的 Motion Editor，許多開發者已經在使用它建立動畫效果。

Motion Editor 中運行的動畫

Motion Editor 是 Android Studio Layout Editor (佈局編輯器) 的一個擴展，當您在一個包含 MotionLayout 的 XML 文件中選擇 Design 或 Split 視圖 時，會自動打開 Motion Editor。您能夠使用已在佈局編輯器中所熟知的交互方式來編輯佈局和 Motion Scene 文件，並能夠直接在 Android Studio 預覽界面中對動畫效果進行預覽。

Motion Editor

Motion Editor 的界面由幾個操做面板構成，咱們將會在本文進行一一介紹。最主要的幾塊區域有: Overview (概覽) 面板，Selection (選擇) 面板，Attribute (屬性) 面板和 Preview (預覽) 面板。

Motion Editor 包含四大面板

Overview 面板

MotionLayout 能夠對佈局的變化作動畫處理，在編輯器中該動畫可被指定爲 ConstraintSets 中的 Transition 效果。Motion Editor 能夠經過 Overview 面板將這些狀態的轉變可視化。要編輯 ConstraintSet 中的約束，點擊 Overview 面板中相應的選項便可。

圖中的 MotionLayout Scene 中有 start 和 end 兩個 ConstraintSet，它們之間有一個 Transition 效果

Selection 面板

Selection 面板會根據 Overview 面板中的狀態顯示相應的控件信息，它有三種顯示模式:

1. 選中 Overview 面板中 Motion Layout 時的模式
2. 選中 Overview 面板中 ConstraintSet 時的模式
3. 選中 Overview 面板中 Transition 時的模式

Selection 面板根據 Overview 面板的狀態有三種模式

選中 Overview 面板中 Motion Layout 時的模式

Motion Editor 支持編輯基本的 Motion Layout。當在 Overview 面板中選中 Motion Layout 以後，您能夠選擇相應的組件來查看它的約束是否配置正確。

經過 Selection 面板查看組件的約束是否配置正確

選中 Overview 面板中 ConstraintSet 時的模式

當在 Overview 面板中選中 ConstraintSet 時，Selection 面板會以列表的形式列出全部組件，組件旁邊的選中圖標意味着該組件被當前的 ConstraintSet 所約束。

選擇包含在 ConstraintSet 中的組件

選中 Overview 面板中 Transition 時的模式

當在 Overview 面板中選擇 transition 時，您能夠經過動畫工具欄來控制動畫的播放。當選中某個動畫後，點擊時間軸上的 Play ▶️ 按鈕，能夠預覽動畫效果。

在 Motion Editor 時間軸上預覽動畫效果

關鍵幀

有時您須要修改某視圖在動畫過程當中的路徑，此時即可以藉助 MotionLayout 的關鍵幀來達到目的。咱們在編輯器中集成了關鍵幀編輯功能，讓您能夠輕鬆對動畫進行調整。您能夠點擊 Selection 面板右上角的圖標建立一個新的關鍵幀，而後會打開一個對話框，在該對話框中能夠爲關鍵幀設置各類屬性。若要編輯某個關鍵幀，您能夠點擊菱形 ◆ 圖標來打開屬性面板進行編輯。

在 Selection 面板中建立關鍵幀

Attribute 面板

在 MotionLayout 中建立動畫須要編輯衆多視圖參數，所以咱們在 Motion Editor 中引入了同 Layout Editor 相似的 Attribute (屬性) 面板。在 Attribute 面板中不只能夠方便對 Constraint 的可視化效果進行預覽，還能夠預覽 Motion Scene 文件中視圖的全部屬性效果。

在 Attribute 面板中預覽 Constraint 可視化效果

當您想對某個視圖屬性上添加動畫效果時，而該屬性卻不屬於 ConstraintLayout 或者 MotionLayout API (好比背景色) 時，能夠在 Attribute 面板中建立自定義屬性。咱們還爲自定義視圖屬性添加了自動填充和輸入驗證的功能，方便您的操做。

Preview 面板

Preview 面板的加入使得在處理動畫效果時，可以實現快速編輯並當即獲取反饋，當您對動畫進行細微調整以後，不用再去從新編譯和部署，也能直接預覽最終的動畫效果。

咱們還爲 Preview 面板中添加了一些新的特性，讓開發者們更容易理解所建立的動畫是如何工做的。您能夠使用 Design 視圖和 Blueprint 視圖預覽動畫，在沒有不少視覺干擾的狀況下更清晰地瞭解視圖是如何移動的。

咱們還爲視圖在屏幕上的路徑添加了可視化的功能，包括關鍵幀的標記。咱們但願這些功能可以讓編譯器更容易解析複雜的過渡效果，並簡化建立體驗。

Motion Editor 已在 Android Studio 4.0 中推出，歡迎你們使用並給予咱們反饋。咱們很是渴望看到社區使用 MotionLayout 和 Motion Editor 來構建產品。Android Studio 團隊也會不斷地收集反饋以改善其使用體驗。有任何想法或遇到任何問題，歡迎 提交反饋。

若是您想了解更多本文中使用的代碼以及其餘幾個 MotionLayout 的示例，若是您想了解更多關於 MotionLayout 的內容，請查閱如下資源:

• 使用 MotionLayout 管理 motion 和 widget 的動畫
• 使用 MotionLayout 在 Android 應用中添加動畫 (codelab)
• MotionLayout 示例
• MotionLayout / ConstraintLayout 示例代碼 (Github)