image

What is MotionLayout临庇？

MotionLayout is a layout type that helps you manage motion and widget animation in your app. MotionLayout is a subclass of ConstraintLayout and builds upon its rich layout capabilities. As part of the ConstraintLayout library, MotionLayout is available as a support library and is backwards-compatible to API level 14.

MotionLayout bridges the gap between layout transitions and complex motion handling, offering a mix of features between the property animation framework, TransitionManager, and CoordinatorLayout.

引用自官方文檔：Manage motion and widget animation with MotionLayout

通過閱讀官方文檔我們可以得知MotionLayout的一些信息：

• MotionLayout是用來幫助開發(fā)者管理運(yùn)動(dòng)和組件動(dòng)畫的

• MotionLayout是ConstraintLayout的子類

• MotionLayout是ConstraintLayout 2.0庫中提供的新類，也可作為支持庫使用牙捉，并且向后兼容到API 14始腾。

• MotionLayout是為了彌合了布局過渡和復(fù)雜運(yùn)動(dòng)處理之間的鴻溝，在屬性動(dòng)畫框架，TransitionManager和CoordinatorLayout之間提供了多種功能唠叛。

• MotionLayout是完全聲明式，我們可以用xml描述出任何復(fù)雜的效果

• MotionLayout不支持嵌套子布局或者activity transition（如果您就有這樣的需求沮稚，那還是乖乖的用TransitionManager吧）

• 最后艺沼，官方建議不要把MotionLayout僅僅當(dāng)做一個(gè)動(dòng)效庫來使用，它應(yīng)該用于幫助用戶了解您的應(yīng)用程序在做什么蕴掏，并表達(dá)品牌的個(gè)性和風(fēng)格障般。

  參見Understanding motion

When to use it？

當(dāng)我們學(xué)習(xí)一個(gè)新的東西的時(shí)候盛杰，“什么時(shí)候(情況下)使用它挽荡？”是一個(gè)很重要的問題。如果這個(gè)問題沒想清楚即供，可能會(huì)引發(fā)一些不良的效果定拟。

那么，什么時(shí)候去用MotionLayout呢逗嫡？

Use MotionLayout when animating UI elements the user will interact with

當(dāng)用戶需要與有動(dòng)效的UI元素交互時(shí)請(qǐng)使用MotionLayout

言外之意：

1. 現(xiàn)有實(shí)現(xiàn)動(dòng)效的方式就可以簡單實(shí)現(xiàn)的就別折騰了办素，比如用以下方式

• Animated Vector Drawable
• Property Animation framework
• LayoutTransition animations
• Layout transitions with TransitionManager
• CoordinatorLayout

2. 一些界面加載完就直接執(zhí)行的復(fù)雜動(dòng)畫，直接用Gif或者視頻搞定的也不需要
3. 總結(jié)一下祸穷，別為了用MotionLayout而強(qiáng)行使用

Getting started

在開始使用MotionLayout之前我們需要準(zhǔn)備以下幾步性穿。

1. Android Studio 4.0

MotionLayout編輯器僅支持4.0之上版本

image

2. 導(dǎo)入依賴

在您app的build.gradle文件添加ConstraintLayout 2.0的依賴。

1. 如果你使用的是AndroidX

2. dependencies {
       implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta3'
   }
   

3. 如果你還沒有遷移到AndroidX雷滚，則需要使用support 庫

   dependencies {
       implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta3'
   } 
   

3. 創(chuàng)建布局文件

創(chuàng)建完fragment_explore_motion_layout_part1.xml布局文件后需曾，在Design模式下，右鍵點(diǎn)擊布局或者Component Tree祈远，選擇菜單中的Convert to MotionLayout選項(xiàng)即可一步將布局轉(zhuǎn)換為MotionLayout呆万。

image

我們?cè)賮砜匆幌略摬季值膞ml代碼

image

為了使布局信息與運(yùn)動(dòng)描述分開，每個(gè)MotionLayout都會(huì)使用app:layoutDescription引用一個(gè)單獨(dú)的MotionScene文件车份，這個(gè)文件放在res/xml文件夾谋减。

下面來看一下生成的MotionScene文件：res/xml/fragment_explore_motion_layout_part1_scene.xml

image

4. MotionScene常見的標(biāo)簽及屬性

• Transition標(biāo)簽是用來定義運(yùn)動(dòng)的具體細(xì)節(jié)的

  常用的如下

  • constraintSetStart 定義運(yùn)動(dòng)的初始狀態(tài)

    這可以是ConstraintSet的ID，也可以是布局扫沼。

    要指定ConstraintSet出爹，請(qǐng)將此屬性設(shè)置為@+id/constraintSetId庄吼。

    要指定布局，請(qǐng)?jiān)O(shè)置為@layout/layoutState严就。

  • constraintSetEnd 定義運(yùn)動(dòng)的最終狀態(tài)总寻，取值同constraintSetStart

  • duration 定義運(yùn)動(dòng)的持續(xù)時(shí)間，以毫秒為單位梢为，如不指定則使用默認(rèn)值400ms

    image

  • motionInterpolator 定義運(yùn)動(dòng)插補(bǔ)器

    • easeInOut 緩入緩出
    • easeIn 緩入
    • easeOut 緩出
    • linear 線性
    • bounce 彈跳效果

  • autoTransition 自動(dòng)過渡

    • none 不運(yùn)動(dòng)
    • jumpToStart 直接跳到開始
    • jumpToEnd 直接跳到結(jié)束
    • animateToStart 執(zhí)行動(dòng)畫到開始
    • animateToEnd 執(zhí)行動(dòng)畫到結(jié)束

• OnSwipe 指定用戶在布局上滑動(dòng)時(shí)要執(zhí)行的操作渐行。

  • touchAnchorId 通過滑動(dòng)移動(dòng)的視圖的Id。
  • touchAnchorSide 用戶滑動(dòng)界面時(shí)MotionLayout將嘗試在touchAnchorId指定的視圖和用戶手指之間保持恒定的距離铸董。而此屬性指定的是手指和view的那一側(cè)保持恒定的距離祟印，可取值有以下幾個(gè)：
    • left
    • right
    • top
    • bottom
  • dragDirection 用戶滑動(dòng)動(dòng)作的方向。如果設(shè)置了此屬性粟害，則此onSwipe僅適用于沿指定方向的滑動(dòng)旁理。可接受的值為
    • dragLeft 左滑
    • dragRight 右滑
    • dragUp 上滑
    • dragDown 下滑

• OnClick 指定當(dāng)用戶點(diǎn)擊特定視圖時(shí)要執(zhí)行的操作我磁。單個(gè)Transition可以有多個(gè)OnClick節(jié)點(diǎn)孽文，每個(gè)OnClick指定一個(gè)不同的目標(biāo)視圖，并在點(diǎn)擊該視圖時(shí)執(zhí)行不同的操作夺艰。

  • targetId 當(dāng)用戶點(diǎn)擊targetId指定的view時(shí)將會(huì)執(zhí)行Transition

  • ClickAction 點(diǎn)擊視圖時(shí)執(zhí)行的操作芋哭。支持的值為：

    • toggle

      切換狀態(tài)，如果當(dāng)前狀態(tài)是start的話郁副，執(zhí)行動(dòng)畫到end狀態(tài)减牺；若當(dāng)前狀態(tài)是end狀態(tài)，則執(zhí)行動(dòng)畫到start狀態(tài)存谎。

    • transitionToStart 執(zhí)行動(dòng)畫到start狀態(tài)

    • transitionToEnd 執(zhí)行動(dòng)畫到end狀態(tài)

    • jumpToStart 直接跳轉(zhuǎn)到start狀態(tài)

    • jumpToEnd 直接跳轉(zhuǎn)到end狀態(tài)

• KeyFrameSet

  指定運(yùn)動(dòng)序列過程中視圖的位置和屬性拔疚。默認(rèn)情況下，運(yùn)動(dòng)會(huì)從初始狀態(tài)進(jìn)行到結(jié)束狀態(tài)既荚。通過使用<KeyFrameSet>稚失，您可以構(gòu)建更復(fù)雜的動(dòng)作。 <KeyFrameSet>包含<KeyPosition>或<KeyAttribute>節(jié)點(diǎn)恰聘。這些節(jié)點(diǎn)中的每個(gè)節(jié)點(diǎn)都指定運(yùn)動(dòng)中特定點(diǎn)的目標(biāo)視圖的位置或?qū)傩浴?MotionLayout從起點(diǎn)到這些中間點(diǎn)中的每一個(gè)句各，再到最終目的地，使視圖平滑地動(dòng)畫化晴叨。

• KeyPosition

  指定運(yùn)動(dòng)序列中特定時(shí)刻的視圖位置凿宾。此屬性用于調(diào)整運(yùn)動(dòng)的默認(rèn)路徑。

  • motionTarget

    要在運(yùn)動(dòng)過程中改變屬性的視圖的Id

  • framePosition

    指定視圖在運(yùn)動(dòng)序列中何時(shí)具有此<KeyAttribute>指定的屬性兼蕊。例如初厚，framePosition = 50則代表視圖運(yùn)動(dòng)到整個(gè)運(yùn)動(dòng)序列的50%處。

  • percentX percentY 指定視圖應(yīng)到達(dá)的位置孙技。這兩個(gè)屬性需要配合keyPositionType才能確定具體位置产禾。

  • keyPositionType

    指定如何解釋percentX和percentY值排作。

    • parentRelative

      percentX和percentY是相對(duì)于父視圖指定的。取值范圍 0~1下愈。

      image

    • deltaRelative

      相對(duì)于視圖在整個(gè)運(yùn)動(dòng)序列過程中移動(dòng)的距離纽绍，指定了percentX和percentY蕾久。 X為橫軸势似，Y為縱軸。在這兩種情況下僧著，0都是該軸視圖的起始位置履因，而1是最終位置。

      image

      Note：deltaRelative模式下盹愚，x栅迄，y坐標(biāo)范圍不是0~1。

      x<0 ----> 視圖會(huì)定位到y(tǒng)軸的左側(cè)皆怕。

      y<0 ----> 視圖會(huì)定位到x軸的下方毅舆。

      x=1.5 ---> 代表視圖定位到x軸方向start到end的橫向距離1.5倍的位置

      y=1.5 ---> 代表視圖定位到y(tǒng)軸方向start到end的垂直距離1.5倍的位置

      image

    • pathRelative

      X軸是目標(biāo)視圖在路徑范圍內(nèi)移動(dòng)的方向，0為開始位置愈腾，1為最終位置憋活。 Y軸垂直于X軸，正值位于路徑的右側(cè)虱黄，負(fù)值位于左側(cè)悦即；設(shè)置一個(gè)非零的Y百分比會(huì)導(dǎo)致視圖的路徑向X軸的左側(cè)或者右側(cè)偏轉(zhuǎn)形成弧線。因此橱乱，視圖的初始位置是（0,0）辜梳，最終位置是（1,0）。

      很多文章包括官網(wǎng)對(duì)y軸的取值都是寫的x軸的左側(cè)為正值泳叠，右側(cè)為負(fù)值作瞄，但我實(shí)際測(cè)試的結(jié)果卻是相反的。希望讀者都親自嘗試一下危纫。

      image

• KeyAttribute

  指定運(yùn)動(dòng)序列中特定時(shí)刻的視圖屬性粉洼。您可以使用<KeyAttribute>設(shè)置視圖的任何標(biāo)準(zhǔn)屬性。

  • alpha
  • visibility
  • elevation
  • rotation, rotationX, rotationY
  • translationX, translationY, translationZ
  • scaleX, scaleY

• ConstraintSet

  為一個(gè)或多個(gè)<Transition>節(jié)點(diǎn)指定開始或結(jié)束狀態(tài)

關(guān)于更多的MotionScene標(biāo)簽以及它有哪些子標(biāo)簽可以查閱官方文檔MotionLayout reference

Basic motion

下面這個(gè)栗子包含一個(gè)正方形的View叶摄，可以水平滑動(dòng)属韧。

image

Layout XML

MotionLayout的motionDegbug屬性可以開啟調(diào)試模式

• motionDegbug
  • SHOW_PATH 展示運(yùn)動(dòng)路徑
  • SHOW_PROGRESS 展示運(yùn)動(dòng)進(jìn)度
  • SHOW_ALL 展示PATH&PROGRESS

image

MotionScene XML

• KeyPosition

  在framePosition=50處向y軸方向偏移50%

• KeyAttribute

  在framePosition=50處改變視圖的如下屬性：

  • 整體縮放2倍
  • X軸旋轉(zhuǎn)-60°，y軸旋轉(zhuǎn)45°
  • 透明度變?yōu)?.3

image

Custom attribute

下面使用ImageFilterView來演示自定義屬性

image

Layout XML

image

MotionScene XML

Note：請(qǐng)注意蛤吓，指定自定義屬性時(shí)宵喂，自定義屬性必須在start和end的ConstraintSet元素中成對(duì)出現(xiàn)，另外在運(yùn)動(dòng)過程中改變自定義屬性時(shí)会傲，也要保證前面的規(guī)則锅棕。

• start中的初始自定義屬性

  • roundPercent = 0.1 代表擁有10%的圓角

    取值范圍[0~1]拙泽，0代表正方形，1代表正圓裸燎。

  • crossfade = 0 展示src圖片

    0=src顾瞻，1=altsrc

• end中的最終自定義屬性

  • roundPercent = 1 正圓
  • crossfade = 1 展示altsrc圖片

詳情參見ImageFilterView

image

Summary

探索MotionLayout的Part1到此結(jié)束，本文主要介紹了一下MotionLayout是啥德绿？啥時(shí)候用它荷荤？基礎(chǔ)用法....

探索MotionLayout的Part2預(yù)計(jì)會(huì)實(shí)現(xiàn)一些更加復(fù)雜的效果。

關(guān)于本文頂部的效果參見MotionScene文件

Reference

• Manage motion and widget animation with MotionLayout
• MotionLayout
• MotionScene

原文鏈接：http://www.itzhouyang.com/post/explore_motion_layout_part1.html