08 MotionLayout-MotionScene

目录

上一节中我们简单创建了一个使用了MotionLayout,而这一遍是对MotionScene的属性标签的一些说明

MotionScene的子元素属性标签

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

• <Transition> 包含运动的基本定义。

  • motion:constraintSetStart 和 motion:constraintSetEnd 指的是运动的端点。这些端点在 MotionScene 后面的 <ConstraintSet> 元素中定义。
  • motion:duration 指定完成运动所需的毫秒数

• <OnClick> 点击触发运动

• <OnSwipe> 拖拽来控制运动。

  • motion:touchAnchorId 可以滑动并拖动的视图。

  • motion:touchAnchorSide 表示我们从右侧拖动视图。

  • motion:dragDirection 表示拖动的进度方向。例如，motion:dragDirection="dragRight" 表示当您向右拖动时，进度会增加。

• <ConstraintSet>

<Transition>

• app:targetId：【id 值】设置用来触发过渡的那个 View 的 Id（例如：@id/image 或 @+id/image）。

提示：app:targetId 的值的前缀既可以是 @+id/ 也可以是 @id/，两者都可以。官方示例中使用的是 @+id/。不过，使用 @id/ 前缀似乎更加符合语义，因为 @+id/ 前缀在布局中常用来创建一个新的 Id，而 @id/ 前缀则常用来引用其他的 Id 值。为了突出这里引用的是其他的 Id 而不是新建了一个 Id，使用 @id/ 前缀要更加符合语义。

• app:clickAction：设置点击时执行的动作。该属性共有以下 5 个可选的值：

toggle：在 Start 场景和 End 场景之间循环的切换。
transitionToEnd：过渡到 End 场景。
transitionToStart：过渡到 Start 场景。
jumpToEnd：跳到 End 场景（不执行过渡动画）。
jumpToStart：跳到 Start 场景（不执行过渡动画）。

<OnSwipe>

• app:touchAnchorId：【id 值】设置拖动操作要关联到的对象，让触摸操作看起来像是在拖动这个对象的由 app:touchAnchorSide 属性指定的那个边。
• app:touchAnchorSide：设置触摸操作将会拖动对象的哪一边，共有以下 4 个可选值：

top
left
right
bottom

• app:dragDirection：设置拖动的方向（注意，只有设置了 app:touchAnchorId 属性后该属性才有效）。共有以下 4 个可选值：

dragUp：手指从下往上拖动（↑）。
dragDown：手指从上往下拖动（↓）。
dragLeft：手指从右往左拖动（←）。
dragRight：手指从左往右拖动（→）。

• app:maxVelocity：【浮点值】设置动画在拖动时的最大速度（单位：像素每秒 px/s）。
• app:maxAcceleration：【浮点值】设置动画在拖动时的最大加速度（单位：像素每二次方秒 px/s^2）。

注意:可以同时设置 <OnClick> 与 <OnSwipe> ，或者都不设置，而是使用代码来触发过渡。
还可以在 <Transition> 元素中设置多个 <OnClick>，每个 <OnClick> 都可以关联到一个不同的控件上。虽然 <Transition> 元素中也可以设置多个 <OnSwipe>，但是后面的 <OnSwipe> 会替换掉前面的 <OnSwipe>，最终使用的是最后一个 <OnSwipe>。

<ConstraintSet>

子元素定义一个场景约束集，并在 <ConstraintSet> 元素中使用 <Constraint> 元素定义单个 View 的属性约束。

• android:id：设置当前约束集的 id。这个 id 值可被 <Transition> 元素的 app:constraintSetStart 或者 app:constraintSetEnd 引用。

<Constraint> 元素属性说明：

android:id：当前约束关联到的那个 View 的 id。
app:transitionEasing：定义动画到此点时使用的缓动曲线，该值可以是一个字符串（例如 "curve(1.0,0,0,1.0)"）还可以是以下几个枚举值之一：

standard：标准
accelerate：加速
decelerate：减速
linear：线性

app:transitionPathRotate：【浮点值】相对于所采用的路径旋转对象（弧形路径/关键帧 相关）。
app:drawPath：绘制过渡动画路径（调试用，关键帧相关）。可以是以下几个枚举值之一：

none
path
pathRelative
deltaRelative
asConfigured
rectangles

app:progress：【浮点值】在关联的 View 上调用 setProgress(float) 方法（用于与嵌套的 ConstraintLayout 交互）

<Constraint> 元素用来定义单个 View 的属性约束

<Constraint> 元素用来定义单个 View 的属性约束，它支持对 View 的所有 ConstraintLayout 属性定义约束，以及对 View 的下面这些标准属性定义约束：

android:visibility
android:alpha
android:elevation
android:rotation
android:rotationX
android:rotationY
android:scaleX
android:scaleY
android:translationX
android:translationY
android:translationZ

当 View 的标准属性或者 ConstraintLayout 属性发生改变时，MotionLayout 会自动应用过渡动画,下一节我们会讲一下如果使用ConstraintSet来做一个过渡动画