用 Claude Code 六步做出 6 秒循环动效，全程纯函数驱动时间轴
aakashgupta · x · 2026-10-01
Aakash Gupta 分享用 Claude Sonnet 5.5 在 Claude Code 中生成 motion graphics 的六步工作流：
- 给参考图：截图喜欢的动效，附上并要求"让它动起来，一个 HTML 文件、内联 SVG、无依赖库、6 秒循环"——一开始就说清循环时长，避免模型瞎猜。
- 按顺序写状态：用六行普通英语写明时间点（如按键 0.6s 按下、面板 0.95s 弹出、字母 1.35–2.1s 逐个落下并触发列表过滤、3.9s 回车、toast 升起）。
- 让时间成为唯一输入：要求每个元素都是时间 t（0 到 6 秒）的纯函数，不用 timer 和 CSS keyframes，帧 0 等于帧 6，保证循环无缝。
后续步骤围绕逐轮修正展开，核心思路是把动效拆成"视觉参考 + 明确时间轴 + 纯函数渲染"三件事，让编码 agent 可稳定复现。
「编程与Agent」频道最新
- ComfyUI 角色设定图实测:Qwen Image 2.1 比 FLUX.2 Krea Turbo 快约 3 倍 — cgpixel23 · 2026-10-01
- 用 Claude Opus 把几百个 Three.js 实验剪成一支音乐视频 — creatoroff · 2026-10-01
- Agent 安全心态:除「能做什么」,更要问「被攻破会怎样」 — goyalshaliniuk · 2026-10-01
- AI Agent 五大安全风险:浏览、调用 API 背后的新攻击面 — goyalshaliniuk · 2026-10-01
- 开发者：与其向 LLM 解释并行化，不如让代码自己说话 — cephaloform · 2026-10-01
- Jevathon 上的 AI 乐队:Jev 不弹音符只做指挥,每小节省 2.7 秒 — schwentker · 2026-10-01