在同 Android 開發(fā)者社區(qū)交流之中，我們深知動畫效果的加入對于 UI 來說至關重要，它可以讓 UI 看起來更加直觀，同時還利于用戶理解其所要表達的意圖。但是，開發(fā)者們在 Android 應用中添加復雜的動畫效果卻有著較大的工作量。為了解決這一問題，我們使用 Motion Layout 構(gòu)建了一組功能強大的 API，并為之提供了 Motion Editor 工具，組合使用時可以輕松構(gòu)建出像素級別完美的動畫效果。 本文會帶您快速了解新的 Motion Editor 工具，以及如何在開發(fā)過程中使用其最新功能。此外，我們還專門制作了一系列視頻來指導您關于包含 Motion Layout 在內(nèi)的一系列 API 的知識。

[[356068]]

Motion Editor 是一款專門針對 MotionLayout 布局類型所構(gòu)建的可視化編輯器，通過它可以輕松地創(chuàng)建和預覽動畫效果。自 Android Studio 4.0 版本開始，我們發(fā)布了穩(wěn)定版本的 Motion Editor，許多開發(fā)者已經(jīng)在使用它創(chuàng)建動畫效果。

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

Motion Editor

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

Overview 面板

MotionLayout 可以對布局的變化做動畫處理，在編輯器中該動畫可被指定為 ConstraintSets 中的 Transition 效果。Motion Editor 可以通過 Overview 面板將這些狀態(tài)的轉(zhuǎn)變可視化。要編輯 ConstraintSet 中的約束，點擊 Overview 面板中相應的選項即可。

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

ConstraintSets

https://developer.android.google.cn/reference/androidx/constraintlayout/widget/ConstraintSet

Selection 面板

Selection 面板會根據(jù) Overview 面板中的狀態(tài)顯示相應的控件信息，它有三種顯示模式:

• 選中 Overview 面板中 Motion Layout 時的模式
• 選中 Overview 面板中 ConstraintSet 時的模式
• 選中 Overview 面板中 Transition 時的模式

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

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

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

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

選中 Overview 面板中 Transition 時的模式

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

關鍵幀

有時您需要修改某視圖在動畫過程中的路徑，此時便可以借助 MotionLayout 的關鍵幀來達到目的。我們在編輯器中集成了關鍵幀編輯功能，讓您可以輕松對動畫進行調(diào)整。您可以點擊 Selection 面板右上角的圖標創(chuàng)建一個新的關鍵幀，然后會打開一個對話框，在該對話框中可以為關鍵幀設置各種屬性。若要編輯某個關鍵幀，您可以點擊菱形 ◆ 圖標來打開屬性面板進行編輯。

Attribute 面板

在 MotionLayout 中創(chuàng)建動畫需要編輯眾多視圖參數(shù)，因此我們在 Motion Editor 中引入了同 Layout Editor 類似的 Attribute (屬性) 面板。在 Attribute 面板中不僅可以方便對 Constraint 的可視化效果進行預覽，還可以預覽 Motion Scene 文件中視圖的所有屬性效果。

當您想對某個視圖屬性上添加動畫效果時，而該屬性卻不屬于 ConstraintLayout 或者 MotionLayout API (比如背景色) 時，可以在 Attribute 面板中創(chuàng)建自定義屬性。我們還為自定義視圖屬性添加了自動填充和輸入驗證的功能，方便您的操作。

Preview 面板

Preview 面板的加入使得在處理動畫效果時，能夠?qū)崿F(xiàn)快速編輯并立即獲取反饋，當您對動畫進行細微調(diào)整之后，不用再去重新編譯和部署，也能直接預覽最終的動畫效果。

我們還為 Preview 面板中添加了一些新的特性，讓開發(fā)者們更容易理解所創(chuàng)建的動畫是如何工作的。您可以使用 Design 視圖和 Blueprint 視圖預覽動畫，在沒有很多視覺干擾的情況下更清晰地了解視圖是如何移動的。

我們還為視圖在屏幕上的路徑添加了可視化的功能，包括關鍵幀的標記。我們希望這些功能能夠讓編譯器更容易解析復雜的過渡效果，并簡化創(chuàng)建體驗。

Motion Editor 已在 Android Studio 4.0 中推出，歡迎大家使用并給予我們反饋。我們非?？释吹缴鐓^(qū)使用 MotionLayout 和 Motion Editor 來構(gòu)建產(chǎn)品。Android Studio 團隊也會不斷地收集反饋以改善其使用體驗。