我构建了一个 20KB 的 Motion Engine，因为 Svgator、Rive 和 Lottie 对 DOM 来说太重了

Source: Dev.to

问题：网页动画的“黑盒”

我们都有过这种经历。想要高保真动画，就去使用 Lottie 或 Rive。它们看起来很炫，但也有代价：

• 体积：Rive 的运行时起始大小超过 280 KB。即使是 SVGator 也在 38 KB 左右。
• SEO 空白：基于 Canvas 的动画是“黑盒”。搜索引擎看不到内部内容。
• 可访问性：屏幕阅读器常常难以处理非 DOM 元素。

作为一名对性能执着的高级开发者，我问自己：我们能在不牺牲 DOM 的前提下实现高端动效吗？

解决方案：Fluv——语义化运动引擎

过去几个月，我构建了 Fluv。它不仅是另一个库，而是一个语义化运动引擎，旨在把动画视作原生网页公民。

关键成就：20 KB 模块化运行时

• 专有的模块化架构将运行时保持在约 20 KB。
• 按需加载：仅加载特定动画所需的功能（缓动函数、错位等）。
• 与最接近的竞争对手相比，轻 10 KB–20 KB。

为什么叫“语义化”？

• SEO 原生：动画直接在 DOM 中操作 SVG 路径，使每个元素都可被爬虫抓取。
• 可样式化：可以像操作其他 DOM 元素一样，通过 CSS 或 JavaScript 与动画交互。
• 轻量：不需要沉重的引擎来“渲染”帧；浏览器自行完成最擅长的工作。

技术深潜

我重新设计了路径数据的解析与插值方式。Fluv 不再使用庞大的 JSON 文件，而是采用压缩的逻辑，优先使用数学曲线而非原始帧数据。

支持内容

• 扩展的动画类型（路径变形、变换）。
• 组元素的复杂错位。
• 用于有机运动的自定义缓动函数。

代码仓库

源码已在 GitHub 上公开。

讨论

我很好奇：在你的专业项目中，动画运行时的“预算”是多少？对于一个着陆页来说，280 KB 会不会太多？欢迎在评论区讨论！