插入 Lottie 动态图形

在您的网站设计中使用 Lottie 动画来增强互动并吸引用户。然后，使用 Lottie 元素配置和参与来管理动画的播放。

在本文中，您将发现：

1. 获取Lottie JSON和dotLottie动画文件的过程
2. 向您的网站添加动画
3. 修改动画设置
4. 通过交互控制动画的方法

获取 Lottie JSON 和 dotLottie 动画文件的方法

您可以将 Lottie 动画以 Lottie JSON 或 dotLottie 文件的形式上传到您的网站。 

有两种方法可以获取 Lottie JSON 文件：

• 使用 免费 After Effects bodymovin 插件
• 从以下位置检索 JSON 动画文件 Lottiefiles.com （或其他在线动画库）

获取 dotLottie 文件有 3 种方法：

• 使用以下方式将您现有的 Lottie JSON 文件转换为 dotLottie JSON 到 dotLottie 转换工具
• 直接从 After Effects 导出 dotLottie 文件，使用 LottieFiles 插件
• 从以下位置下载预建的 dotLottie 文件 LottieFiles.com.

其他参考

• 了解如何在 After Effects 中为 Lottie 制作动画
• 探索 Lottie 支持的 After Effects 功能
• 详细了解 Webflow 中的 After Effects 和 Lottie

将动画融入您的网站

您可以将 Lottie JSON 或 dotLottie 动画用作符号、缩略图、页面背景、页面加载器、自定义动画光标等。 

要将 Lottie JSON 和 dotLottie 文件附加到 Assets 面板：

1. 点击 ”资产”符号
2. 点击“云”上传符号
3. 从您的计算机中选择一个或多个文件

随后，您可以将动画集成到您的网站中。您可以直接将它们从“资源”面板拖放到画布上，也可以利用 洛蒂动画 组件。要使用 Lottie 动画组件：

1. 导航 添加面板 > 媒体 部分
2. 放下 洛蒂动画 将组件拖到 Webflow 画布上
3. 按 替换 Lottie 序列 在Lottie动画组件设置中
4. 从中选择您的 Lottie JSON 或 dotLottie 文件 资源面板

修改动画配置

Lottie 动画组件设置控制网站页面上的动画行为。要调整设置，请选择 洛蒂动画 组件并前往 元素设置面板 > Lottie动画设置。然后您可以调整动画的设置：

• 内置持续时间——动画运行的持续时间
• 循环——动画是否无限循环
• 反向播放 — 如果动画反向播放
• 渲染——SVG 或画布

重要提示： 默认情况下，所有动画都会在页面加载时执行。因此，访问页面的人不会看到折叠下方（页面需要滚动的部分）的动画，除非您将动画设置为循环或通过交互控制动画的播放。

通过交互调节动画

您可以通过交互来管理 Lottie 动画，以修改动画的运行方式和时间。交互使您能够定义触发器来启动动画、选择要播放的动画的特定片段以及确定停止动画播放的位置。 

Lottie 动画有两种交互方式：

1. 这 Lottie播放 动画片
2. 这 洛蒂 行动 

请记住，这些互动是 独自 适用于Lottie动画。

笔记： 如果您需要修改动画的持续时间/速度，您可以通过 Lottie动画设置 部分内 元素设置面板。请注意， Lottie动画设置 部分可能会被覆盖 Lottie播放 设置中的 交互面板.

重要提示： 默认情况下，所有动画都会在页面加载时播放。因此，除非您将动画配置为循环播放或通过交互控制动画的播放，否则访问者将看不到折叠下方（需要滚动的部分）的动画。

图 1：点击时启动动画

通过交互，你可以设置当用户点击时播放的动画：

1. 点击您的 洛蒂动画 画布上的组件
2. 访问 交互面板
3. 打 ”加”图标旁边 元素触发器
4. 选择“鼠标单击（点击）”
5. 选择“选择操作” 行动 在里面 第一次点击 部分
6. 选择“Lottie 播放” 集成

您还可以选择 延迟 播放 撤销 动画，或者将动画设置为 环形.

演示 2：在滚动进出视图时启动动画

您还可以选择在动画进入和退出屏幕可视区域时触发动画：

1. 选择你的 动画 设计画布上的插图
2. 导航至 交互面板
3. 点击“加”符号旁边 元素触发器
4. 选择“滚动到视图”
5. 选择旁边的操作 行动 在里面 当滚动到视图中时 category
6. 选择“动画” 集成
7. 选择旁边的操作 行动 在 当滚动出视图时 部分
8. 选择“动画重播” 集成
9. 激活 撤销 选项

使用自定义动画 抵消 或 延迟.

示例 3：在页面加载期间开始一段动画

利用 动画 动作交互，以精确控制动画的行为。定制开始和结束帧，实现缓动功能，并定义特定的持续时间。

调整动画的开始或结束帧：

1. 找到你的 动画 设计画布上的插图
2. 打开 交互面板
3. 选择“加”图标旁边 页面触发器
4. 选择“页面加载”
5. 选择与...相邻的操作 行动 在里面 当页面开始加载时 部分
6. 选择“启动动画” 自定义动画
7. 点击“加”符号旁边 定时动画
8. 为动画指定标题（例如“加载时启动动画”）
9. 选择“加“ 旁边 操作
10. 选择“动画” 集成
11. 调整动画帧下的 动画片 所需起始帧的部分
12. 勾选“设置为初始状态”选项 定时
13. 点击“加“ 旁边 操作
14. 选择“动画” 集成
15. 在中定义动画帧 动画片 在特定帧处暂停（例如，将其设置为 100% 以播放至结束帧）
16. 按 节省

根据需要调整动画的持续时间、延迟或缓和效果。

小建议： 要使用动画的默认持续时间，请选择 动画 设计画布上的插图，导航至 元素设置 > Lottie动画设置 并启用“使用内置持续时间”选项。