【安卓基础重点知识8】MotionLayout

用户00445215930
0 阅读5分钟

1. MotionLayout

MotionLayout 是在 ConstraintLayout 2.0 版本中引入的。MotionLayout 是 ConstraintLayout 的一个子类，专门用于创建复杂的动画效果和过渡。通过 MotionLayout，开发者可以在布局文件中定义多个状态，并在这些状态之间进行平滑的过渡，从而实现丰富的动画效果，例如转场动画、导航菜单的展开与收起等

MotionLayout中有View、Helper两部分，其中View部分表示MotionLayout内部的子View，；而Helper部分可以认为是动画相关了

1.1 将ConstraintLayout转成MotionLayout

注意：ConstraintLayout2.0版本以上

1.2 相关属性

  • app:layoutDescription="@xml/activity_main_scene"：链接MotionScene

  • app:motionDebug="SHOW_PATH"

    • SHOW_PATH 显示运动路线

    • SHOW_PROGRESS 显示帧率，运动进度，例：56 fps start->end (progress:100.0) state=end

    • SHOW_All 显示所有

    • NO_DEBUG 不显示

  • app:showPaths="true"：显示运动轨迹

2. MotionScene

示例：

MotionScene 由三部分组成：ConstraintSet 、Transition、StateSet(描述系统支持的状态(可选))

2.1 ConstraintSet

一个完整动画肯定包含动画的起点和终点，而通过ConstraintSet就可以描述动画的起点和终点的约束信息

2.2 Transition

在Transition中包含三个属性，分别是：constraintSetStart（开始状态）、constraintSetEnd（结束状态）、duration（持续时间）

触发切换的方式共分为两种，分别是onClick和onSwipe：

2.2.1 OnClick

表示用户点击触发转场动画

相关参数：

  • targetId：指定布局文件中View的id，当点击此id对应的View时会触发动画；如果不指定id，那么点击整个MotionLayout区域都会触发动画

  • clickAction：可以设置transitionToStart、transitionToEnd、toggle、jumpToStart、jumpToEnd，他们各自的含义如下：

    • toggle：默认设置，在transitionToStart、transitionToEnd之间来回切换。如果在Start状态，点击之后会切换到End状态，反之一样

    • transitionToEnd：过渡到End状态，有动画效果

    • transitionToStart：过渡到Start状态，有动画效果

    • jumpToEnd：直接跳转到End状态，没有动画效果

    • jumpToStart：直接跳转到Start状态，没有动画效果

2.2.2 OnSwipe

用户滑动触发，它会根据用户滑动行为调整动画的进度。一个Transition 标签下可以包含多个OnSwipe

相关参数：

  • motion:touchAnchorId

正在通过滑动移动的视图

  • touchRegionId

将触摸可以开始的区域限制在该view的边界内(即使该视图是不可见的)

  • motion:dragDirection

用户滑动动作的方向。如果设置了此属性，则此 <OnSwipe> 仅适用于沿指定方向的滑动。可接受的值包括 "dragLeft"、"dragRight"、"dragUp" 和 "dragDown"。

  • motion:touchAnchorSide

MotionLayout 可在锚点与用户手指之间保持恒定的距离。可接受的值包括 "left"、"right"、"top" 和 "bottom"

  • motion:dragScale

控制视图相对于滑动长度的移动距离。默认值为 1，表示视图按照滑动的幅度移动。如果 dragScale 小于 1，则视图移动距离小于滑动距离。例如，dragScale 为 0.5 表示如果滑动移动 4 厘米，目标视图会移动 2 厘米。如果 dragScale 大于 1，则视图移动的距离大于滑动距离。例如，dragScale 为 1.5 表示如果滑动移动 4 厘米，目标视图会移动 6 厘米。

  • motion:maxVelocity

目标视图的最大速度。

  • motion:maxAcceleration

目标视图的最大加速度。

2.2.3 KeyFrameSet

动画过渡的路径可以是直线，也可以是任意曲线，而这就需要通过KeyFrameSet来设置。通过 <KeyPosition> <KeyAttribute> 指定运动序列过程中视图的位置和属性

  • KeyPosition

指定视图在运动序列中特定时刻的位置，用于调整默认的运动路径

属性：

  • motion:motionTarget：被控制视图的Id

  • motion:framePosition：[1-99] 之间的整数。用于指定运动序列中视图何时到达此 <KeyPosition> 指定的点。例如，如果 framePosition 为 25，则视图在整个运动路径的四分之一处到达指定点

  • motion:percentX / motion:percentY：是相对于父视图指定的。X 为横轴，范围从 0（左端）到 1（右端）。Y 为纵轴，其中 0 为顶部，1 为底部

  • motion: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

指定视图在运动序列中特定时刻的属性

属性：

  • motion:motionTarget：被控制视图的Id。

  • motion:framePosition：从 1 到 99 之间的整数，用于指定在运动序列中视图何时具有该 <KeyAttribute> 指定的属性。例如，如果 framePosition 为 25，则视图在运动的四分之一处具有指定属性

  • motion:visibility

  • motion:alpha：视图的透明度，范围从0（完全透明）到1（完全不透明

  • motion:rotation：视图的旋转角度

  • motion:rotationX

  • motion:rotationY

  • motion:scaleX：视图的水平缩放比例

  • motion:scaleY：视图的垂缩放比例

  • motion:translationX：视图的水平移动距离

  • motion:translationY：视图的垂直移动距离。

  • motion:translationZ：视图的Z轴移动距离，用于3D效果

示例：

Android | MotionLayout入门级使用教程（一）

『译』ConstrainLayout 2.0 之 MotionLayout（Part1.1）

MotionLayout入门

「译」MotionLayout 介绍 (part II)

MotionLayout 运动布局入门

MotionLayout使用KeyFrameSet实现曲线动画(上)

MotionLayout MotionScene 动画从未如此简单！

本系列【安卓基础重点知识】是刚开始学习android的时候记录的，其中部分内容来自网页，忘记记录来源了，如需添加引用，联系我即可

avatar
文章
阅读
粉丝