MotionLayout动画从未如此简单！

搜狐技术产品小编2023

于 2021-07-15 07:30:00 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/SOHU_TECH/article/details/118773180

版权

本文字数：6106字

预计阅读时间：37分钟

第一步：添加依赖
第二步：创建布局和动画资源文件
- 创建布局
- 创建MotionScene动画资源文件
- 完善布局
- 添加动画
第三步：预览
基本使用总结
实现开头的动画效果
- 第一步：大图的主体效果
- 第二步：右下方点赞等按钮的动画
- 第三步：头像和名字
- 第四步：关注按钮
- 第五部：输入框和聊天列表动画
**MotionScene**常用属性讲解
- MotionLayout标签
- MotionScene标签
写在最后

话不多说先上图。

这是要做的最终效果。通过这些动画我们将了解MotionLayout的使用方法和常用的一些属性。

第一步：添加依赖

如果要使用MotionLayout请将ConstraintLayout更新到2.0及以上。在build.gradle文件中添加依赖

如果使用的是AndroidX，添加依赖如下：

dependencies {
   implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'
}

如果使用的是support支持包，添加依赖如下：

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

❝
本文使用的是constraintlayout:2.0.4版本和android studio 4.1.2

第二步：创建布局和动画资源文件

使用MotionLayout除了布局文件外。我们还需要编写一个描述动画的xml文件，这个文件用来描述动画开始、结束时的状态和一些中间点的状态。

创建布局

我们创建一个布局文件名为activity_motion_demo.xml根布局为ConstraintLayout。然后我们可以通过Android studio将布局转换为MotionLayout

选中刚刚的布局文件，选择Design标签找到ComponentTree面板，找到根布局右键选择Conver to MotionLayout

转换后能看到Design面板变成了大致下面这个样子，多出了一个动画预览的窗口。

然后我们来查看一下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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_motion_demo_scene">

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

根布局自动改为了MotionLayout并且添加了一个属性app:layoutDescription，这个属性所引用的文件就是我们要编写的动画描述文件了。好，点过去看看

创建MotionScene动画资源文件

AndroidStudio自动为我们创建的MotionScene 文件如下：

<?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="1000">
       <KeyFrameSet>
       </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
    </ConstraintSet>
</MotionScene>

这也是一个MotionScene文件的基本结构。

ConstrainSet描述了开始或结束时页面控件的状态
Transtion指定了动画要使用的ConstrainSet，动画的触发方式等。

有了布局文件和MotionScene文件，MotionLayout就能帮我们完成动画了。

如果我们不使用AndroidStudio来转换布局为MotionLayout的话，就需要自己在res\xml文件夹下创建一个根节点为<MotionScene>的xml文件。

❝
建议使用Android Studio来转换，这样在xml面板中能预览动画效果，手动创建的有时不能正常显示预览，需要重启Android Studio（我使用的是4.1.2版本有这个问题）。

完善布局

现在我们在布局中添加一个View并实现一个简单的移动效果。

由于MotionLayout是ConstraintLayout的子类，所以我们可以像使用ConstraintLayout一样来布局。下面添加一个方形的View到界面。

layout.xml文件：

<androidx.constraintlayout.motion.widget.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"
    app:layout="@xml/activity_motion_demo_scene">

    <View
        android:id="@+id/v_demo"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#FF43E182"
        />

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

❝
注意在MotionLayout布局下每个控件都需要设置一个id，即使我们不会使用到它。

添加动画

接下来我们为MotionScene文件添加内容。

完整文件看起来是这个样子的。

<?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="3000">
        <OnSwipe
            motion:dragDirection="dragRight"
            />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/v_demo"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:scaleX="0.5"
            android:scaleY="0.5"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/v_demo"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginLeft="20dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />

    </ConstraintSet>
</MotionScene>

其中ConstraintSet描述了View的两个位置，Transition指定了哪个ConstaintSet为开始状态哪个是结束和一些基本信息。具体标签的作用和属性的意义下面会说到。

第三步：预览

我们可以在xml布局文件面板中查看动画效果。将面板切换到Desgin标签

点击1所指的start可以预览start状态，点击2所指的end预览end状态。点击上方3所指的连线，可以在下方面板点击播放键查看动画。

接下来就可以运行程序在手机上查看动画效果啦。

基本使用总结

将ConstraintLayout升级到2.0或以上。
将布局转化为MotionLayout
创建MotionScene文件并在MotionLayout的 app:layoutDescription属性中指明。
在MotionScene文件中编辑<ConstrainSet>分别设置动画开始和结束时控件的状态。编辑<Transition>元素指明动画开始和结束对应的<ConstrainSet>是哪个。
预览和运行程序

实现开头的动画效果

我们一步步来实现开头的动画效果并借此来了解MotionLayout的属性。

第一步：大图的主体效果

我们先来看界面中最主要的那张大图片的动画。

这个动画效果为随拖动缩小图片并移动到顶部。

首先在布局文件中添加一个ImageView来显示图片。

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

    <ImageView
        android:id="@+id/iv_main"
        android:layout_width="match_parent"
        android:src="@drawable/wallpaper"
        android:background="@color/black"
        android:layout_height="match_parent"/>
</androidx.constraintlayout.motion.widget.MotionLayout>

这里我们在MotionLayout标签添加一个新的属性showPaths=true,添加这个属性MotionLayout会为每个有动画的控件绘制一条轨迹线方便我们调试动画效果。

接下来我们为这个ImageView在MotionScene文件中添加动画首先设置ImageView的开始状态：

<ConstraintSet android:id="@+id/start">
    <Constraint
        android:id="@+id/iv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</ConstraintSet>

然后设置ImageView的结束状态：

<ConstraintSet android:id="@+id/end">
    <Constraint
        android:id="@+id/iv_main"
        android:layout_width="match_parent"
        motion:layout_constraintTop_toTopOf="parent"
        android:layout_height="220dp" />
</ConstraintSet>

我们在ConstraintSet标签下来设置界面一种状态下的布局，我们需要为其设置一个id。Constraint标签用来描述一个控件的位置和属性等。这里我们设置ImageView开始时大为match_parent，结束时宽度不变，高度为220dp。

❝
我们需要在开始和结束的两个Constraint中为控件设置大小，即使控件大小没有改变也需要在两边都设置好大小。

然后我们将这两个ConstraintSet的id填入Transition标签。

<Transition
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@id/start"
    motion:duration="1000">
</Transition>

这样MotionLayout就能帮我们让控件在两种状态间运用动画平滑的过度了。这里我们动画设置了1秒的时间motion:duration="1000"单位为毫秒，我们也可以在MotionScene标签下设置时间motion:defaultDuration="1000"。这两种方式中Transition的优先级更高，如果Transition没有设置就使用MotionScene中设置的默认时间。

最后动画要响应手势上滑动的动作。在MotionLayout之前这件事可能很麻烦，但有了MotionLayout我们只需要在Transition下添加一个OnSwipe标签即可。

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
        <OnSwipe
            motion:dragDirection="dragUp"
            motion:touchAnchorSide="bottom"
            motion:touchAnchorId="@id/iv_main"/>
    </Transition>

<OnSwipe>标签表示拖动执行动画。motion:dragDirection="dragUp"表示向上边拖动执行动画。

如果需要响应点击事件可以用<OnClick>标签

完整的MotionScene文件如下：

<?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"
    motion:defaultDuration="1000">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
        <OnSwipe
            motion:dragDirection="dragUp"
            motion:touchAnchorSide="bottom"
            motion:touchAnchorId="@id/iv_main"/>
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/iv_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/iv_main"
            android:layout_width="match_parent"
            motion:layout_constraintTop_toTopOf="parent"
            android:layout_height="220dp" />
    </ConstraintSet>
</MotionScene>

现在可以点击运行试试效果了。

第二步：右下方点赞等按钮的动画

这个动画是三个按钮的移动效果，在开始的ConstraintSet将按钮布局成竖直排列，在结束时布局成水平排列，代码很简单就不在这里放了。

预览下效果能看到按钮呈直线移动了过去。但这直来直去的未免太单调了。为此MotionLayout提供了KeyFrameSet和KeyPosition。

KeyFrameSet包含于Transition标签中，这个标签用来描述一系列运动过程中的关键帧。我们可以利用其使动画效果变的更复杂。其子元素包含KeyPosition、KeyAttribute、KeyCycle、KeyTimeCycle、KeyTrigger。具体的用法如下：

 <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
        <OnSwipe 
            motion:dragDirection="dragUp"
            motion:touchAnchorSide="bottom"
            motion:touchAnchorId="@id/iv_main"/>
        <KeyFrameSet>
            <KeyPosition motion:framePosition="50"
                motion:motionTarget="@+id/iv_share"
                motion:percentY="0.5"
                motion:percentX="0.7"
                motion:keyPositionType="deltaRelative"/>

            <KeyPosition motion:framePosition="50"
                motion:motionTarget="@+id/iv_like"
                motion:percentY="0.5"
                motion:percentX="0.7"
                motion:keyPositionType="deltaRelative"/>
        </KeyFrameSet>
    </Transition>

我们在Transition下添加KeyFrameSet并在其中在添加两个KeyPosition。KeyPosition用来指定动画序列中特定时刻的位置。该属性用于调整默认的运动路径。

其中motion:motionTarget表示受影响的控件id，iv_share和iv_like分别是分享和点赞的按钮id。

motion:framePosition是这个关键帧的位置取值为1 到 99 之间的整数。这里取值50就是指动画进行到一半的位置。

motion:percentX和motion:percentY是控件到达motion:framePosition点时的位置，是个float值。这两个属性的具体意义需要根据motion:keyPositionType的类型来定，其中包括parentRelative，deltaRelative，pathRelative这三种类型。具体的意思会在下面的属性讲解里说明。现在我们使用deltaRelative并将值设定为0.5和0.7。

好了，再看一下现在的动画效果，直线运动变成了曲线。我们也可以多加几个关键帧让运动的路径变得更复杂。

第三步：头像和名字

注意名字那个TextView的文字有个变大变小的处理，这个要怎么实现呢？这就要用到CustomAttribute了。这个标签包含在Constraint标签中。用法如下：

<Constraint
    android:id="@+id/tv_name"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_marginLeft="8dp"
    motion:layout_constraintBottom_toBottomOf="@id/iv_avatar"
    motion:layout_constraintLeft_toRightOf="@id/iv_avatar"
    motion:layout_constraintTop_toTopOf="@id/iv_avatar" >
    <CustomAttribute
        motion:attributeName="textSize"
        motion:customFloatValue="18"/>
</Constraint>

motion:attributeName 是必需属性，并且必须与控件中具有 getter 和 setter 方法的属性相对应。比如这里的TextView就有setTextSize和getTextSize方法。

motion:customFloatValue 这个属性是基于上面的attributeName来决定的，这里的textSize是float所以用customFloatValue。支持的值类型还有颜色、像素、字符串、布尔等。具体会在下面的属性讲解中列出。

在开始和结束的Constraint中为TextView设置不同的字体大小就可以实现这个效果了。接下来在仔细观察一下头像和名字还有个淡入淡出的效果。很容易想到使用alpha变化。但alpah变化在MotionLayout中怎么用呢？那就要用到刚刚提到过的KeyAttribute了。

<KeyFrameSet>
  <KeyAttribute android:alpha="0.2"
        motion:framePosition="30"
        motion:motionTarget="@+id/iv_avatar"/>
    <KeyAttribute android:alpha="0.2"
        motion:framePosition="30"
        motion:motionTarget="@+id/tv_name"/>
    <KeyAttribute android:alpha="0.2"
        motion:framePosition="60"
        motion:motionTarget="@+id/iv_avatar"/>
    <KeyAttribute android:alpha="0.2"
        motion:framePosition="60"
        motion:motionTarget="@+id/tv_name"/>
</KeyFrameSet>

motion:motionTarget和motion:framePosition的意义和KeyPosition中是一样的， android:alpha也很直白不必多说。这里用到了四个KeyAttribute每个控件使用了两个，是因为要实现在动画的中间部分保持0.2的透明度不变，在快要结束时再变得可见。

KeyAttribute还支持visibility、rotation、scale等控件基本属性。

第四步：关注按钮

分析下这个效果：

按钮的渐隐渐显
位置变化
控件大小变化
文字大小变化
这些效果用上面讲过的方法就都可以实现了，只要把它们组合起来就是最终的效果啦。关键代码放在下面了，比较好理解。

<!-- 开始状态 -->
    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/tv_attention"
            android:layout_width="80dp"
            android:layout_height="26dp"
            android:layout_marginLeft="10dp"
            motion:layout_constraintBottom_toBottomOf="@id/iv_avatar"
            motion:layout_constraintLeft_toRightOf="@id/tv_name"
            motion:layout_constraintTop_toTopOf="@id/iv_avatar" >
            <CustomAttribute
                motion:attributeName="textSize"
                motion:customFloatValue="14"/>
        </Constraint>
    </ConstraintSet>

<!-- 结束状态 -->
    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/tv_attention"
            android:layout_width="58dp"
            android:layout_height="22dp"
            android:layout_marginRight="10dp"
            motion:layout_constraintBottom_toBottomOf="@id/v_frame"
            motion:layout_constraintRight_toRightOf="@id/v_frame"
            motion:layout_constraintTop_toTopOf="@id/v_frame" >
            <CustomAttribute
                motion:attributeName="textSize"
                motion:customFloatValue="10"/>
        </Constraint>
    </ConstraintSet>

 <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
        <OnSwipe motion:dragDirection="dragUp" />
        <KeyFrameSet>
            <KeyAttribute
                android:alpha="0"
                motion:framePosition="10"
                motion:motionTarget="@+id/tv_attention" />
            <KeyPosition
                motion:framePosition="10"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/tv_attention"
                motion:percentX="0"
                motion:percentY="0" />
            <KeyAttribute
                android:alpha="0"
                motion:framePosition="90"
                motion:motionTarget="@+id/tv_attention" />
            <KeyPosition
                motion:framePosition="90"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/tv_attention"
                motion:percentX="1"
                motion:percentY="1" />
        </KeyFrameSet>
    </Transition>

第五部：输入框和聊天列表动画

输入框就是控件大小的变化，聊天列表是一个控件位置的变化，用上面提到的方法完全可以解决。大家自己试试吧。

到这里文章开头的动画效果就完成了。MotionLayout的一些基本属性也都有所了解了。还有很多属性在文章的动画效果中没能用到，下面就为大家附上常用的属性。

MotionScene常用属性讲解

MotionLayout标签

layoutDescription ：设置布局的MotionScene文件。
applyMotionScene ：表示是否应用 MotionScene。此属性的默认值为 true。
currentState ：设置当前的状态，值对应MotionScene中的ConstraintSet节点的id。比如我们可以将其设置为@+id/end(结束状态)。
motionProgress ：值为0到1之间的小数，用来设置页面开始时的动画进度。例如，将motionProgress设置为0.5，那么页面将以动画进行一半的状态开始。
showPaths ：是否显示动画路径，为true话会显示view运动的轨迹线
motionDebug ：显示何种调试信息，设置的话会在界面的下方显示一些动画调试信息

如果我们只设置了motion:showPaths="true"的话那么就会显示轨迹线如果同时设置了motion:showPahts和motion:motionDebug的话以showPahts的设置会失效。以motionDebug的设置为准

属性值	效果
NO_DEBUG	不显示轨迹线，也不显示debug信息
SHOW_PROGRESS	不显示轨迹线，只显示debug信息
SHOW_PATH	只显示轨迹线，不显示debug信息
SHOW_ALL	同时显示轨迹线和debug信息

MotionScene标签

<Transition>：指定动画的开始和结束状态、触发动画等方式、动画中间的关键帧（必须包含）
<ConstraintSet>：节点用来定义开始或是结束时控件的状态。我们需要在这个节点下重新为想要动画的控件进行布局。这里的设置会覆盖之前布局xml文件中的设置，可以将这个节点想象为ConstraintLayout布局，其中的子节点Constraint可以想象为每一个View其中的android:id=""属性对应着原layout.xml中的view的id。（非必须包含）
defaultDuration：所有过渡的默认持续时间（以毫秒为单位）。

Transition标签

constraintSetStart ：设置动画的开始状态，这里对应一个ConstraintSet的id
constraintSetEnd ：设置动画的结束状态，这里对应一个ConstraintSet的id
duration ：动画的持续时间，如果没有设置会使用MotionScene元素的defaultDuration
autoTransition：是否自动改变状态，默认情况下页面是constraintSetStart的状态开始的。这个属性可以使页面在开始时切换到另一个状态
- animateToStart ：切换到开始状态，有动画效果
- animateToEnd ：切换到结束状态，有动画效果
- jumpToStart ：切换到开始状态，无动画效果：
- jumpToEnd ：切换到结束状态，无动画效果
motionInterpolator :动画的差值器，其值为常用的几种效果bounce,easeIn,easeOut,easeInOut,linear

OnClick和OnSwipe

包含于Transition元素，用来设置动画等触发方式

OnCLick ：点击触发
- transitionToStart：从当前状态跳到 constraintSetStart 属性指定的状态，有动画效果。
- transitionToEnd：从当前状态跳到 constraintSetEnd 属性指定的状态，有动画效果。
- jumpToStart：从当前状态切换到 constraintSetStart 属性指定的状态，无动画效果。
- jumpToEnd：从当前状态切换到 constraintSetEnd 属性指定的状态，无动画效果。
- toggle：在transitionToStart和constraintSetEnd状态之间使用动画反复切换。每次点击从一种状态切换到另一种状态。
- targetId ：希望被点击后触发动画的视图id。当用户点击此视图时开始动画
- clickAction : 点击时要执行的操作，支持的值包括。
OnSwipe ：滑动触发
- touchAnchorId ：受滑动影响的控件id
- touchAnchorSide ：滑动所固定到的目标视图的一侧。MotionLayout 将尝试在该固定点与用户手指之间保持恒定的距离。可接受的值包括 "left"、"right"、"top" 和 "bottom"。
- dragDirection ：用户滑动动作的方向。如果设置了此属性，将仅适用于沿特定方向的滑动。可接受的值包括 "dragLeft"、"dragRight"、"dragUp" 和 "dragDown"
- dragScale ：控制视图相对于滑动长度的移动距离。默认值为 1，表明视图移动的距离应与滑动距离一致。如果 dragScale 小于 1，视图移动的距离会远远小于滑动距离（例如，dragScale 为 0.5 意味着如果滑动移动 4 厘米，目标视图会移动 2 厘米）。如果 dragScale 大于 1，视图移动的距离会大于滑动距离（例如，dragScale 为 1.5 意味着如果滑动移动 4 厘米，目标视图会移动 6 厘米）。
- maxVelocity ：目标视图的最大速
- maxAcceleration ：目标视图的最大加速度。

KeyFrameSet

包含于Transition元素，这个元素用来描述一系列运动过程中的关键帧。我们可以利用其使动画效果变的更复杂。其子元素包含KeyPosition、KeyAttribute、KeyCycle、KeyTimeCycle、KeyTrigger

KeyPosition

指定动画序列中特定时刻的位置。该属性用于调整默认的运动路径。

motionTarget ：受影响的控件id。
framePosition ：关键帧的位置取值为1 到 99 之间的整数，这个值相当于动画过程（时间）的百分比。例如，如果 framePosition 为 25，则控件在整个动画过程的四分之一处到达点。
percentX、percentY ：被motionTarget指定的控件在到达的framePosition点时的位置。这两个数值的具体意义和keyPositionType 属性的设定有关。
keyPositionType ：指定percentX、percentY的坐标系。
parentRelative
percentX 和 percentY 坐标系为父布局坐标系。即父布局左上角为坐标原点其值0为原点，1为X或Y轴的端点。

deltaRelative

percentX 和 percentY 坐标系以constraintSetStart指定的位置为原点，X轴平行于父布局X轴，方向为动画开始的x点指向结束点x点，其值0为原点，1为动画整个动画X轴方向的运动距离。Y轴平行于父布局Y轴，方向为动画开始的y点指向结束点y点，其值0为原点，1为动画整个动画Y轴方向的运动距离。

pathRelative

以constraintSetStart指定的位置为原点，链接动画开始点和结束点为X轴，X轴顺时针旋转90度为Y轴，0为坐标原点，1为动画开始点和结束点连线距离。

KeyAttribute

指定动画序列中特定时刻的视图属性。

motionTarget 和framePosition 与KeyPosition意义相同
我们可以设置以下属性
- android:visibility
- android:alpha
- android:elevation
- android:rotation
- android:rotationX
- android:rotationY
- transitionPathRotate
- android:scaleX
- android:scaleY
- android:translationX
- android:translationY
- android:translationZ

例如：我们可以设置在动画到达一半时控件缩小为原来的0.2倍。<KeyAttribute>设置如下：

<KeyFrameSet>
  <KeyAttribute
    motion:motionTarget="@id/v_demo"
    motion:framePosition="50"
    android:scaleX="0.2"
    android:scaleY="0.2"/>
</KeyFrameSet>

我们可以得到如下效果：

KeyCycle

根据给定的函数对设定的属性进行周期性变化。

motionTarget ：想要控制的控件id。
wavePeriod ：表示运动的周期数，
waveShape ：表示周期的函数，这里支持的函数有sin，cos，square，triangle，saw，reverse_saw和bounce
动画会根据上面的wavePeriod,waveShape对如下支持的属性进行周期变化
- android:alpha
- android:elevation
- android:rotation
- android:rotationX
- android:rotationY
- android:scaleX
- android:scaleY
- android:translationX
- android:translationY
- android:translationZ

例如：实现一个成正弦函数上下移动的动画效果，<KeyCycle>设置如下：

<KeyFrameSet>
  <KeyCycle
    motion:motionTarget="@id/v_demo"
    motion:wavePeriod="1"
    motion:waveShape="sin"
    android:translationY="50dp"/>
</KeyFrameSet>

我们可以得到如下效果：

KeyTrigger

在动画中调用控件的指定方法。

motionTarget ：想要控制的控件id
framePosition ：取值范围和意义与在KeyPosition元素中相同，当动画执行到framePosition设定的位置时会执行onCross，onPositiveCross，onNegativeCros指定的方法。
onCross ：指定需要调用的方法名，控件中必须有和此属性指定方法名同名的方法。无论动画正向还是反相只要当动画执行到framePosition设置的位置都会执行指定方法。
onPositiveCross ：作用同onCross，但只有正向执行动画到达framePosition 设置的位置时才会执行指定的方法。
onNegativeCross ：作用同onCross，但只有反向执行动画到达framePosition 设置的位置时才会执行指定的方法。

例如：我们自定义一个ToggleButton添加一个toggle方法来控制控件的开关。

public class MyToggleButton extends AppCompatToggleButton
{
    //.... 省去构造方法
  
  //新添加的方法。
    public void toggle(){
        setChecked(!isChecked());
    }
}

然后我们在MotionScene中这样写

<!-- onCross 中的名词和控件中新添加的方法名相同 -->
<KeyFrameSet>
  <KeyTrigger
     motion:motionTarget="@id/tb"
     motion:framePosition="50"
     motion:onCross="toggle"/>
</KeyFrameSet>

效果如下，在动画进行到一半时开关会打开。

ConstraintSet

用来设置视图在开始或者结束时各个控件的位置和大小等状态，

id ：唯一标识符
deriveConstraintsFrom ：另一个 ConstraintSet 的 ID。如果指定此属性，相应集内的所有约束条件都将应用于此 ConstraintSet，除非此集明确替换它们

Constraint

每一个Constraint元素对应一个id属性所指向的View，

id ：用来指定布局中对应的view

Constraint元素中我们可以设置控件的大小并使用ConstraintLayout的属性来设置控件位置。除此之外我们还可以插入以下属性：

alpha
visibility
elevation
rotation、rotationX、rotationY
translationX、translationY、translationZ
scaleX、scaleY

❝
注意：我们必须为控件设置宽和高即使在布局xml中已经设置过了

CustomAttribute

包含在Constraint元素中，一个 <CustomAttribute> 本身包含两个属性：

motion:attributeName 是必需属性，并且必须与控件中具有 getter 和 setter 方法的属性相对应。比如填写motion:attributeName = "backgroundColor"那么我们的控件中就必须有基本的 getBackgroundColor() 和 setBackgroundColor() 方法。
第二个属性我们需要基于上面填写的属性来决定。比如上面填写的backgroundColor这里我们就需要使用customColorValue。以下是支持的数据类型：
- customColorValue 适用于颜色
- customColorDrawableValue 适用于颜色的drawable
- customPixelDimension 适用于像素
- customIntegerValue 适用于整数
- customFloatValue 适用于浮点值
- customStringValue 适用于字符串
- customDimension 适用于尺寸
- customBoolean 适用于布尔值

❝
请注意，在指定自定义属性时，您必须在开始和结束的 <ConstraintSet> 元素中都为其指定。

例如：如果要改变控件的背景颜色，我们需要在原来的Constraint元素下添加CustomAttribute元素并向如下设置

 <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/v_demo"
            android:layout_width="60dp"
            android:layout_height="60dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintTop_toTopOf="parent" >
          <!-- 控件中需要有和attributeName同名的get和set方法 -->
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#ff00ff"/>
        </Constraint>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/v_demo"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:scaleX="1"
            android:scaleY="1"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent">
          <!-- 结束时同样需要设置颜色 -->
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#00ffff"/>
        </Constraint>
    </ConstraintSet>

效果如下：

写在最后

文章中的动画效果算是个入门，MotionLayout还有些更复杂更不好理解的属性。还有MotionScene要怎样复用？代码如何控制动画？等等。那下次就和大家分享这些进阶一点的东西吧。

上期获奖名单公布

恭喜“阿策~”、“hao”、木雨夕、“_”、“大宇”！以上读者请及时添加小编微信：sohu-tech20兑书~

也许你还想看

（▼点击文章标题或封面查看）

【文末有惊喜!】iOS日历攻略：提醒调休并过滤法定节假日

2021-06-24

【文末有惊喜!】利用Swift API可用性解决App Extension无法编译

2021-06-10

【文末有惊喜!】详解：mach-o文件如何分析多余的类和方法

2021-07-08

正经分析iOS包大小优化

2021-05-27

【文末有惊喜!】如何让iOS推送播放语音？

2021-05-13

搜狐技术产品小编2023

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
MotionLayout动画从未如此简单！

本文字数：6106字预计阅读时间：37分钟第一步：添加依赖第二步：创建布局和动画资源文件创建布局创建MotionScene动画资源文件完善布局添加动画第三步：预览基本使用总结实现开头的...
复制链接

扫一扫