使用 Lottie 动画

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

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

建议的阅读

• 工作区基础知识
• 在 XD 中使用 Lottie 文件 - 当前限制

导入 Lottie 文件

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

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

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

设置播放选项

播放选项及其关联的交互

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

自动播放

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

点击播放

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

不播放

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

自定义 Lottie 播放

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

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

原型制作示例

现在您已了解如何为 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 的一些专业技巧。

当前限制

相关资源

• 创建交互式原型
• 使用视频
• 使用视频创建原型

有疑问或想法？