使用 Adobe After Effects 做前端网页的 SVG 动画

  • 安装 AE & Bodymovin
  • 创建 hello world 动画
  • 使用 bodymovin 导出
  • hello world demo

安装 AE & Bodymovin

  • AE：进入 AE 官网 免费试用即可

  • bodymovin：进入adobe 插件官网即可 bodymovin ，这是一款 airbnb 推出的 svg 动画导出工具

    由于国内的 creative cloud 同步有点问题，需要使用离线安装方式，能用同步当然是最好

    • 点击使用其他方式安装

    • 下载 xzp 包和 xzp installer，并安装插件

      ​

创建 hello world 动画

打开 AE 并新建 composition

  1. 新建文本
  2. 输入文本
  3. 即可看到新图层

  1. 点击秒表图标激活关键帧
  2. 在右侧时间轴上即可看到关键帧

  1. 拖动时间轴至任意时间
  2. 拖动鼠标改变文本位置，会在时间轴上插入新的关键帧
  3. 拖动鼠标改变文本大小
  4. 可以看到场景中文本的新状态

  1. 拖动时间区间至合适的位置
  2. 按空格即可预览动画

使用 bodymovin 导出

在 window -> extensions -> bodymovin 中打开 boymovin 插件

在 Preferences -> General 中设置 allow scripts to write files and asscess network

  1. 选择 comp

  2. 导出设置中把 demo 勾选上，为了能导出 html 文件，用游览器直接打开看到效果，不勾选的仅会导出 data.json

    2.1 勾选 demo

    2.2 保存

  3. 选择输出路径

  4. 点击 render 即可完成导出

最后的 Hello World Demo

References