本文档包含有关如何使用 MotionLayout 的示例。每个示例都包含一段演示运动的视频，以及运动场景和布局的相应代码。
基本运动
此示例包含一个视图，您可以轻触并拖动该视图来水平移动。
- 查看布局 XML。
- 查看
MotionSceneXML。
自定义属性 - backgroundColor
此示例与基本运动示例类似。除了基本运动之外，视图的背景颜色也会随着视图的移动而变化。
- 查看布局 XML。
- 查看
MotionSceneXML。
ImageFilterView - 图片转换
以下示例展示了如何转换 ImageFilterView 的饱和度值。
- 查看布局 XML。
- 查看
MotionSceneXML。
关键帧位置
此示例使用 <KeyFrameSet> 在运动过程中更改视图的 Y 轴位置。
- 查看布局 XML。
- 查看
MotionSceneXML。
关键帧插值
此示例基于关键帧位置示例，向视图过渡添加了旋转和缩放功能。
- 查看布局 XML。
- 查看
MotionSceneXML。
关键帧周期
此示例添加了 <KeyCycle> 元素，以便在视图中添加波状运动。
- 查看布局 XML。
- 查看
MotionSceneXML。
CoordinatorLayout (1/2)
此示例将 MotionLayout 添加到了现有的 AppBarLayout，以向应用栏添加运动。此示例在 MotionLayout 简介（第 III 部分）中进行了进一步介绍。
- 查看布局 XML。
- 查看
MotionSceneXML。
CoordinatorLayout (2/2)
此示例将 MotionLayout 添加到了现有的 AppBarLayout，以向应用栏添加运动。
- 查看布局 XML。
- 查看
MotionSceneXML。
DrawerLayout (1/2)
此示例显示了如何将运动添加到 DrawerLayout 中。如需了解此示例，请参阅 MotionLayout 简介（第 III 部分）。
- 查看布局 XML。
- 查看
MotionSceneXML。
DrawerLayout (2/2)
此示例显示了如何将运动添加到 DrawerLayout 中。
侧边栏
以下示例展示了如何在将主要内容区域向右拖动时显示侧边栏。
- 查看布局 XML。
- 查看
MotionSceneXML。
视差
此示例演示了视差背景，其中不同的背景图层以不同的速度移动。
- 查看布局 XML。
- 查看
MotionSceneXML。
ViewPager
此示例展示了如何在 ViewPager 标签页之间滑动时添加运动。此示例在 MotionLayout 简介（第 III 部分）中进行了进一步介绍。
- 查看布局 XML。
- 查看
MotionSceneXML。
ViewPager - Lottie
此示例显示了如何在 ViewPager 标签之间滑动时添加运动。
- 查看布局 XML。
- 查看
MotionSceneXML。
复杂运动 (1/3)
此示例结合了前面示例中的元素来演示复杂运动。
- 查看布局 XML。
- 查看
MotionSceneXML。
复杂运动 (2/3)
此示例结合了前面示例中的元素来演示复杂运动。
- 查看布局 XML。
- 查看
MotionSceneXML。
复杂运动 (3/3)
此示例结合了前面示例中的元素来演示复杂运动。
- 查看布局 XML。
- 查看
MotionSceneXML。
Fragment 转换 (1/2)
以下示例展示了如何使用 MotionLayout 在 fragment 之间转换。
- 查看布局 XML。
- 查看
MotionSceneXML。
Fragment 转换 (2/2)
以下示例展示了如何使用 MotionLayout 在 fragment 之间转换。
- 查看布局 XML。
- 查看
MotionSceneXML。
类似 YouTube 的运动
此示例演示了如何在精简视图与含更多内容的全屏体验之间转换。
- 查看布局 XML。
- 查看
MotionSceneXML。
KeyTrigger
此示例演示了如何在过渡超出进度阈值时显示和隐藏悬浮操作按钮。
- 查看布局 XML。
- 查看
MotionSceneXML。
多状态
此示例显示了如何使用状态来确定要应用哪个运动。
- 查看布局 XML。
- 查看
MotionSceneXML。