EffectCraft 导出 Lottie 到 Web 全流程

Lottie 是 Web 端矢量动画的事实标准——After Effects 靠 Bodymovin 插件导出，而 EffectCraft 原生支持 Lottie 导入导出，不需要任何插件。这篇教程走一遍「EffectCraft 动画 → Lottie JSON → 网页播放」的完整链路，并整理体积与兼容性的坑。

基于 EffectCraft v0.4.0。

什么动画适合导出 Lottie

Lottie 的本质是矢量描述（路径、变换、遮罩的组合），适合：

• Loading 圈圈、按钮微交互、空状态插图
• 图标入场/循环动画、节日动效
• 任何「形状 + 变换」构成的扁平动画

不适合：含粒子、发光、3D 灯光阴影、位图纹理的复合特效——这些要么被烘焙成位图（体积暴涨），要么导出时被丢弃。

制作阶段的注意事项

导出顺利是从制作阶段开始的：

1. 尽量用形状图层：Lottie 对形状（贝塞尔路径、矩形、椭圆、多边形+合并路径）的翻译最完整
2. 文字图层要谨慎：Web 播放端需要加载相同字体，否则显示回退字体。要么把文字转成形状（Create Outlines），要么接受非预期字体渲染
3. 特效白名单：模糊、投影在部分运行时支持较好，但强烈建议导出后逐个特性真机预览，白名单随版本变动
4. 画板尺寸统一：合成尺寸就是 Web 端容器的显示比例，提前定稿

想验证表达式动画（如 wiggle）能否导出？目前 Lottie 运行时只支持一小部分表达式语义，EffectCraft 导出器会把支持的表达式编译进 JSON，不支持的部分会在导出面板明确警告——看到警告就改成关键帧或烘焙。

导出 Lottie JSON

1. File → Export → Lottie（或合成面板的导出 Lottie 选项）
2. 常用导出设置：

选项	建议	说明
Precision（坐标精度）	2~3 位小数	越多位体积越大，2 位通常看不出差别
帧率	30或 60	与合成一致即可
烘焙表达式	默认开启	把表达式展开成关键帧数据
压缩	开启	去掉注释与冗余字段

3. 导出得到 .json 文件（这就是 Lottie 动画本体）

在网页中播放

安装 lottie-web

npm install lottie-web

最小可用示例

<div id="hero-animation" style="width: 320px; height: 320px"></div>

<script type="module">
  import lottie from "lottie-web";
  import animationData from "./my-animation.json";

  const anim = lottie.loadAnimation({
    container: document.getElementById("hero-animation"),
    renderer: "svg", // svg 矢量清晰；canvas 性能好；html 适合含 DOM 交互
    loop: true,
    autoplay: true,
    animationData,
  });

  // 常用 API
  // anim.play(); anim.pause(); anim.stop();
  // anim.goToAndStop(48, true);         // 停在第 48 帧
  // anim.addEventListener("complete", () => console.log("播放结束"));
</script>

React 项目示例

import { useEffect, useRef } from "react";
import lottie from "lottie-web";
import animationData from "./my-animation.json";

export function HeroAnimation() {
  const ref = useRef(null);

  useEffect(() => {
    const anim = lottie.loadAnimation({
      container: ref.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData,
    });
    return () => anim.destroy();
  }, []);

  return <div ref={ref} style={{ width: 320, height: 320 }} />;
}

体积与性能清单

• 超过 200KB 的 Lottie 先自查：重复帧冗余、过密路径点、没开精度压缩，三者占大头
• 形状路径的锚点数越少越好：简化曲线是体积优化的头号手段
• Web 端按需加载：Lottie JSON 是纯文本，配合路由懒加载收益明显
• 页面里同时播放的 Lottie 实例控制在个位数，移动端尤甚

兼容性踩坑速查

症状	原因	处理
字体变成了衬线体	Web 端缺字体	文字转形状，或 Web 加载同款字体
表达式动画丢失	运行时不支持该表达式	按导出警告改关键帧
模糊/阴影效果不一致	渲染器差异	改用预合成位图，或接受差异
播放一卡一卡	帧率与容器尺寸不符	统一帧率，避免非整数缩放
Safari 上完全空白	JSON 含不支持的特性	用 lottie-web 最新版，逐步删特性定位

小结

• 形状图层是 Lottie 的最优公民，文字与特效要过白名单
• EffectCraft 原生导入导出 Lottie，不需要插件
• 网页端 lottie-web 三行代码接入，注意 destroy 清理
• 体积三招：压精度、简路径、烘焙后精简