目录

Android之MotionLayout(一),MotionLayout的基本使用
Android之MotionLayout(二),MotionScene的标签属性说明
Android之MotionLayout(三),用 MotionLayout 来做过渡动画,如何使用ConstraintSet
Android之MotionLayout(四),用 MotionLayout实现向上拉的折叠效果
Android之MotionLayout(五),如何使用 MotionLayout的自定义属性
Android之MotionLayout(六),如果使用Keyframes实现实现YouTube切换效果

原文地址:用 MotionLayout 来做过渡动画
作者:叫我怪兽好了

先来看看我用 MotionLayout 制作的一个 Demo。

demo.gif

在这个例子中，当点击 Login 按钮时，Login 按钮的长度进行不断缩小，缩小到一定尺寸时，外层的 ProgressBar 还是逐渐由不可见变为可见，同时，Login 按钮上的字进行了淡入淡出的动画效果。
MotionLayout 能做的不仅如此，它还能做到其他更为好玩有趣的过渡动画。现在让我们来学一下吧。

过渡动画，顾名思义就是在状态之间进行过渡的动画效果，防止页面内 View 出现瞬间移动的效果。

而 MotionLayout 的重点其实就是状态。开发者只需要定义好对应状态下 View 的相对位置，以及相关属性，其后 MotionLayout 便会自动为其增加动的效果。

这样的一个最简单的效果是怎么做出来的呢？

16befec280f06591.gif

这样的一个最简单的效果是怎么做出来的呢？
首先我们需要在资源文件夹 res下新建一个名为 xml 的资源文件夹，然后再 xml 文件夹内新建一个根节点是 MotionScene的 xml 文件，demo 中这个 xml 的文件名为 login_animator。
以下就是实现 Login 按钮长度变换的过渡动画。

<?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:constraintSetEnd="@id/a_login_end"
        app:constraintSetStart="@id/a_login_start"
        app:duration="1000">
        <OnClick
            app:clickAction="toggle"
            app:targetId="@id/tv_action_login" />

    </Transition>

    <ConstraintSet android:id="@+id/a_login_start">
        <Constraint android:id="@+id/tv_action_login">
            <Layout
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_marginTop="30dp"
                android:layout_marginStart="30dp"
                android:layout_marginEnd="30dp"
                app:layout_constraintTop_toBottomOf="@id/et_passwd" />
        </Constraint>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/a_login_end">
        <Constraint android:id="@+id/tv_action_login">
            <Layout
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_marginTop="30dp"
                app:layout_constraintEnd_toEndOf="@+id/et_account"
                app:layout_constraintStart_toStartOf="@+id/et_account"
                app:layout_constraintTop_toBottomOf="@id/et_passwd" />
        </Constraint>

    </ConstraintSet>

</MotionScene>

仔细看其中的信息，其中大部分是我们都熟悉的，无非就是对 View 的相对位置的约定或是 View 自身属性的规定，少部分是关于过渡动画的。

这里<Transition>的app:constraintSetStart和app:constraintSetEnd分别对应着两个ConstraintSet

a_login_start 代表这登录按开始的宽度的View
a_login_end 代表这登录按钮结束的宽度的View

如果 运用合理的ConstraintSet是使用过渡动画比较关键的点

(每天学习一点点.每天进步一点点,分享不宜路过点个赞呀,喜欢的点个关注后续更新不断)