有问题要问或要分享想法？ 欢迎加入 Adobe XD 社区。 我们很乐意倾听您的心声并欣赏您的创意作品！
上次更新日期：
2025年2月28日
注释
从 2023 年 7 月开始，Adobe XD 插件的 Lottie 文件已停用。
了解如何在 Adobe XD 中导入和使用 Lottie 来设计丰富多彩的动画。
Lottie 是一种可从 Adobe After Effects 导出为 JSON 文件的轻型动画格式。 与动画 GIF 和 PNG 等格式相比，Lottie 文件更小。 开发人员可以在其代码中重用 Lottie 文件。
通过 XD 可导入 Lottie 文件并控制 Lottie 播放。 设置 Lottie 播放并连接您的原型后，您可以在共享它前进行预览。
建议的阅读
导入 Lottie 文件
要将 Lottie 文件导入到 XD 中，请将它拖至画板。 或者，选择文件 > 导入。
一旦导入，即在画布上显示该 Lottie 的第一帧。 如果 Lottie 的第一帧是空白的，则画布上会显示一个空白帧。 在此类情况下，请使用“图层”面板来查找 Lottie。
在“设计”模式中选择 Lottie 时，其左上角会显示一个播放图标 。
播放选项及其关联的交互
在“设计”模式中设置 Lottie 的播放选项时，将自动在“原型”模式中设置关联的交互。
当选择自动播放时，时间触发器会自动设置为 0 秒延迟。
在选择点击播放时，将自动设置点击触发器，其默认操作为切换播放/暂停。
当选择不播放时，将不会在“原型”模式中设置任何交互。
自定义 Lottie 播放
要自定义 Lottie 播放，请在“属性检查器”的动画部分中选择编辑播放。
当选择“编辑播放”时，将自动切换到“原型”模式。
在“原型”模式下，可选择以下这些自定义的任何一个：
选择下列触发器之一：时间（将延迟设置为大于 0 秒）、按键和游戏手柄或语音。
将点击触发器的 Lottie 播放操作从切换播放/暂停改为播放或暂停。
将 Lottie 播放与其他交互结合使用
原型制作示例
现在您已了解如何为 Lottie 设置播放选项并将它与其他交互连接，下面我们尝试一些示例。
了解如何使用 Lottie 为加载屏幕制作动画。
Ex 1-artboard 1
- 在“设计”模式中，导入 plant-loading.json 并将它放置在画板上。 将视频设置为“自动播放”。
- 在“原型”模式中，将 Lottie 连接到 Ex 1-artboard 2，同时将它设置为“播放结束”触发器，并将“操作类型”设置为“过渡”。
在连接完交互后，预览原型并检查交互。
了解如何在选择菜单项时为其制作动画。
Ex 2-artboard 1
- 在“设计”模式中，导入植物 1（绿薄荷）和植物 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 文件。
相关资源
有疑问或想法？
