MotionLayout 示例

本文档包含有关如何使用 MotionLayout 的示例。每个示例都包含一段演示运动的视频,以及运动场景和布局的相应代码。

基本运动

此示例包含一个视图,您可以轻触并拖动该视图来水平移动。

图 1.拖动视图。

自定义属性 - backgroundColor

此示例与基本运动示例类似。除了基本运动之外,视图的背景颜色也会随着视图的移动而变化。

图 2.在背景颜色发生变化时拖动视图。

ImageFilterView - 图片转换

以下示例展示了如何转换 ImageFilterView 的饱和度值。

图 3.在饱和度发生变化时拖动图片。

关键帧位置

此示例使用 <KeyFrameSet> 在运动过程中更改视图的 Y 轴位置。

图 4.拖动视图并更改其 Y 位置。

关键帧插值

此示例基于关键帧位置示例,向视图过渡添加了旋转和缩放功能。

图 5.拖动视图并更改其 Y 位置、旋转和缩放。

关键帧周期

此示例添加了 <KeyCycle> 元素,以便在视图中添加波状运动。

图 6.拖动以波状动作的视图,同时更改其颜色。

CoordinatorLayout (1/2)

此示例将 MotionLayout 添加到了现有的 AppBarLayout,以向应用栏添加运动。此示例在 MotionLayout 简介(第 III 部分)中进行了进一步介绍。

图 7.在应用栏展开时滚动内容。

CoordinatorLayout (2/2)

此示例将 MotionLayout 添加到了现有的 AppBarLayout,以向应用栏添加运动。

图 8.应用栏展开时滚动内容,文本以动画形式进出应用栏。

DrawerLayout (1/2)

此示例显示了如何将运动添加到 DrawerLayout 中。如需了解此示例,请参阅 MotionLayout 简介(第 III 部分)

图 9.展开“DrawerLayout”。

DrawerLayout (2/2)

此示例显示了如何将运动添加到 DrawerLayout 中。

图 10.使用动画菜单文本展开“DrawerLayout”。

侧边栏

以下示例展示了如何在将主要内容区域向右拖动时显示侧边栏。

图 11.通过拖动主要内容显示侧边栏。

视差

此示例演示了视差背景,其中不同的背景图层以不同的速度移动。

图 12.标题图片中的视差效果。

ViewPager

此示例展示了如何在 ViewPager 标签页之间滑动时添加运动。此示例在 MotionLayout 简介(第 III 部分)中进行了进一步介绍。

图 13.滑动“ViewPager”时在标题图片中显示视差效果。

ViewPager - Lottie

此示例显示了如何在 ViewPager 标签之间滑动时添加运动。

图 14.一张图片,其中展示了滑动“ViewPager”时在标题图片中呈现 Lottie 效果。

复杂运动 (1/3)

此示例结合了前面示例中的元素来演示复杂运动。

图 15.结合各种效果来制作复杂的运动。

复杂运动 (2/3)

此示例结合了前面示例中的元素来演示复杂运动。

图 16.结合各种效果来制作复杂的运动。

复杂运动 (3/3)

此示例结合了前面示例中的元素来演示复杂运动。

图 17.结合各种效果来制作复杂的运动。

Fragment 转换 (1/2)

以下示例展示了如何使用 MotionLayout 在 fragment 之间转换。

图 18.fragment 转换。

Fragment 转换 (2/2)

以下示例展示了如何使用 MotionLayout 在 fragment 之间转换。

图 19.fragment 转换。

类似 YouTube 的运动

此示例演示了如何在精简视图与含更多内容的全屏体验之间转换。

图 20.Fragment 转换与 YouTube 类似。

KeyTrigger

此示例演示了如何在过渡超出进度阈值时显示和隐藏悬浮操作按钮。

图 21.显示和隐藏悬浮操作按钮。

多状态

此示例显示了如何使用状态来确定要应用哪个运动。

图 22.基于状态的不同动作。