MotionLayout

MotionLayout

1. 是ConstraintLayout的子类，可以替换任何ConstraintLayout；
2. 声明性，需要在res/xml文件夹下创建描述文件（MotionScene）；
3. 仅适用于直接子级，不支持嵌套布局层次结构或Activity转换；

依赖项：

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

基本示例：

    <!-- 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:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/scene_01"
        tools:showPaths="true">

        <View
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="@color/colorAccent"
            android:text="Button" />

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

app:layoutDescription：引用MotionScene文件
tools:showPaths：是否显示运动轨迹

    <!-- scene_01.xml -->
    <?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:constraintSetStart="@+id/start"
            motion:constraintSetEnd="@+id/end"
            motion:duration="1000">
            <OnSwipe
                motion:touchAnchorId="@+id/button"
                motion:touchAnchorSide="right"
                motion:dragDirection="dragRight" />
        </Transition>

        <ConstraintSet android:id="@+id/start">
            <Constraint
                android:id="@+id/button"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginStart="8dp"
                motion:layout_constraintBottom_toBottomOf="parent"
                motion:layout_constraintStart_toStartOf="parent"
                motion:layout_constraintTop_toTopOf="parent" />
        </ConstraintSet>

        <ConstraintSet android:id="@+id/end">
            <Constraint
                android:id="@+id/button"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginEnd="8dp"
                motion:layout_constraintBottom_toBottomOf="parent"
                motion:layout_constraintEnd_toEndOf="parent"
                motion:layout_constraintTop_toTopOf="parent" />
        </ConstraintSet>

    </MotionScene>

常用标签属性

请优先 查看官方文档介绍

<MotionScene>
运动场景文件的根元素。
<ConstraintSet>
指定所有视图在运动序列中某一点处的位置和属性。
<Constraint>
指定运动序列中其中一个元素的位置和属性。
<Transition>
指定运动序列的开始和结束状态、任何所需的中间状态以及触发该序列的用户交互。
<onClick>
指定当用户点按特定视图时要执行的操作。
<onSwipe>
指定当用户在布局上滑动时要执行的操作。
<KeyFrameSet>
指定运动序列过程中视图的位置和属性。
<KeyPosition>
指定视图在运动序列中特定时刻的位置。
<KeyAttribute>
指定视图在运动序列中特定时刻的属性。

<Transition>

可包含元素<onClick>、<onSwipe>、<KeyFrameSet>

• constraintSetStart、constraintSetEnd 运动开始与结束的状态，通过<ConstraintSet>定义；
• pathMotionArc
  1. none 直线，默认
  2. startVertical 纵向弧形
  3. startHorizontal 横向户型
  4. flip 弧形翻转
• autoTransition设置动画自动执行
  1. none 默认
  2. jumpToStart 直接到开始
  3. jumpToEnd 直接到结束
  4. animateToStart 执行动画到开始
  5. animateToEnd 执行动画到结束
• duration完成运动所需的毫秒数；
• motionInterpolator 插值器
  1. easeInOut 缓入缓出
  2. easeIn 缓入
  3. easeOut 缓出
  4. linear 线性
  5. bounce 回弹
  6. overshoot
  7. anticipate
• staggered

<KeyPosition>

• framePosition 1~99，指定视图何时到达此 <KeyPosition> 指定的点。例：值为25，视图在整个运动路径的四分之一处到达指定点
• transitionEasing 插值器
  1. standard 标准
  2. accelerate 加速
  3. decelerate 减速
  4. linear 线性
• percentX、percentY 指定视图应到达的位置，与 keyPositionType 组合
• keyPositionType 指定如何解释 percentX 和 percentY 值
  1. parentRelative percentX 和 percentY 是相对父容器指定的，横轴 X ，范围 0（左）到 1（右），纵轴 Y ， 0（顶）到 1 （底）；
  2. deltaRelative percentX 和 percentY 是相对于视图在整个运动序列过程中移动的距离指定的。X 为横轴，Y 为纵轴，0 为视图在该轴上的起始位置，1 为最终位置；
  3. pathRelative X 轴是目标视图在路径范围内移动的方向，初始位置为 (0,0)，最终位置为 (1,0)，X 轴 1.0 与 Y 轴 1.0 相等。设置一个非零的 percentY 可使视图向一个方向或另一个方向呈弧形运动。

示例

<!--parentRelative-->
<KeyFrameSet>
    <KeyPosition
        app:framePosition="50"
        app:keyPositionType="parentRelative"
        app:motionTarget="@id/view1"
        app:percentX="0.5"
        app:percentY="0.5" />
</KeyFrameSet>

<!--deltaRelative-->
<KeyFrameSet>
    <KeyPosition
        app:framePosition="25"
        app:keyPositionType="deltaRelative"
        app:motionTarget="@id/view2"
        app:percentY="0.4" />
    <KeyPosition
        app:framePosition="75"
        app:keyPositionType="deltaRelative"
        app:motionTarget="@id/view2"
        app:percentY="-0.4" />
</KeyFrameSet>

<!--pathRelative-->
<KeyFrameSet>
    <KeyPosition
        app:framePosition="50"
        app:keyPositionType="pathRelative"
        app:motionTarget="@id/view3"
        app:percentX="0.25"
        app:percentY="-0.2"
        app:transitionEasing="linear" />
    <KeyPosition
        app:framePosition="75"
        app:keyPositionType="pathRelative"
        app:motionTarget="@id/view3"
        app:percentX="0.75"
        app:percentY="0.2" />
</KeyFrameSet>

keyPositionType

<KeyAttribute>

• framePosition 1~99，指定视图何时具有该 <KeyAttribute> 指定的属性

未完待续

参考

官方 Demo
Motion Editor 用法
https://blog.csdn.net/zping0808/article/details/116305678