用户指南 取消(C)

使用 Lottie 动画

了解如何在 Adobe XD 中导入和使用 Lottie 来设计丰富多彩的动画。

Lottie 是一种可从 Adobe After Effects 导出为 JSON 文件的轻型动画格式。与动画 GIF 和 PNG 等格式相比,Lottie 文件更小。开发人员可以在其代码中重用 Lottie 文件。

导入 Lottie 并设置播放选项
导入 Lottie 并设置播放选项

通过 XD 可导入 Lottie 文件并控制 Lottie 播放。设置 Lottie 播放并连接您的原型后,您可以在共享它前进行预览。

建议的阅读

导入 Lottie 文件

要将 Lottie 文件导入到 XD 中,请将它拖至画板。或者,选择文件 > 导入

一旦导入,即在画布上显示该 Lottie 的第一帧。如果 Lottie 的第一帧是空白的,则画布上会显示一个空白帧。在此类情况下,请使用“图层”面板来查找 Lottie。 

在“设计”模式中选择 Lottie 时,其左上角会显示一个播放图标

设置播放选项

设置 Lottie 的播放选项
设置 Lottie 的播放选项

将 Lottie 文件导入到 XD 中后,可控制它将在何时播放。执行以下步骤可设置播放选项:

  1. 在“设计”模式中,在画布上选择该 Lottie 资源。
  2. 在“属性检查器”的动画部分中,选择一个预设:
  3. 如果要让 Lottie 循环播放,请单击“循环播放”按钮

播放选项及其关联的交互

在“设计”模式中设置 Lottie 的播放选项时,将自动在“原型”模式中设置关联的交互。

自动播放

当选择自动播放时,时间触发器会自动设置为 0 秒延迟。

自动播放 - 设计模式

自动播放 - 原型模式

点击播放

在选择点击播放时,将自动设置点击触发器,其默认操作为切换播放/暂停

点击播放 - 设计模式

点击播放 - 原型模式

不播放

当选择不播放时,将不会在“原型”模式中设置任何交互。

自定义 Lottie 播放

选择“编辑播放”以自定义播放
选择“编辑播放”以自定义播放

要自定义 Lottie 播放,请在“属性检查器”的动画部分中选择编辑播放

当选择“编辑播放”时,将自动切换到“原型”模式。

在“原型”模式下,可选择以下这些自定义的任何一个:

选择下列触发器之一:时间(将延迟设置为大于 0 秒)、按键和游戏手柄语音

通过选择“时间”触发器并将“延迟”设置为大于 0 秒而自定义播放
选择“时间”触发器并将“延迟”设置为大于 0 秒

点击触发器的 Lottie 播放操作从切换播放/暂停改为播放暂停

通过选择“点击”触发器并以“播放”或“暂停”作为其操作而自定义播放
选择“点击”触发器并以“播放”或“暂停”作为其操作

将 Lottie 播放与其他交互结合使用

带过渡到画板的“播放结束”触发器的 Lottie
带过渡到画板的“播放结束”触发器的 Lottie

在为 Lottie 设置播放选项后,探索如何将它与其他交互连接:

  • 为 Lottie 设置“播放结束”交互以在视频播放后触发操作。
  • 自动同时播放多个 Lottie 动画(最多 20 个)。
  • 同时播放多个 Lottie 动画与一段视频

要详细了解如何在 XD 中制作原型,请参阅创建交互式原型

原型制作示例

现在您已了解如何为 Lottie 设置播放选项并将它与其他交互连接,下面我们尝试一些示例。

下载示例文件

示例 1:为加载屏幕制作动画

了解如何使用 Lottie 为加载屏幕制作动画。

Ex 1-artboard 1

  1. 在“设计”模式中,导入 plant-loading.json 并将它放置在画板上。将视频设置为“自动播放”。
  2. 在“原型”模式中,将 Lottie 连接到 Ex 1-artboard 2,同时将它设置为“播放结束”触发器,并将“操作类型”设置为“过渡”。

在连接完交互后,预览原型并检查交互。

示例 2:为菜单选择制作动画

了解如何在选择菜单项时为其制作动画。

Ex 2-artboard 1

  1. 在“设计”模式中,导入植物 1(绿薄荷)和植物 2(虎尾兰)文件,然后将它们放置在各自的容器中。将视频设置为“不播放”。
  2. 在“原型”模式中:
  • 将植物 1 及其容器连接到 Ex 2-artboard 2。
  • 将植物 2 及其容器连接到 Ex 2-artboard 3。

将它们全部设置为“点击”触发器,并将“操作类型”设置为“过渡”。

Ex 2-artboard 2

在“设计”模式中,创建植物 1 的副本并将它放置在画板上。将视频设置为“自动播放”。

Ex 2-artboard 3

在“设计”模式中,创建植物 2 的副本并将它放置在画板上。将视频设置为“自动播放”。

在连接完交互后,预览原型并检查交互。

更多示例

探索与视频、Lottie 动画和组件状态相关的更多示例。

预览原型和共享

在应用程序内以及在移动设备或浏览器上预览原型
在应用程序内以及在移动设备或浏览器上预览原型

当准备好与利益相关者共享设计时,请设置适当的访问权限,发布原型或设计规范链接,然后共享它。

了解详情

观看这段为时 2 分钟的视频,了解有关在 XD 中使用 Lottie 的一些专业技巧。

当前限制

  • 您只能将小于 15 MB 的 Lottie 文件导入 XD 中。单个 XD 文档中可包含的 Lottie 文件的数量不受限制。
  • 如果视频设置为自动播放,则 Lottie 将不会自动播放。
  • 如果启动了其他原型制作触发器,则 Lottie 将停止。
  • 如果 Lottie 动画使用某种桌面字体,则该字体将不会在 Web 播放中显示。
  • 无法在重复网格中覆盖 Lottie。
  • 无法导入引用外部资源(例如图像)的 Lottie 动画。
  • 无法导入不是 Lottie JSON 的 JSON 文件。

相关资源

有疑问或想法?

咨询社区

有问题要问或要分享想法?欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品!

更快、更轻松地获得帮助

新用户?