在本教程中:
- 在 After Effects 中建立布局
- 创建轨道动画
- 导出项目
- 将动画集成到Webflow中
- 配置交互触发器
在 After Effects 中建立布局
![64b94849bdd37d12dce59ddc_6079ddb3f48b3452ea885bb9_lottie-概述_1 在 After Effects 设置合成部分中突出显示新的合成按钮。](https://webflow-s3.tenten.co/2024/04/64b94849bdd37d12dce59ddc_6079ddb3f48b3452ea885bb9_lottie-overview_1.png)
在 After Effects 中设置布局时,请记住这是初始阶段,但以后可以随时进行修改。您可以灵活地调整尺寸、时间或帧速率。例如,让我们以每秒 60 帧的速度形成一个 1000px 宽、1000px 高布局来进行演示。
在 After Effects 中建立布局:
- 启动 After Effects
- 选择 新构图
- 输入 1000px 宽度
- 输入 1000px 高度
- 输入 60 帧速率
- 输入 5 秒 期间
- 设置 背景颜色 变白
![64b94849bdd37d12dce59dd6_5f2bc71de9599665b32407be_hqch1l0qfvq4qf14d1onjsmtfff45pborxmc6sfhtm1yzssfd6bpkjftgkwakurkuddeibml1uhusb2za99dom0jpqf7vqfuxiv0qnauxmgzpzszk0wu-o8skbcs6xgc3fbqsveh 合成设置对话框](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94849bdd37d12dce59dd6_5f2bc71de9599665b32407be_hqch1l0qfvq4qf14d1onjsmtfff45pborxmc6sfhtm1yzssfd6bpkjftgkwakurkuddeibml1uhusb2za99dom0jpqf7vqfuxiv0qnauxmgzpzszk0wu-o8skbcs6xgc3fbqsveh.jpeg)
笔记:确保 防止纵横比为 1:1 (1.00) 未选择设计定制尺寸
开发轨道动画
下一步将深入有趣的领域。让我们从将新的形状层合并到布局中开始。
集成形状层:
- 在 图层面板
- 将鼠标悬停在 新的
- 选择 形状图层
![64b94849bdd37d12dce59dd3_5f2bc71cfe048420a3774725_ohcqajeleefu9h9t_gy1kwlqhbtdsg_wril6vn-j7applxpm_qyczdohni-mldmulfqwj131_g-igdvsje424bmi36l0d1okbmr6-caevzsjb5nzefnx-xzoevtrfh69kbm_5mbn 形状图层内容设置。添加功能已突出显示。](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94849bdd37d12dce59dd3_5f2bc71cfe048420a3774725_ohcqajeleefu9h9t_gy1kwlqhbtdsg_wril6vn-j7applxpm_qyczdohni-mldmulfqwj131_g-igdvsje424bmi36l0d1okbmr6-caevzsjb5nzefnx-xzoevtrfh69kbm_5mbn.jpeg)
合并描边并放大椭圆的可见度:
- 点击 添加 在形状层上
- 选择 中风
- 将描边颜色改为灰色或与背景颜色不同的色调
- 调整描边宽度为1px
- 单击下拉箭头 椭圆路径
- 输入 900 尺寸
![64b94849bdd37d12dce59dbc_5f2bc71ddf0a25aae1a2245b_xkktj0ferxgsj4grlls40bcxvkf-8srustaticzrbtdkpr_xn02io7pva8hhfzhjf57zradsydpbnpved63ggp89vcpdf0v6setg6ec4zm899dorjm0br62yd23ckso_dr0miktz After Effects UI 仪表板已选择所有图层。](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94849bdd37d12dce59dbc_5f2bc71ddf0a25aae1a2245b_xkktj0ferxgsj4grlls40bcxvkf-8srustaticzrbtdkpr_xn02io7pva8hhfzhjf57zradsydpbnpved63ggp89vcpdf0v6setg6ec4zm899dorjm0br62yd23ckso_dr0miktz.jpeg)
要继续,只需按 Command + A (在 macOS 上)或 Control + A (在 Windows 上)突出显示所有内容。随后,您可以单击图层旁边的下拉箭头以折叠所有实体。此过程有助于我们在此图中安排路径。
对于星形元素,无需从头开始,而是考虑采用已配置的重复轨道之一(例如,轨道 7)作为蓝图。
制定星型:
- 突出显示最近复制的图层(例如,轨道 7)
- 轻敲 命令 + C (在 macOS 上)或 Control + C (在 Windows 上)
- 与..一起处理 命令 + V (在 macOS 上)或 Control + V (在 Windows 上)
- 展开复制图层的下拉菜单
- 在复制的椭圆图层中展开椭圆路径的下拉菜单
- 减少 尺寸 至 40
- 单击标签(例如,轨道 8)并按回车键
- 然后指定一个名称(例如 Star)
您应该保持相同的描边颜色,同时稍微改变填充。
选择不透明度为 100% 的白色。
![64b94849bdd37d12dce59dca_5f2bc71dc2ba8c62bdd98fd1_mu16x3gnr00tw-d3fb4e-zvs6ndvdzbrnei4q6wly84xs6jlqpdnopyzcwi3vrjslxel920jmjuaqxx3otj1enxxv4hri64sk5jzxdlgzl0hqk9pbeymhmcxkr8u1brllusxcwl8 颜色和不透明度特征层被突出显示。](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94849bdd37d12dce59dca_5f2bc71dc2ba8c62bdd98fd1_mu16x3gnr00tw-d3fb4e-zvs6ndvdzbrnei4q6wly84xs6jlqpdnopyzcwi3vrjslxel920jmjuaqxx3otj1enxxv4hri64sk5jzxdlgzl0hqk9pbeymhmcxkr8u1brllusxcwl8.jpeg)
您的星球设计应该遵循类似的模式,尽管略有不同。
制定一个行星:
- 复制并插入 星型层r
- 复制复制的图层(例如,星球)
- 在 内容 > 椭圆路径 复制图层:调整大小(例如从 40 到 15)
- 在 内容 > 椭圆路径 复制图层:操纵第一个位置输入(x 轴),直到 行星 与第一条轨道的行程对齐
以第一颗行星为指导,生成另外 6 颗行星。
生成更多行星:
- 复制最近复制的行星。
- 在里面 内容 复制图层:调整第一个位置输入(x 轴),直到 行星 与后续轨道对齐
提醒:选择改变重复椭圆的尺寸差异,以获得更自然的外观,而不是将每个椭圆缩小 100。
![64b94849bdd37d12dce59dd0_5f2bc71d01d6bbcf3e2e67f2__w4e1aglvi7kf-kwikl3sbvu1ifel1bygp3a1m0rqyva4dqv-irb5gz0etjy5g5vp_w8vmc1dqobt9x8szgjzgp9dnknozefqbg-bmlexmjohsyfaxm5oossvaz6vsmjepmvoith 拍摄的行星轨道中部静态照片。](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94849bdd37d12dce59dd0_5f2bc71d01d6bbcf3e2e67f2__w4e1aglvi7kf-kwikl3sbvu1ifel1bygp3a1m0rqyva4dqv-irb5gz0etjy5g5vp_w8vmc1dqobt9x8szgjzgp9dnknozefqbg-bmlexmjohsyfaxm5oossvaz6vsmjepmvoith.jpeg)
在正确放置之后,继续调整行星自转。
调整行星自转:
- 单击 行星 访问设置的层
- 在“变换”下拉菜单中,单击秒表图标 回转 建立第一个关键帧(确保在第 0 帧处对齐)
![64b94849bdd37d12dce59dc3_5f2bc71dd34233ac5a7cbd6a_qkjfkfnczhhrk3f_lqgvr8p0ikd-gqg0bvq8hsjkge2rp5vwdtfkcei14cgnipdbvacudmla-2-fvn0wpdshrpadmpi6s2ny2p9liqjborrgcgoimrmy-713lstnvras7asbxihc 旋转要素图层已高亮显示。时间轴上的第一个关键帧也已高亮显示。](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94849bdd37d12dce59dc3_5f2bc71dd34233ac5a7cbd6a_qkjfkfnczhhrk3f_lqgvr8p0ikd-gqg0bvq8hsjkge2rp5vwdtfkcei14cgnipdbvacudmla-2-fvn0wpdshrpadmpi6s2ny2p9liqjborrgcgoimrmy-713lstnvras7asbxihc.jpeg)
- 将时间轴滑到末尾
- 随后,启动旁边的秒表 回转 对于最后的关键帧(确保在时间轴末尾对齐)
- 最后,修改旋转值。第一个输入指定旋转次数,而第二个输入设置旋转的度数。(例如 1×70.0° 等于 1 次完整旋转) 和 70度)
笔记:自定义初始和最终旋转值以与您的动画方案保持一致。
要同步其他 6 颗行星的旋转动画,请重复上述步骤。添加所有行星的关键帧和旋转后,使用第一帧的空格键预览动画序列。
出口
您的动画已制作完成;现在您可以将其导出了。
要导出,请利用 Bodymovin 插件(请参阅如何安装 Bodymovin 扩展)将 After Effects 合成转换为合并的 JSON 文件。如果已预安装 Bodymovin 扩展,请在 After Effects 菜单下找到它 窗户,浏览 扩展,并选择 身体移动.
要开始导出过程,请确保已选择您的作品,指定导出文件夹,然后点击 使成为.
将动画融入 Webflow
现在是时候导入您导出的文件了。
将您的 After Effects 动画集成到 Webflow 中:
- 访问您的 Webflow 承诺 设计师
- 按 资产 符号,或点击控制台上的 J,以显示 资产控制板
- 点击 上传按钮 并选择您的 After Effects 动画,或者将您的 After Effects JSON 文件放入 资产控制板
- 将动画放入项目画布中
如果您通过点击“切换预览”符号(眼睛符号)来预览您的项目,您将看到动画开始自动播放。之后,您可以设置点击触发器,以便在被点击时启动动画。
配置交互触发器
这是主要部分。我们将配置一个点击触发器。扩展您对触发器和动画的理解。
要配置触发器:
![64b94849bdd37d12dce59df0_5f2bc71fc49f93af96f34e88_oxte4masbt4bikwwqn58tnmdk0knntclwoxhp1tba99ggjafy8xk6lfwy663vvr_ynclgcgfok3z7xmhx80bflzedppcyfh_1ndbcatpsd3mammewf9_brkheup68v7pde6t4cea](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94849bdd37d12dce59df0_5f2bc71fc49f93af96f34e88_oxte4masbt4bikwwqn58tnmdk0knntclwoxhp1tba99ggjafy8xk6lfwy663vvr_ynclgcgfok3z7xmhx80bflzedppcyfh_1ndbcatpsd3mammewf9_brkheup68v7pde6t4cea.jpeg)
![64b94849bdd37d12dce59dd9_5f2bc71e80c87063c9ad99e5_rarcjflxpopiiozqscskskygehjoz2f0eagrzilmauc1j8tobkupxjnbhip6cm5fvncq07chpjvee7lnj2ix7egileepwic30ukn2du_ai76emhvudybnpbau-jctjhtwffpp0m4 在选择选项菜单的下拉菜单中,lottie 播放操作被突出显示。](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94849bdd37d12dce59dd9_5f2bc71e80c87063c9ad99e5_rarcjflxpopiiozqscskskygehjoz2f0eagrzilmauc1j8tobkupxjnbhip6cm5fvncq07chpjvee7lnj2ix7egileepwic30ukn2du_ai76emhvudybnpbau-jctjhtwffpp0m4.jpeg)
- 包括或删除工作区位置和成员 - 2024 年 4 月 15 日
- 定心盒摘要 - 2024 年 4 月 15 日
- 存储网站以供将来参考 - 2024 年 4 月 15 日