motion-authoring 是一个用于“动效编写”阶段的技能,仅在用户选择了转换项目并要求编写动效时运行。生成器会提供页面结构、inert 骨架挂载点以及 motion.manifest.json(含测量出的触发器、pageTriggers、初始隐藏提示);编写工作就是把这些挂载点变成真实动效,并对照参考站点验证构建。
用途与流程
- 先读参考而非只看统计:统计(census)说明什么在动、大致何时动,其选择器是结构性路径而非项目中的 id/class;应优先阅读站点自身的动效脚本,把统计作为佐证。anims[] 只用于核对覆盖范围,不能用来推导时间轴。
- 先定拓扑再写代码:判断是单一主时间轴(高占位、固定舞台、单一 scrub 触发器)还是各区块独立触发器。前者应编写页面级旅程模块,内含一个带标签的时间轴,各区块模块只做切片构建;后者则按 manifest 的 triggers[] 为每个区块模块写一条时间轴。start 为 null 的行属于 CSS 关键帧或无主行,仅作来源记录,不要求各自建时间轴。
- 清单契约:motion.manifest.json 是证据而非编写文件;按生成结果使用,不手工添加行或翻转 measured;逐字记录计数;单独记录编写的代码(文件与前后对比),并保持交付清单哈希与重新生成的一致;若必须添加行,需标记为 authored 并说明,绝不写成 measured: true;pageTriggers 属于页面级模块。若尚无构建,可用 build_motion_manifest({ bands, scrollCensus, sections? }) 依据 analyze_page_structure 与 analyze_scroll_map 生成清单骨架,其 envelope 为 measured: false、DOM 初始状态提示为空。
- 意图映射:文档给出哪些需要移植、哪些跳过,包括加载器开场、主旅程、画布/尘埃粒子、光标、音频、标尺/进度、复制/表单以及减少动效处理。
- 目标平台:Next 通过 SiteScripts 在 MotionRoot 之前提供全局库;Vite 与 Astro 使用保留的全局 gsap/ScrollTrigger/Lenis,不在编写的代码中 import gsap,以避免两份 GSAP 运行时。生成的骨架若 import npm gsap,应替换为保留的全局版本;未使用的 gsap 依赖可保留但不要 import。
- 编写顺序:先页面级(加载器→旅程→光标→音频→标尺),再处理拥有独立触发器的区块;逐区块编写、验证、锁定。
- 验证门槛:每个目标都能构建(vite build、astro build、next build + start 探测);桌面 1440×900 在 8 个锚点处 scrollHeight ±1%、可见区块 id 一致、字体一致、控制台/页面错误与 404 为 0;移动端 390×844 冒烟无横向溢出、锚点与可见区块一致、无错误;减少动效下头部类生效、固定舞台禁用、无溢出、页面可读;源码与构建产物中不再引用被丢弃的站点脚本,仅保留供应商库,SiteScripts 在 MotionRoot 之前。
- 常见失败模式:编写代码早于库加载导致页面无反应;npm import 与全局库并存导致两份 GSAP;把主 scrub 拆成各区块触发器导致交接变化;手工编辑清单却标记为 measured;仅按桌面编写导致移动端页面损坏。
限制与说明:该技能依赖 analyze_page_structure、analyze_scroll_map、build_motion_manifest 与 build_project 等工具,v2 配置下工具名称与参数不同(如 inspect_page、analyze_motion、build_motion),且 census 必须 compact:false 才能提供 anims[]。文档未提供安装命令、收费信息或具体平台支持范围之外的内容。