motionlayout的简单使用

MotionLayout

什么是motionLayout？

MotionLayout 是 Android 中的一个强大工具，用于创建复杂的布局动画和过渡效果。它是 ConstraintLayout 的一个子类，继承了 ConstraintLayout 的布局功能，同时添加了动画和过渡的支持。MotionLayout 在 Android Studio 2.0 版本引入，为开发人员提供了更多用于创建交互式和动画化界面的工具。

MotionLayout 具有以下主要特点和功能：

1. 可视化编辑工具：Android Studio 提供了可视化编辑器，让开发人员可以在设计时创建和编辑 MotionLayout 的动画和过渡。这大大简化了动画的设计和调试过程。
2. 定义起始和结束状态：开发人员可以定义起始和结束状态，以及它们之间的转换。这使得可以创建复杂的界面过渡效果。
3. 属性动画支持：MotionLayout 支持属性动画，你可以定义哪些属性在过渡过程中发生变化，例如位置、大小、旋转、透明度等。
4. 关键帧动画：你可以在 MotionLayout 中定义关键帧，用于控制界面元素的动画行为。这使得可以创建复杂的动画效果，如按钮点击、拖动等。
5. 交互支持：MotionLayout 还支持用户交互，你可以定义用户交互的响应和效果，例如滑动、点击等。这使应用更具交互性。
6. 自定义属性和过渡：你可以创建自定义属性和过渡，以满足特定的动画需求。
7. 兼容性：MotionLayout 可以在支持 Android ConstraintLayout 的设备上运行，而对不支持的设备则会回退到正常的布局。

为什么需要motionlayout？

1. 创建复杂的布局动画和过渡：MotionLayout 允许开发人员创建复杂的布局动画和过渡效果，使应用更具交互性和吸引力。它使得设计师和开发人员能够轻松定义起始和结束状态，以及它们之间的动画过程，从而实现精细的过渡效果。
2. 可视化编辑工具：Android Studio 提供了可视化编辑工具，使创建和编辑 MotionLayout 动画变得更加直观和容易。设计师和开发人员可以在可视化编辑器中查看和调整动画，而不必深入了解动画的底层代码。
3. 更少的手动代码编写：相比传统的动画实现方式，MotionLayout 可以减少大量手动编写动画代码的工作。这意味着开发人员可以更快地实现复杂的动画效果，同时减少错误的可能性。
4. 更好的性能：MotionLayout 是基于 ConstraintLayout 构建的，而 ConstraintLayout 是 Android 中性能较高的布局容器。因此，使用 MotionLayout 可以确保应用的动画效果在大多数设备上都有较好的性能表现。
5. 适用于各种应用场景：MotionLayout 可以用于创建各种应用场景的动画和交互效果，包括界面过渡、按钮点击效果、滑动、拖动、展开和折叠动画等。它非常灵活，可以满足各种动画需求。
6. 支持用户交互：MotionLayout 支持用户交互，允许定义用户交互的响应和效果。这意味着你可以创建响应用户手势的动画和交互效果，提高应用的用户体验。

它使得创建复杂的布局动画和过渡效果变得更加容易和高效。它适用于各种应用，可以提升应用的交互性和吸引力，并减少开发时间和精力的投入。

如何使用motionlayout？

motionlayout是constrainlayout的子类，所以具体布局按照约束布局来。

motionlayout由两部分组成：

运动描述文件和布局是一一对应的，一个 MotionLayout 需要对应一个描述 XML 文件，并且描述文件中的所有控件的 ID 也必须在布局中能找到。

MotionScene 中的定义的运动描述优先于 MotionLayout 中的任何类似定义。

1.在activity对应的xml里面的motionlayout，（也称之为布局信息）

这里的内容就和普通的布局文件没有区别，用来描述布局的信息，各个子控件的位置。

掌握每个属性的具体功能。

属性介绍：

• applyMotionScene：布尔类型，表示是否应用 MotionScene，默认值为 true。
• showPaths：布尔类型，表示在运动进行时是否显示运动路径。默认值为 false。
• progress：float类型，可以明确指定转换进度（取值0.0~1.0）
• currentState：reference类型，可指定具体的 ConstraintSet。 这个属性可以引用一个具体的 ConstraintSet，并将 MotionLayout 布局设置为指定状态的布局配置。
  例如，假设你有一个 MotionLayout，其中包括两种状态：起始状态和结束状态。你可以创建两个不同的 ConstraintSet，分别表示这两种状态的布局配置。然后，你可以在 XML 中将 currentState 属性设置为引用其中一个 ConstraintSet 的名称，以指定 MotionLayout 的当前状态。当你更改 currentState 属性时，MotionLayout 将根据相应的 ConstraintSet 来切换布局状态，从而实现状态之间的平滑过渡和动画效果。
• motionDebug：可显示与运动有关的其他调试信息。可取值有：SHOW_PROGRESS、SHOW_PATH或SHOW_ALL。

显示fps帧数，具体的过程路线 ，控件的state

2.在res/xml 目录下的MotionScene文件。（也称之为运动描述文件）

MotionScene文件的内容用于描述动画，和过渡的效果。

里面必须包含的元素：

• < MotionScene > 这是整个运动描述文件的根节点元素
• < Transition >
  指定运动场景需要的动画序列，可以有多个，每一个必须指定运动序列。
• < ContrainSet >
  用于指定动画的开始和结束的状态，里面可以包括多个视图，这里面的视图在布局文件中有所声明，动画才会应用到对应试图上面

下面对这三个标签进行逐一介绍：

< MotionScene >

必须包含：

< Transition > :用于指定运动场景所需要的动画序列，可以有多个，每一个指定需要的运动序列。如果 <MotionScene> 包含多个 <Transition> 元素，MotionLayout 会根据用户的互动选择最合适的 <Transition> 元素，但是要注意防止冲突。

可以包含：

< ContrainSet > ：运动的状态布局集，为 <Transition> 元素指定开始或结束状态。 MotionLayout 关联的 <MotionScene>可以没有 <ConstraintSet> 子元素，因为 <Transition> 可指向 XML 布局，而不是指向 <ConstraintSet>布局集。

通常，一个 <Transition> 元素可指向两个 <ConstraintSet> 元素，其中一个定义动画序列的开始，另一个定义动画序列的结束。

示例：

<Transition
        motion:constraintSetEnd="@+id/btn7_end"
        motion:constraintSetStart="@+id/btn7_start">
        <OnSwipe
            motion:dragDirection="dragDown"
            motion:maxVelocity="2"
            motion:touchAnchorId="@+id/btn7"
            motion:touchAnchorSide="bottom" />

        <KeyFrameSet>
            <KeyPosition
                motion:framePosition="25"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/btn7"
                motion:percentX="0.5"
                motion:percentY="-0.2" />
            <KeyPosition
                motion:framePosition="75"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/btn7"
                motion:percentX="0.4"
                motion:percentY="0.6" />
        </KeyFrameSet>
    </Transition>

< Constraint >

常用属性：

• 对应MotionLayout中控件的id
• 其他在约束布局里面的位置属性

上面有示例

< Transition >

常用属性：

1. motion:constraintSetStart：运动序列的初始状态。可以是 的 ID （属性值设置为“@+id/constraintSetId”），也可以是布局（属性值设置为"@layout/layoutName”）。
2. motion:constrainSetEnd: 运动序列的最终状态。可以是 的 ID （属性值设置为“@+id/constraintSetId”），也可以是布局（属性值设置为"@layout/layoutName”）。
3. motion:duration运动序列的时长（单位：毫秒，可选）。如果未指定，则使用 元素中的 defaultDuration 属性值。

可以包含的元素：

< OnClick > : 表示用户点击触发

< OnSwipe > ：表示用户滑动触发

< KeyFrameSet > : 为运动的序列中元素设定一个或多个中间位置或者属性设置

< OnClick >

用于指定，用户进行点击之后，视图要进行的操作，用于《Transition》内部，指定当用户点击视图时触发动画序列，在一个< Transition >内部只能有一个< OnClick >元素

常用属性：

• motion:targetId 表示这个动画应用的对象。
• motion:clickAction 点击时触发的操作，enum类型，包括

取值	说明	备注
transitionToStart	从当前状态转变到<Transition> 元素中 motion::constraintSetStart 属性指定的状态，转变过程有动画效果
transitionToEnd	从当前状态转变到<Transition> 元素中 motion:constraintSetEnd 属性指定的k状态，转变过程有动画效果。
jumpToStart	从当状态转变到<Transition> 元素中 motion::constraintSetStart 属性指定的状态，转变过程无动画效果
jumpToEnd	从当状态转变到<Transition> 元素中 motion:constraintSetEnd 属性指定的状态，转变过程无动画效果
toggle	在<Transition> 元素中 motion::constraintSetStart 和 motion:constraintSetEnd 两个属性指定的两个 状态中相互转换，转变过程有动画效果	只要在非这两个状态下，触发都会向目标状态的相反状态转变。例如：当动画执行到中间状态时， 触发时，将不会到达当前动画的目标状态，而是立刻向当前动画的目标状态的相反状态转变

注意一点：

是当前状态，还是直接到达目标状态，还是到达和目标状态相反

< OnSwipe >

该元素用于指定当用户在不居中滑动时需要执行的操作。动画序列的速度和目标视图的动画，受滑动的速度和方向影响，滑动的速度和方向是通过可选参数配置来控制的。

常用的属性：

motion:touchAnchorId：滑动时需要移动的视图 ID。
motion:touchAnchorSide：滑动所关联到的目标视图的锚点边，MotionLayout 会尝试在该锚点点与用户手指之间保持恒定的距离。（可取值有： left、right、top 和 bottom)。
motion:dragDirection：用户滑动的方向，如果设定了该值，这个 将仅支持像特定的方向滑动（可取值有：dragLeft、dragRight、dragUp 和 dragDown）
motion:dragScale：控制目标视图的滑动距离和用户手指滑动距离的相对比例，默认值是1。取值小于1时目标视图的移动速度小于手指滑动速度，取值大于1时目标视图的移动速度大于手指的滑动速度。
motion:maxVelocity：目标视图的最大速度。
motion:maxAcceleration：目标视图的最大加速度。
motion:onTouchUp：触摸收起时的动作，可选值有：stop(停止动画)、autoComplete(自动完成动画)、autoCompleteToEnd(自动完成到结束状态)、autoCompleteToStart(自动完成到开始状态)、decelerate(减速停止动画)、decelerateAndComplete(减速并完成动画)、

< KeyFrameSet >

用于定义视图在运动过程中，在特定的时刻的位置，换言之，就是与运动轨迹上的关键点的位置，在 <KeyFrameSet> 中可以添加多个 <KeyPosition> 用来添加多个不同的关键点位置

motion:framePosition：关键帧位置，用百分比表示，取值为 0~100 之间的整数。（例如：取值20，表示该关键帧在运动轨迹的 20% 位置处 ），这个点将运动时间一分为二，两边的时间是相等的，如果运动轨迹长度不一样，那么将会造成运动速度不一样。但需要注意的是，关键帧的位置并不是关键点的位置。

motion:keyPositionType：关键点的类型，不同的类型会对 motion:percentX 和 motion:percentY 的值做出不一样的解析。取值有 parentRelative 、 deltaRelative 和 pathRelative。

motion:percentX：X 轴方向的属性取值百分比，取值范围为0.0~1.0。

motion:percentY：Y 轴方向的属性取值百分比，取值范围为0.0~1.0。

关键点类型说明：

parentRelative ：父容器关系型，即关键点的位置是相对于整个父容器中的相对位置来指定，percentX 和 percentY 分别表示 X 轴和Y轴相对位置，取值为 -1.0~1.0（负数时目标视图将移动到父容器外面）。需要注意的是：关键点的位置是相对父容器来指定，跟 “开始点” 和 “结束点” 位置无关。

deltaRelative：三角区域关系型，在目标视图整个运动序列移动的区域组成一个坐标轴，X 为横轴，Y 为纵轴，原点为 “开始点”，视图移动的方向为坐标的正方向。percentX 和 percentY 分别为 X 轴和 Y 轴上的数值，控制关键点的位置，取值范围是 -1.0 ~ 1.0之间，负数表示在坐标轴的负值方向位置。framePosition 一样控制的是轨迹弧顶的位置。
pathRelative 路径关系型，即关键点的位置是相对于路径相对指定的，路径是指 “开始点” 和 “结束点” 的直线路径（构成 X 轴），percentX 表示在 X 轴相对位置，0 表示在开始点， 1表示在结束点；percentY 表示垂直于 X 轴（Y 轴）的相对位置，正数在 X 轴左侧，负数在 X 轴右侧。 |percentY 取值范围为-1.0~1.0，Y 轴距离是以 “开始点” 和 “结束点”之间的距离为基数的百分比（也就是说 Y 轴的最大距离就是开始点和结束点直线距离的最大值，如果该值取0，弧度为0，则轨迹为直线）。另外， framePosition 控制的是轨迹弧顶的位置（而不是关键点的位置），大于 50 时偏向起始点，小于50时偏向结束点，弧顶两端轨迹，运动时间是相等的，如果取了不对等的值（非50），就可以实现快慢变化的效果。

设置视图属性

前面提到可以通过在 <KeyPosition> 元素中使用 <KeyAttribute> 元素在关键点设置标准属性，改变视图的样式，在 <ConstraintSet> 元素包含的子元素中，也可以设置视图的属性，改变视图样式，包括标准属性和自定义属性。

< ConstraintSet >插入标准属性

在 <Constraint> 元素中可包含标准属性，用于设置视图在改状态下的样式。

< CustomAttribut >自定义属性

在 CustomAttribut 元素中，您可以使用 元素设置属性，自定义属性不仅仅可以设置标准属性，也可以设置非标准的相关属性（例如：backgroundColor 背景色），但是必须要注意一点，设置的自定义属性，必须是在 View 中定义了 getter 和 setter 方法的，而且属性值的类型必须准确。

一个< CustomAttribute >元素必须包含两个属性：

motion:attributeName：属性名（必须）
必须包含以下含类型的属性值的一个：
motion:customColorValue ： 适用于颜色
motion:customIntegerValue ：适用于整数
motion:customFloatValue ：适用于浮点值
motion:customStringValue ：适用于字符串
motion:customDimension ：适用于尺寸
motion:customBoolean ：适用于布尔值

注意事项：

1. 属性名必须正确，且这个属性必须包含对外的 getter 和 setter 方法，否则自定义属性无效=；
2. 属性值必须选择正确的类型，否则自定义属性无效（可以查看 setter 方法中的参数类型选择正确的类型）