Webflow 中的 After Effects 和 Lottie 总结

要继续，只需按 Command + A （在 macOS 上）或 Control + A （在 Windows 上）突出显示所有内容。随后，您可以单击图层旁边的下拉箭头以折叠所有实体。此过程有助于我们在此图中安排路径。

对于星形元素，无需从头开始，而是考虑采用已配置的重复轨道之一（例如，轨道 7）作为蓝图。

制定星型：

1. 突出显示最近复制的图层（例如，轨道 7）
2. 轻敲 命令 + C （在 macOS 上）或 Control + C （在 Windows 上）
3. 与..一起处理 命令 + V （在 macOS 上）或 Control + V （在 Windows 上）
4. 展开复制图层的下拉菜单
5. 在复制的椭圆图层中展开椭圆路径的下拉菜单
6. 减少 尺寸 至 40
7. 单击标签（例如，轨道 8）并按回车键
8. 然后指定一个名称（例如 Star）

您应该保持相同的描边颜色，同时稍微改变填充。

选择不透明度为 100% 的白色。

您的星球设计应该遵循类似的模式，尽管略有不同。

制定一个行星：

1. 复制并插入 星型层r 
2. 复制复制的图层（例如，星球） 
3. 在 内容 > 椭圆路径 复制图层：调整大小（例如从 40 到 15） 
4. 在 内容 > 椭圆路径 复制图层：操纵第一个位置输入（x 轴），直到 行星 与第一条轨道的行程对齐

以第一颗行星为指导，生成另外 6 颗行星。

生成更多行星：

1. 复制最近复制的行星。 
2. 在里面 内容 复制图层：调整第一个位置输入（x 轴），直到 行星 与后续轨道对齐

提醒：选择改变重复椭圆的尺寸差异，以获得更自然的外观，而不是将每个椭圆缩小 100。

在正确放置之后，继续调整行星自转。

调整行星自转：

1. 单击 行星 访问设置的层
2. 在“变换”下拉菜单中，单击秒表图标 回转 建立第一个关键帧（确保在第 0 帧处对齐）

1. 将时间轴滑到末尾
2. 随后，启动旁边的秒表 回转 对于最后的关键帧（确保在时间轴末尾对齐）
3. 最后，修改旋转值。第一个输入指定旋转次数，而第二个输入设置旋转的度数。（例如 1×70.0° 等于 1 次完整旋转） 和 70度）

笔记：自定义初始和最终旋转值以与您的动画方案保持一致。

要同步其他 6 颗行星的旋转动画，请重复上述步骤。添加所有行星的关键帧和旋转后，使用第一帧的空格键预览动画序列。

出口

您的动画已制作完成；现在您可以将其导出了。

要导出，请利用 Bodymovin 插件（请参阅如何安装 Bodymovin 扩展）将 After Effects 合成转换为合并的 JSON 文件。如果已预安装 Bodymovin 扩展，请在 After Effects 菜单下找到它 窗户，浏览 扩展，并选择 身体移动.

要开始导出过程，请确保已选择您的作品，指定导出文件夹，然后点击 使成为.

将动画融入 Webflow

现在是时候导入您导出的文件了。

将您的 After Effects 动画集成到 Webflow 中：

1. 访问您的 Webflow 承诺 设计师
2. 按 资产 符号，或点击控制台上的 J，以显示 资产控制板
3. 点击 上传按钮 并选择您的 After Effects 动画，或者将您的 After Effects JSON 文件放入 资产控制板
4. 将动画放入项目画布中

如果您通过点击“切换预览”符号（眼睛符号）来预览您的项目，您将看到动画开始自动播放。之后，您可以设置点击触发器，以便在被点击时启动动画。

配置交互触发器

这是主要部分。我们将配置一个点击触发器。扩展您对触发器和动画的理解。

要配置触发器：

互动 符号，或者按下控制台上的 H 键，以显示 互动 控制板

鼠标单击（点击） 选择

第一次点击 下拉菜单：选择 Lottie播放 选择