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。

片段过渡 (1/2)

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

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

片段过渡 (2/2)

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

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

类似 YouTube 的运动

此示例演示了在紧凑视图和带附加内容的全屏体验之间进行过渡。

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

KeyTrigger

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

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

多状态

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

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