MotionLayout 根底

motionDebug

新建一个 MotionLayout 布局

activity_basic_motion_layout.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_basic_motion_layout_scene"
    app:motionDebug="SHOW_ALL"
    tools:context=".BasicMotionLayoutActivity">
    <View
        android:id="@+id/view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FF9E80"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>

添加 app:motionDebug="SHOW_ALL"，运行的时候就会在屏幕底端显示一些调试信息比方进展、状况、途径等。

activity_base_motion_layout_scene.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:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="2000">
        <KeyFrameSet></KeyFrameSet>
        <OnClick motion:targetId="@+id/view" />
    </Transition>
    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/view">
        </Constraint>
    </ConstraintSet>
    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/view">
            <Layout
                android:layout_width="100dp"
                android:layout_height="100dp"
                motion:layout_constraintBottom_toBottomOf="parent"
                motion:layout_constraintEnd_toEndOf="parent" />
        </Constraint>
    </ConstraintSet>
</MotionScene>

注意，<Constraint> 标签，之前咱们的做法是直接把布局参数写在 <Constraint> 里面的，现在是写在 <Constraint> 里面的 <Layout> 标签里。

这儿要注意的是，就算仅仅改动一个布局参数，其他的布局参数也要写上，也就是说原来控件宽高都是 100dp，想改动 height 为 200dp，width 不变，android:layout_width="100dp" 也是不能够省略的，其他的布局参数也同理。

pathMotionArc

目前为止，MotionLayout 的运动途径都是直线的，咱们能够通过在开端场景里的 <Constraint> 添加一个 <Motion> 标签来配置运动的途径。

<ConstraintSet android:id="@+id/start">
    <Constraint android:id="@+id/view">
        <Motion motion:pathMotionArc="startVertical" />
    </Constraint>
</ConstraintSet>

插值器

还能够通过 motion:transitionEasing 来操控动画的节奏

• accelerate：加速，一般用于进场
• decelerate：减速，一般用于出场

<Constraint> 里的 transitionEasing 特点值应该在 Start 场景中指定，在 End 场景中指定是无效的。

与 motion:transitionEasing 比较类似的一个特点是

<Constraint> 里的 transitionEasing 与 <Transition> 的 motionInterpolator 都是用来界说过渡动画的插值器的。但 <Constraint> 元素的 transitionEasing 特点界说的是单独某个 View 的过渡动画的插值器，而 <Transition> 里的 motionInterpolator 界说的是整个过渡动画的插值器。

如果为 <Constraint> 指定了 transitionEasing 插值器，这个插值器将与 motionInterpolator 特点指定的大局插值器同时作用于 View 的过渡动画，而不是覆盖。

motion:motionInterpolator="bounce" + motion:transitionEasing="accelerate":

motion:motionInterpolator="bounce" + motion:transitionEasing="decelerate":

Transform

除了这些简略的位移动画，MotionLayout 还支撑改换动画，它们写在 <Transform> 标签里

<ConstraintSet android:id="@+id/end">
    <Constraint android:id="@+id/view">
        ...
        <Transform
            android:rotation="360"
            android:scaleX="0.5"/>
    </Constraint>
</ConstraintSet>

自界说特点

MotionLayout 控件只会检测标准的布局特点，关于其他的特点变化，如 View 的背景色彩变化是无法检测出来的，因此就需要运用自界说特点。

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">
    ...
    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/view">
            ...
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#FF9E80" />
        </Constraint>
    </ConstraintSet>
    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/view">
            ...
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#B388FF" />
        </Constraint>
    </ConstraintSet>
</MotionScene>

运用 <CustomAttribute> 标签，attributeName 指定特点名，动画过程中，MotionLayout 会通过 get/set + 特点名 反射调用 view 的相关办法。