MotionLayout：炫酷动画原来如此简单

什么是MotionLayout

根据官方文档的注释，我们可以知道：

1. MotionLayout中文翻译是运动布局，就是用来帮助我们的APP管理运动和组件动画的
2. MotionLayout继承于ConstraintLayout，是ConstraintLayout2.0版本中新增的组件
3. MotionLayout主要是为了解决布局过渡和复杂运动的问题
4. MotionLayout完全是声明式的，所有复杂的动画都可以用xml布局直接实现
5. 因为MotionLayout是ConstraintLayout的子类，所以它的很多属性也只能对其第一层子布局生效，如果是要嵌套多层布局使用，那么就还是使用TransitionManager吧

如何使用MotionLayout

1. MotionLayout必须基于Android Studio 4.0及之后的版本，才能直接在studio中实时使用MotionLayout的编辑器
2. 引入ConstraintLayout 2.0及之后的版本
   implementation 'androidx.constraintlayout:constraintlayout:2.0.3'
3. 在布局的编辑界面，右键点击Convert to MotionLayout，可以将布局直接一键转换成MotionLayout
   
4. 转换之后可以看到布局已经变成了MotionLayout，而且还多了一个app:layoutDescription="@xml/activity_motion_scene"属性，值就是该MotionLayout的布局描述文件，该文件存放在res/xml下。

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_motion_scene"
    tools:context=".MotionActivity">
</androidx.constraintlayout.motion.widget.MotionLayout>

5. 我们点开该描述文件

<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:motionInterpolator="linear"
        motion:duration="1000">
       <KeyFrameSet>
       </KeyFrameSet>

        <OnClick>
        </OnClick>

        <OnSwipe>
        </OnSwipe>
    </Transition>

    <ConstraintSet android:id="@+id/start">
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
    </ConstraintSet>
</MotionScene>

• Transition是定义具体运动的标签，内部有动画开始的motion:constraintSetStart和动画结束的motion:constraintSetEnd，运动插值器motion:motionInterpolator，详细的插值器相关缓动函数，可以查阅缓动函数，还有动画时长motion:duration。
• 子标签有KeyFrameSet、OnClick、OnSwipe三种，第一种是最复杂的关键帧，后面两种是用户的交互行为。
• ConstraintSet标签就是动画或布局过渡具体的一个节点，描述该view的约束条件、布局属性等

6. OnClick
   OnClick是最简单的交互，就是相应用户的点击事件

• OnClick内部有两个标签，分别是motion:targetId和motion:clickAction
  • motion:targetId就是相应点击事件的view的Id
  • motion:clickAction就是点击之后需要执行的操作，有如下五种
  • toggle是切换，jump是直接跳转，transition是平滑过渡
  • 在这里我们先设置为toggle，这样点击这个view它能来回过渡
• 我们在布局文件中新增一个ImageView，设置大小为80dp

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_motion_click_scene"
    tools:context=".MotionClickActivity">
    
    <ImageView
        android:id="@+id/view"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/duolaameng"/>

</androidx.constraintlayout.motion.widget.MotionLayout>

• 在scene描述文件中注明view的开始、结束位置和状态，开始是在父布局左上角，大小是80dp，结束时在父布局右下角，大小是60dp，并且透明度只有0.5

	<ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/view"
            android:layout_width="100dp"
            android:layout_height="100dp"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/view"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:alpha="0.5"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintRight_toRightOf="parent" />
    </ConstraintSet>

注意：
每个ConstraintSet 里面的元素必须始终指定view的约束条件和宽高，并且覆盖其他的布局信息。
ConstraintSet的id和MotionLayout中view的id要对应

• 使用Android Studio自带的MotionLayout Editor，点击播放按钮，可以直接预览该动画效果
  
• 在真机上的效果
  

7. onSwipe

• 我们先来看一下用onSwipe最终的实现效果：
  

这个其实就是仿竖屏直播软件里一种常用的交互，整个界面是播放器，用户的上滑手势会拖出弹幕、评论列表，播放器响应改变大小，下滑会隐藏列表，然后播放器大小还原。

• 页面的布局：

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_motion_swipe_scene"
    tools:context=".MotionSwipeActivity">

    <ImageView
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/quanyecha" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        app:layout_constraintTop_toBottomOf="@+id/view"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_height="0dp" />

</androidx.constraintlayout.motion.widget.MotionLayout>

默认图片是撑满全屏，评论列表在图片下方，而且底部与父布局底部对齐

• activity_motion_swipe_scene

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="300">
        <OnSwipe
            motion:dragDirection="dragUp"
            motion:touchAnchorId="@id/view"
            motion:touchAnchorSide="end" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>
</MotionScene>

Transition的子标签我们使用onSwipe

• motion:dragDirection：是手势拖动的方向，因为我们是向上拖动，所以设置成dragUp；
• motion:touchAnchorId：是响应手势的view，我们这里使用背景图片的id；
• motion:touchAnchorSide：指要拖动的 View 的哪一条边（上下左右），因为是要拖动背景图片的底部，所以设置成bottom。

结束时的ConstraintSet，我们只改变图片的高度，设置成200dp。
只需要如上的简单的声明，就能实现刚才那个交互效果。

8. KeyFrameSet
   关键帧集合，内部子标签可以设置多个view在运动过程当中关键帧的位置以及状态信
   这样说可能比较抽象，我们直接上代码：

• 页面中我们添加三个图片

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_motion_key_frame_scene"
    tools:context=".MotionKeyFrameActivity">
    <ImageView
        android:id="@+id/icon1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:elevation="2dp"
        android:src="@drawable/icon1" />
    <ImageView
        android:id="@+id/icon2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:elevation="1dp"
        android:src="@drawable/icon2" />
    <ImageView
        android:id="@+id/icon3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/icon3" />
</androidx.constraintlayout.motion.widget.MotionLayout>

• 描述文件中我们设置三个图片初始时在屏幕左上角，结束时在屏幕底部，三张图片x坐标均分

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="3000">
        <OnClick
            motion:clickAction="toggle"
            motion:targetId="@+id/icon1" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/icon1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:elevation="2dp"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
        <Constraint
            android:id="@+id/icon2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:elevation="1dp"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
        <Constraint
            android:id="@+id/icon3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/icon1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:elevation="2dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toLeftOf="@+id/icon2" />
        <Constraint
            android:id="@+id/icon2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:elevation="1dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toRightOf="@+id/icon1"
            motion:layout_constraintRight_toLeftOf="@+id/icon3" />
        <Constraint
            android:id="@+id/icon3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toRightOf="@+id/icon2"
            motion:layout_constraintRight_toRightOf="parent" />
    </ConstraintSet>
</MotionScene>

动画效果：

• 我们在运动过程中添加一次关键帧：
  motion:motionTarget：该关键帧对应的view
  motion:framePosition：关键帧的值（取值范围是0~100）
  motion:keyPositionType：关键帧的类型，这里我填写的是parentRelative，表示相对父布局
  motion:percent：view的位置在坐标系上的比值（取值范围是0~1）
  就比如icon1的KeyPosition，表示在第18帧时，相对父布局的x、y百分比坐标分别是0.7和0.3

<KeyFrameSet>
	<KeyPosition
		motion:motionTarget="@id/icon1"
		motion:framePosition="18"
		motion:keyPositionType="parentRelative"
		motion:percentX="0.7"
		motion:percentY="0.3"/>
  	<KeyPosition
		motion:motionTarget="@id/icon2"
		motion:framePosition="20"
		motion:keyPositionType="parentRelative"
		motion:percentX="0.7"
		motion:percentY="0.3"/>
	<KeyPosition
		motion:motionTarget="@id/icon3"
		motion:framePosition="22"
		motion:keyPositionType="parentRelative"
		motion:percentX="0.7"
		motion:percentY="0.3"/>
</KeyFrameSet>

加上该关键帧的运动效果，可以看到运动在过程中进行了变轨，会先过渡到我们设置的关键帧位置，再过渡到底部：

• 我们可以通过更多的关键帧，使运动过程看起来更加平顺和炫酷
  还可以通过添加motion:pathMotionArc来改变运动轨迹的弧线是正弦还是余弦
  
• 关键帧里除了KeyPosition属性，还有KeyAttribute和KeyCycle
• KeyAttribute主要是用来改变view在某个关键帧下自身的属性，比如宽高等，还有更加可定制化的CustomAttribute，支持所有的自定义属性，可以在运动过程中平滑地改变view的颜色、背景色、图片资源等
• KeyCycle一般是用来实现波形运动，比如抖动动画等

MotionLayout的进阶使用

MotionLayout搭配Lottie使用