MotionLayout 使用介绍 | 听雪楼

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

沉稳的围巾 · 博客导航 - lindexi · 2 月前 ·

深情的山羊 · 使用客户端库 | Adobe ...· 1 月前 ·

被表白的日记本 · ch05-05· 4 周前 ·

深情的围巾 · 角膜移植新進展！搭配幹細胞、羊膜移植、高壓氧 ...· 10 月前 ·

英勇无比的铁链 · 第二届“中马大学生汉语辩论赛”闭幕--国际- ...· 10 月前 ·

乐观的春卷 · python tkinter ...· 2 年前 ·

健身的键盘 · 第四章：请不要叫我人妖-我的妖怪空姐-🌈️ ...· 2 年前 ·

乖乖的小摩托 · 房地产不易做-星月法师-🌈️包子漫畫· 2 年前 ·

MotionLayout 是 ConstraintLayout 2.0 版本引入进来的，目前还在测试版本中，但感觉还挺有意思的，就写一篇记录一下。

MotionLayout 类继承自 ConstraintLayout 类，允许你为各种状态之间的布局设置过渡动画。由于 MotionLayout 继承了 ConstraintLayout，因此可以直接在 XML 布局文件中使用 MotionLayout 替换 ConstraintLayout。MotionLayout 是完全声明式的，你可以完全在 XML 文件中描述一个复杂的过渡动画而无需任何代码。

MotionLayout 与 ConstraintLayout 不同的是 MotionLayout 需要链接到一个 MotionScene 文件。使用 MotionLayout 的 app:layoutDescription 属性将 MotionLayout 链接到一个 MotionScene 文件。另外， MotionLayout 所有的直接子 View 需要指定 id ，不然会报错：

1	All children of ConstraintLayout must have ids to use ConstraintSet.

起始状态：

<android.support.constraint.motion.MotionLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/motionLayout"
        app:layoutDescription="@xml/activity_main_motion_scene">

    <TextView
            android:id="@+id/button"
            android:layout_width="100dp"
            android:layout_height="56dp"
            android:text="这个View不动"
            android:textColor="#fff"
            android:gravity="center"
            android:background="#f00"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

    <ImageView
            android:id="@+id/image"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:src="@mipmap/ic_launcher"
            android:background="@color/colorPrimary"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="1"/>

</android.support.constraint.motion.MotionLayout>

结束状态:

<android.support.constraint.motion.MotionLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/motionLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/activity_main_motion_scene">

    <ImageView
            android:id="@+id/image"
            android:layout_width="48dp"
            android:layout_height="48dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginTop="100dp"
            app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.motion.MotionLayout>

MotionScene：文件名 activity_main_motion_scene.xml，存放在 res/xml 目录下。

<?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">

    <Transition
        app:constraintSetStart="@layout/activity_main_scene1"
        app:constraintSetEnd="@layout/activity_main_scene2"
        app:duration="1000">

        <OnClick
            app:clickAction="toggle"
            app:targetId="@id/image" />

    </Transition>

</MotionScene>

看下效果：

属性讲解

MotionLayout 会自动检测这两个场景中具有相同 id 的 View 的属性差别，然后针对这些差别属性应用过渡动画。
MotionLayout 除了支持一下的标准属性外，还支持全部的 ConstraintLayout 属性。

android:visibility

MotionScene 文件的根元素是 MotionScene。在 MotionScene 元素中使用 Transition 子元素来描述一个过渡，使用 Transition 元素的 app:constraintSetStart 属性指定起始场景的布局文件，使用 app:constraintSetEnd 指定结束场景的布局文件。在 Transition 元素中使用 OnClick 或者 OnSwip 子元素来描述过渡的触发条件。使用 app:duration 指定动画时间， app:motionInterpolator 指定差值器，取值有 linear 、 bounce 等等。

OnClick 元素的属性：

app:targetId：Id 值，设置用来触发过渡的那个 View 的 Id，例如：@id/image。

app:clickAction：设置点击时执行的动作，有 5 个可选项：

toggle：在 Start 场景和 End 场景之间循环的切换。

transitionToEnd：过渡到 End 场景。

transitionToStart：过渡到 Start 场景。

jumpToEnd：跳到 End 场景（不执行过渡动画）。

jumpToStart：跳到 Start 场景（不执行过渡动画）。

OnSwip 拖动操作，由于拖动操作涉及的交互较为复杂，这里就不讲述了，有兴趣的同学可以自己了解。

代码控制

代码开启动画，切换到起始状态：

1	motionLayout.transitionToStart();

同样，切换到终止状态：

1	motionLayout.transitionToEnd()

设置动画进度：

1	motionLayout.setProgress(progress) // 取值 0 ~ 1

监听动画：

motionLayout.setTransitionListener(object : MotionLayout.TransitionListener {

    override fun onTransitionTrigger(p0: MotionLayout?, p1: Int, p2: Boolean, p3: Float) {
        // Call when a trigger is fired
    }

    override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
        // Called when a drawer is about to start a transition.
    }

    override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
        // Called when a drawer's position changes.
    }

    override fun onTransitionCompleted(p0: MotionLayout?, p1: Int) {
        // Called when a drawer has settled completely a state.
    }
})

在 MotionScene 文件中定义约束

我们可以在 MotionScene 元素中使用 ConstraintSet 子元素定义一个场景约束集，并在 ConstraintSet 元素中使用 Constraint 元素定义单个 View 的属性约束。
将 activity_main_motion_scene.xml 改成如下：

<MotionScene xmlns:app="http://schemas.android.com/apk/res-auto"
             xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 定义 Start 场景的属性约束集 -->
    <ConstraintSet android:id="@+id/activity_main_start">

        <!-- 定义布局中 id 为 image 的 View 的属性约束 -->
        <Constraint
                android:id="@id/image"
                android:layout_width="56dp"
                android:layout_height="56dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="1.0"/>

    </ConstraintSet>


    <!-- 定义 End 场景的属性约束集 -->
    <ConstraintSet android:id="@+id/activity_main_end">

        <!-- 定义布局中 id 为 image 的 View 的属性约束 -->
        <Constraint
                android:id="@id/image"
                android:layout_width="80dp"
                android:layout_height="80dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0"/>

    </ConstraintSet>

    <!-- Start 场景与 End 场景都是定义在 MotionScene 文件中的约束集 -->
    <Transition
            app:constraintSetStart="@id/activity_main_start"
            app:constraintSetEnd="@id/activity_main_end"
            app:duration="1000">

        <OnClick
                app:clickAction="toggle"
                app:targetId="@id/image"/>

    </Transition>

</MotionScene>

效果如下：

这种写法还支持自定义属性：在 Constraint 元素中使用 CustomAttribute 子元素来指定自定义属性。改成如下代码：

<MotionScene xmlns:app="http://schemas.android.com/apk/res-auto"
             xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 定义 Start 场景的属性约束集 -->
    <ConstraintSet android:id="@+id/activity_main_start">

        <!-- 定义布局中 id 为 image 的 View 的属性约束 -->
        <Constraint
                android:id="@id/image"
                android:layout_width="56dp"
                android:layout_height="56dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="1.0">

            <!-- 使用自定义属性 -->
            <CustomAttribute
                    app:attributeName="backgroundColor"
                    app:customColorValue="@color/colorPrimary"/>

        </Constraint>

    </ConstraintSet>

    <!-- 定义 End 场景的属性约束集 -->
    <ConstraintSet android:id="@+id/activity_main_end">

        <!-- 定义布局中 id 为 image 的 View 的属性约束 -->
        <Constraint
                android:id="@id/image"
                android:layout_width="80dp"
                android:layout_height="80dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0">

            <!-- 使用自定义属性 -->
            <CustomAttribute
                    app:attributeName="backgroundColor"
                    app:customColorValue="@color/colorAccent"/>

        </Constraint>

    </ConstraintSet>

    <!-- Start 场景与 End 场景都是定义在 MotionScene 文件中的约束集 -->
    <Transition
            app:constraintSetStart="@id/activity_main_start"
            app:constraintSetEnd="@id/activity_main_end"
            app:duration="1000">

        <OnClick
                app:clickAction="toggle"
                app:targetId="@id/image"/>

    </Transition>

</MotionScene>

效果如下：

所以如果有使用到 CustomAttribute，则最好将约束变化定义在 MotionScene xml 中。

小结

利用 MotionLayout 实现了一个普遍的按钮点击动画：

效果还不错，只是如果前后动画的插值器不一致，或有其他定制的需求时，MotionLayout 是否能满足呢？

本文只是简单介绍了一下 MotionLayout 的使用，它其实还有很多东西，比如 OnSwipe，以及 app:transitionEasing、app:transitionPathRotate、app:drawPath 等一些比较有意思的属性，有空的时候可以再多看看。MotionLayout 当前还只是测试版，期待正式版本出来的那一天！

缺失模块。
1、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save

2、在根目录_config.yml里添加配置： jsonContent: meta: false pages: false posts: title: true date: true path: true text: true raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true