SuperAPI AI 工具集

animejs

设计与创作

查看项目

更新于 10-15 17:33

技能介绍

用途:在 FrameVideo 合成中使用 Anime.js 编写轻量动画与时间线。适合体积敏感(Anime.js 约 17KB,GSAP 约 45KB)、简单 DOM/SVG 动效(入场、变换、透明度)、紧凑语法,以及移植用户提供的 Anime.js 示例。复杂时间线编排、3D/WebGL、纯 CSS 装饰或 GPU 着色器场景不建议使用,默认仍以 GSAP 为主。

主要能力与用法:在合成初始化时同步创建动画或时间线,必须设置 autoplay: false,并将返回实例推入 window.__fvAnime 数组注册。适配器会对每个注册实例调用 instance.seek(timeMs) 进行定位。使用有限时长与有限循环次数。模块构建只需实例暴露 seek()、pause(),最好还有 play()。

限制:不要依赖 anime.running 自动发现,需显式 push;避免无限循环,应按合成时长计算有限重复次数;不要在定时器、Promise、事件处理器或异步资源加载后创建动画;避免基于真实时间、网络状态或无种子随机数修改 DOM 的回调。

验证:编辑后运行 npx framevideo lint、npx framevideo validate,并用 npx framevideo preview 拖动时间线确认可定位性;手动检查注册、autoplay 关闭、循环有限。适配器源码位于 packages/core/src/runtime/adapters/animejs.ts,Anime.js 文档见 https://animejs.com/documentation/。