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 文件。