在 Android 開(kāi)發(fā)的世界中，有大量的小部件和庫(kù)可用，您可以使用它們?yōu)槟?Android 應(yīng)用程序創(chuàng)建令人驚嘆的動(dòng)畫(huà)。一種這樣的工具是 MotionLayout。它是一個(gè)完全聲明性的工具，允許在 XML 中描述復(fù)雜的轉(zhuǎn)換。此外，Android Studio 提供圖形工具，Android 中的 MotionLayout 向后兼容 API 級(jí)別 14。在這篇博文中，我們涵蓋了 android 中 MotionLayout 的所有方面，以及添加動(dòng)畫(huà)的分步指南到您的 Android 應(yīng)用程序，使您能夠根據(jù)您的要求為您的用戶(hù)創(chuàng)建令人驚嘆的交互式體驗(yàn)。

Android MotionLayout簡(jiǎn)介

MotionLayout 是一個(gè) Android 布局選項(xiàng)，可幫助開(kāi)發(fā)人員管理其應(yīng)用程序中的運(yùn)動(dòng)和小部件動(dòng)畫(huà)。作為 ConstraintLayout 的子類(lèi)，它提供了基于其豐富布局功能的各種功能。這種布局類(lèi)型使每個(gè) Android 開(kāi)發(fā)人員都能夠使用關(guān)鍵幀和約束在不同的 UI 元素之間創(chuàng)建交互式動(dòng)畫(huà)和過(guò)渡。

Android MotionLayout 可以更輕松地使用開(kāi)始和結(jié)束狀態(tài)定義動(dòng)畫(huà)，以自動(dòng)生成在它們之間平滑過(guò)渡所需的中間幀。動(dòng)畫(huà)可以包括移動(dòng)、旋轉(zhuǎn)、縮放、alpha 淡化等。

通過(guò)彌合布局轉(zhuǎn)換和復(fù)雜運(yùn)動(dòng)處理之間的差距，Android 中的 MotionLayout提供了屬性動(dòng)畫(huà)框架、TransitionManager 和 Coordinator Layout 之間的混合功能。它還支持可搜索的過(guò)渡，允許開(kāi)發(fā)人員根據(jù)特定條件（例如觸摸輸入）顯示變化中的任何點(diǎn)。此外，MotionLayout 支持關(guān)鍵幀，可實(shí)現(xiàn)完全自定義的過(guò)渡以滿(mǎn)足您的需求。

MotionLayout 最重要的優(yōu)點(diǎn)之一是它是完全聲明性的，這意味著您可以在 XML 中描述任何轉(zhuǎn)換，無(wú)論多么復(fù)雜。因此，無(wú)需編寫(xiě)大量代碼即可創(chuàng)建和管理動(dòng)畫(huà)變得更加輕松。MotionLayout Android 是一個(gè)支持庫(kù)，并且向后兼容 API 級(jí)別 14。

在 Android 中使用 MotionLayout 的好處

Android 框架提供了多種方法，例如 Animated Vector Drawable、Property Animation Framework、Layout Transition Animations、Layout Transitions with TransitionManager、CoordinatorLayout 等，我們可以通過(guò)這些方法為應(yīng)用程序添加動(dòng)畫(huà)。但是，了解對(duì) MotionLayout 的需求以及它與現(xiàn)有的有何不同是至關(guān)重要的。

• MotionLayout Android 旨在彌合布局轉(zhuǎn)換和復(fù)雜運(yùn)動(dòng)處理之間的差距。我們也可以將Android 中的 MotionLayout稱(chēng)為屬性動(dòng)畫(huà)框架、TransitionManager 和 CoordinatorLayout 的混合體。

• 它允許描述兩個(gè)布局之間的轉(zhuǎn)換（如 TransitionManager），但也可以為任何屬性（不僅僅是布局屬性）設(shè)置動(dòng)畫(huà)。

• 它具有與 CoordinatorLayout 類(lèi)似的固有可搜索過(guò)渡支持，它允許僅通過(guò)觸摸驅(qū)動(dòng)過(guò)渡并立即過(guò)渡到任何點(diǎn)。

• 同樣，它支持觸摸處理和關(guān)鍵幀，從而使開(kāi)發(fā)人員可以輕松地根據(jù)自己的需要自定義過(guò)渡。

• 正如我們之前介紹的，Android 的 MotionLayout 是完全聲明式的，這意味著您可以在 XML 中完全描述一個(gè)復(fù)雜的過(guò)渡——不需要代碼來(lái)通過(guò)代碼來(lái)表達(dá)運(yùn)動(dòng)，現(xiàn)有的屬性動(dòng)畫(huà)框架已經(jīng)提供了一種很好的方式來(lái)實(shí)現(xiàn)它。

• 對(duì)聲明式運(yùn)動(dòng)規(guī)范的關(guān)注將簡(jiǎn)化此類(lèi)動(dòng)畫(huà)的創(chuàng)建，并為在 Android Studio 中提供出色的圖形工具開(kāi)辟道路。

• 最后，作為 ConstraintLayout 2.0 的一部分，它是一個(gè)向后兼容 API 級(jí)別 14 (ICS) 的支持庫(kù)，與大約 99.8% 的 Android 設(shè)備兼容。

使用 Motion Layout Android 將動(dòng)畫(huà)添加到您的應(yīng)用程序

Android 中的 MotionLayout 可以實(shí)現(xiàn)的一些動(dòng)畫(huà)樣式是關(guān)鍵幀和可搜索的過(guò)渡。關(guān)鍵幀使您能夠自定義過(guò)渡以滿(mǎn)足您的需要。另一方面，seekable transitions 允許您跳轉(zhuǎn)到動(dòng)畫(huà)中的特定點(diǎn)。MotionLayout 的一大優(yōu)勢(shì)是它是完全聲明式的。這個(gè)因素非常關(guān)鍵，尤其是在構(gòu)建復(fù)雜的應(yīng)用程序時(shí)。所以，事不宜遲，讓我們使用 Android 中的 MotionLayout 為您的應(yīng)用程序添加一些很棒的動(dòng)畫(huà)：

第一步：添加 ConstraintLayout 依賴(lài)

第一步是將下面給出的依賴(lài)項(xiàng)添加到您的應(yīng)用程序的構(gòu)建.gradle文件：

實(shí)現(xiàn) 'androidx.constraintlayout:constraintlayout:2.1.4'

第 2 步：創(chuàng)建 MotionLayout 文件

然后，在您的 XML 布局文件中創(chuàng)建一個(gè) MotionLayout，并使用 ConstraintSets 定義動(dòng)畫(huà)的開(kāi)始和結(jié)束狀態(tài)。根據(jù)下面給出的示例：

<?xml version="1.0" encoding="utf-8"?><!-- activity_main.xml --><androidx.constraintlayout.motion.widget.MotionLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/motionLayout"
   android:background="@color/black"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   應(yīng)用程序：layoutDescription =“@xml/motion_scene”
   應(yīng)用程序：motionDebug =“SHOW_PATH”
   工具：showPaths="true">
   <圖像視圖
       android:id="@+id/星號(hào)"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/ic_star"/></androidx.constraintlayout.motion.widget.MotionLayout>

在上面的代碼中，我們定義了兩個(gè) ConstraintSet（開(kāi)始和結(jié)束），它們代表動(dòng)畫(huà)的開(kāi)始和結(jié)束狀態(tài)以及我們想要?jiǎng)赢?huà)的視圖。

第 3 步：創(chuàng)建 MotionScene

在定義動(dòng)畫(huà)的 Res > XML 文件夾中創(chuàng)建一個(gè) motion_scene.xml 文件。在此文件中，您可以定義指定動(dòng)畫(huà)的不同狀態(tài)以及這些狀態(tài)之間的過(guò)渡的關(guān)鍵幀。查看下面的代碼：

<?xml version="1.0" encoding="utf-8"?><動(dòng)態(tài)場(chǎng)景
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:motion="http://schemas.android.com/apk/res-auto">
   <過(guò)渡
       動(dòng)作：constraintSetStart="@+id/start"
       動(dòng)作：constraintSetEnd="@+id/end"
       運(yùn)動(dòng)：持續(xù)時(shí)間=“1000”
       運(yùn)動(dòng)：motionInterpolator =“線(xiàn)性”>
       <滑動(dòng)時(shí)
           動(dòng)作：touchAnchorId="@+id/star"
           運(yùn)動(dòng)：touchAnchorSide =“右”
           運(yùn)動(dòng)：dragDirection =“向右拖動(dòng)”/>
       <關(guān)鍵幀集>
           <關(guān)鍵位置
               運(yùn)動(dòng)：keyPositionType =“pathRelative”
               運(yùn)動(dòng)：percentY =“-0.25”
               運(yùn)動(dòng)：framePosition =“50”
               動(dòng)作：motionTarget="@id/star"/>
       </關(guān)鍵幀集>
   </過(guò)渡>
   <ConstraintSet android:id="@+id/start">
       <約束
           android:id="@id/star"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/ic_star"
           android:layout_marginStart="8dp"
           運(yùn)動(dòng)：layout_constraintBottom_toBottomOf =“父母”
           運(yùn)動(dòng)：layout_constraintStart_toStartOf =“父母”
           運(yùn)動(dòng)：layout_constraintTop_toTopOf =“父母”>
           <自定義屬性
               運(yùn)動(dòng)：屬性名稱(chēng)=“背景顏色”
               動(dòng)作：customColorValue="#FFEB3B"/>
       </約束>
   </約束集>
   <ConstraintSet android:id="@+id/end">
       <約束
           android:id="@id/star"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/ic_star"
           android:layout_marginEnd="8dp"
           運(yùn)動(dòng)：layout_constraintBottom_toBottomOf =“父母”
           運(yùn)動(dòng)：layout_constraintEnd_toEndOf =“父母”
           運(yùn)動(dòng)：layout_constraintTop_toTopOf =“父母”>
           <自定義屬性
               運(yùn)動(dòng)：屬性名稱(chēng)=“背景顏色”
               動(dòng)作：customColorValue="#F53224"/>
       </約束>
   </約束集></動(dòng)態(tài)場(chǎng)景>

MotionLayout 和 ConstraintLayout 的 XML 結(jié)構(gòu)不同，因?yàn)樵?MotionLayout 中，動(dòng)畫(huà)的描述單獨(dú)存儲(chǔ)在 MotionScene XML 文件中，這意味著布局文件僅包含視圖及其屬性，而不包含它們的定位或移動(dòng)。為了有效地使用 MotionLayout，了解關(guān)鍵術(shù)語(yǔ)至關(guān)重要，例如：

• MotionScene 是一個(gè) XML 資源文件，包含相應(yīng)布局的所有運(yùn)動(dòng)描述。

• 在 MotionScene 中，您可以使用 Transition 定義動(dòng)畫(huà)，它使用開(kāi)始和結(jié)束 ConstraintSets 描述從一種狀態(tài)到另一種狀態(tài)的變化。

• KeyFrameSet 定義動(dòng)畫(huà)中的幀序列。

• ConstraintSet 幫助定義每個(gè)動(dòng)畫(huà)視圖的開(kāi)始和最終約束。

定義開(kāi)始翻譯布局如下：

定義布局的結(jié)束翻譯如下：

在此示例中，我們定義了一個(gè)指定開(kāi)始和結(jié)束 ConstraintSets 的單個(gè) Transition。此外，我們?cè)诩s束集中添加了自定義屬性，以從頭到尾更改視圖的顏色。

第 4 步：將動(dòng)畫(huà)應(yīng)用到 Motion Layout Android

最后，; 我們通過(guò)添加將動(dòng)畫(huà)應(yīng)用到 Motion Layoutapp:layoutDescription=”@xml/motion_scene”到 MotionLayout 中activity_main.xml文件。

第 5 步：運(yùn)動(dòng)布局中的插值屬性

它們指的是動(dòng)畫(huà)隨時(shí)間發(fā)生的變化。在 MotionLayout 中創(chuàng)建動(dòng)畫(huà)時(shí)，您可以使用這些插值屬性來(lái)定義元素如何隨時(shí)間移動(dòng)、改變大小或旋轉(zhuǎn)。

• TranslationX 和 TranslationY：這些屬性分別控制元素的水平和垂直移動(dòng)。

• ScaleX 和 ScaleY：這些屬性控制元素在動(dòng)畫(huà)中移動(dòng)時(shí)的大小。

• 旋轉(zhuǎn)：此屬性控制元素圍繞其中心點(diǎn)的旋轉(zhuǎn)。

• Alpha：此屬性控制元素的透明度，允許它在動(dòng)畫(huà)期間淡入或淡出。

• Elevation：此屬性控制元素的 z 軸定位，允許它出現(xiàn)在其他元素的上方或下方。

第 6 步：自定義屬性

MotionLayout 中默認(rèn)沒(méi)有定義這些屬性；但可以由開(kāi)發(fā)人員添加。這些屬性可用于設(shè)置自定義視圖屬性，例如顏色、字體或動(dòng)畫(huà)。要在 MotionLayout 中使用自定義屬性，您必須先在布局文件中定義它們。

要定義自定義屬性，您可以在 XML 布局文件中使用“CustomAttribute”標(biāo)簽，如下所示。

<自定義屬性
   運(yùn)動(dòng)：屬性名稱(chēng)=“背景顏色”
   動(dòng)作：customColorValue="#F53224"/>

第 7 步：最終輸出

結(jié)論

（言鼎科技）