动画与视频

先写镜头，不先写 CSS

产品发布片和复杂演示先完成 director's notes：创作意图、视觉系统、故事弧、逐镜分镜与制作清单。动画代码只负责执行已经明确的镜头决策。

时间轴模型

仓库的 Stage + Sprite 模型使用 useTime、useSprite、interpolate 和 Easing 组织动画。每一帧应由时间决定，避免依赖不可 seek 的临时状态。

推荐节奏

使用有对比的叙事结构：建立、加速、冲击、停顿。运动要展示过程和因果，不要让元素无理由漂浮。

先验证关键帧

在完整渲染前，截取开头、关键转场、品牌时刻和结尾。关键帧不成立时，增加帧率不会改善设计。

导出路径

NODE_PATH=$(npm root -g) node scripts/render-video-seek.js animation.html \
  --duration=30 --fps=60 --width=1920 --height=1080

确定性 seek 渲染适合高质量交付。快速预览可使用 render-video.js，再通过 convert-formats.sh 生成 GIF 或帧率版本。

深入阅读：动画设计原则、动画避坑、视频导出。