MotionLayout 示例

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

基本运动

此示例包含一个您可以触摸并拖动以水平移动的视图。

• 查看布局 XML。
• 查看MotionScene XML。

自定义属性 - backgroundColor

此示例类似于基本运动示例。除了基本运动外，视图的背景颜色会随着视图的移动而改变。

• 查看布局 XML。
• 查看MotionScene XML。

ImageFilterView - 图像过渡

此示例演示如何转换 ImageFilterView 的饱和度值。

• 查看布局 XML。
• 查看MotionScene XML。

关键帧位置

此示例使用 <KeyFrameSet> 在运动期间更改视图的 Y 位置。

• 查看布局 XML。
• 查看MotionScene XML。

关键帧插值

此示例以关键帧位置示例为基础，向视图过渡添加了旋转和缩放。

• 查看布局 XML。
• 查看MotionScene XML。

关键帧周期

此示例添加了 <KeyCycle> 元素，以向视图添加波浪状运动。

• 查看布局 XML。
• 查看MotionScene XML。

CoordinatorLayout (1/2)

此示例将 MotionLayout 添加到现有 AppBarLayout 以向应用栏添加运动。此示例在MotionLayout 简介（第三部分）中进一步描述。

• 查看布局 XML。
• 查看MotionScene XML。

CoordinatorLayout (2/2)

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

• 查看布局 XML。
• 查看主要内容的 MotionScene XML。

DrawerLayout (1/2)

此示例演示如何向 DrawerLayout 添加运动。此示例在MotionLayout 简介（第三部分）中进一步描述。

• 查看布局 XML。
• 查看MotionScene XML。

DrawerLayout (2/2)

此示例演示如何向 DrawerLayout 添加运动。

• 查看布局 XML。
• 查看主要内容的 MotionScene XML。
• 查看菜单的 MotionScene XML。

侧面板

此示例演示如何在将主要内容区域向右拖动时显示侧面板。

• 查看布局 XML。
• 查看MotionScene XML。

视差滚动

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

• 查看布局 XML。
• 查看MotionScene XML。

ViewPager

此示例演示如何在 ViewPager 标签页之间滑动时添加运动。此示例在MotionLayout 简介（第三部分）中进一步描述。

• 查看布局 XML。
• 查看MotionScene XML。

ViewPager - Lottie

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

• 查看布局 XML。
• 查看MotionScene XML。

复杂运动 (1/3)

此示例结合了先前示例中的元素，以演示复杂运动。

• 查看布局 XML。
• 查看MotionScene XML。

复杂运动 (2/3)

此示例结合了先前示例中的元素，以演示复杂运动。

• 查看布局 XML。
• 查看MotionScene XML。

复杂运动 (3/3)

此示例结合了先前示例中的元素，以演示复杂运动。

• 查看布局 XML。
• 查看MotionScene XML。

Fragment 过渡 (1/2)

此示例演示如何使用 MotionLayout 在 Fragment 之间进行过渡。

• 查看布局 XML。
• 查看MotionScene XML。

Fragment 过渡 (2/2)

此示例演示如何使用 MotionLayout 在 Fragment 之间进行过渡。

• 查看布局 XML。
• 查看MotionScene XML。

类似 YouTube 的运动

此示例演示紧凑视图与全屏体验之间带有附加内容的过渡。

• 查看布局 XML。
• 查看MotionScene XML。

KeyTrigger

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

• 查看布局 XML。
• 查看MotionScene XML。

多状态

此示例演示如何使用状态来确定要应用的运动。

• 查看布局 XML。
• 查看MotionScene XML。