本文档包含如何使用 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。 - 查看菜单的
MotionSceneXML。
侧边栏
此示例显示了如何在将主内容区域拖动到右侧时显示侧边栏。
- 查看布局 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。