动画布局：MotionLayout用法解析，让你的布局运动起来！

介绍

  动画布局MotionLayout是ConstraintLayout的子类，它具有ConstraintLayout的所有属性。同时MotionLayout支持在XML中完全描述一个复杂的动画，而不需要通过Java代码来实现。(有没有很开心！)
  话不多说，先看运行效果，再看代码学习起来！

效果预览

控件解析

• MotionLayout用来处理两个ConstraintSet之间的切换，并在根据两个ConstraintSet的CustomAttribute参数来自动生成切换动画，MotionLayout会管理你的触摸事件通过跟踪手指的速度，并将其与系统中的视图速度相匹配。从而可以自然地在两者之间通过触摸滑动平稳过渡。并且在动画里面加入了关键帧的概念，使得其自动生成动画在运行时某一阶段会运行到关键帧的状态。
• 与通常的布局不同，MotionLayout所做的约束保存在一个单独的XML文件MotionScene中，该文件存储在您的res/xml目录中。
• MotionScene文件可以包含指定动画所需的全部内容，例如前面提到的ConstraintSets、ConstraintSets直接的过渡、关键帧、触摸处理等等。
• 控件通过 app:layoutDescription="@xml/activity_case45_scene"属性关联MotionScene布局文件。完成动画的切换效果定义。
• 控件通过 app:showPaths="true"属性展示滑动的轨迹。

用法

第一步：添加MD依赖（app下build.gradle中）

implementation 'androidx.appcompat:appcompat:1.2.0'
implementation "com.google.android.material:material:1.1.0-alpha07"
implementation 'androidx.constraintlayout:constraintlayout:2.0.1'

第二步：布局文件

改变根布局ConstraintLayout—>MotionLayout

<?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_case45_scene"
    app:showPaths="true"
    tools:context=".blog.Case45">

    <View
        android:id="@+id/rect"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@color/blue"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

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

第三步：MotionScene布局文件

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

    <ConstraintSet android:id="@+id/start">
        <!--自定义动画开始状态-->
        <Constraint
            android:id="@+id/rect"
            android:layout_width="70dp"
            android:layout_height="70dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <!--自定义动画结束状态-->
        <Constraint
            android:id="@+id/rect"
            android:layout_width="70dp"
            android:layout_height="70dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <Transition
            <!--转换状态+定义延迟-->
        app:constraintSetStart="@+id/start"
        app:constraintSetEnd="@id/end"
        app:duration="1000">
        <OnClick
            app:clickAction="toggle"
            app:targetId="@+id/rect" />
        <KeyFrameSet></KeyFrameSet>
    </Transition>

</MotionScene>

大功告成！