作为 Webflow 中有关 After Effects 和 Lottie 的系列文章的一部分，我们在 After Effects 中制作了一个 Lottie 动画。在本指南中，我们将配置 Lottie 资源以在可见时进行动画处理。
我们将分四个阶段实现这一目标：
- 整合 Lottie 资产
- 建立滚动触发器
- 设置动画
1. 整合Lottie资产
您必须从 After Effects 导出 Lottie 动画并将其上传到您的 Webflow 项目。我们使用 Bodymovin 导出动画。请参阅我们完整指南的第 3 步和第 4 步了解如何完成此操作。
对于此作业，你需要准备 3 个部分——请参阅我们的部分指南或 克隆项目.
要定位并添加动画，请从左侧栏的“资产”面板中选择图像图标，然后将动画放到中央部分。
太棒了！现在，让我们建立触发器。
2. 设置基于滚动的触发器
在添加触发器之前，我们需要确保选择了动画（而不是其他元素）。我们希望在滚动时发生此动画。从右侧边栏的“交互”面板中，打开“元素触发器”菜单并选择“在视图中滚动时”。
留在“交互”面板内来配置我们最终步骤中的动画。
3.设置动画
让我们通过动画来让这个动画变得生动起来。 滚动时， 挑选 播放滚动动画 从操作菜单中。在滚动动画旁边，点击加号并从下拉菜单中选择 Lottie 以包含我们的初始操作。
在 Scroll Actions 时间轴中选择 100% 处的动画，然后在下方的 Lottie 下将其调整为 100%。
现在，动画将从 0% 开始，并在滚动出视图时到达 100%。
您可以启用实时预览模式或在预览中评估您的工作，以观察滚动时的动画进程。
Ewan Mak 的最新帖子 (查看全部)
- 包括或删除工作区位置和成员 - 2024 年 4 月 15 日
- 定心盒摘要 - 2024 年 4 月 15 日
- 存储网站以供将来参考 - 2024 年 4 月 15 日
EN 
ZH 
ZH_CN 
KO 
JA