【经验开源】AI 做动画视频完全指南：原理、技巧、Skill 一次给全

• 该视频类型本质是用语言模型生成网页代码，通过浏览器截图并拼接成视频，而非直接生成视频文件。 — ✓ “模型要做的是写一个网页” (1:09)
• 核心渲染逻辑是编写一个接收时间参数的函数，确保任意时间点都能独立画出对应画面，不依赖上一帧状态。 — ✓ “不能依赖上一帧画到哪了” (1:26)
• 常用技术栈包括HTML/CSS处理基础UI和动画，SVG用于矢量图形和描边效果，Canvas用于粒子等复杂动态效果。 — ✓ “这时候该Canvas出场了” (3:04)
• 高级视觉效果如复古质感使用着色器（Shader）叠加在Canvas画面上，3D立体感则使用Three.js构建三角形网格场景。 — ✓ “想要真正的立体感，就得上3js” (4:12)
• 音频同步通过代码计算正弦波等数学公式生成鼓点、贝斯等音效，确保画面与声音在同一时间轴上精准卡点。 — ✓ “声音本质上是空气的震动” (5:49)
• 向AI提需求时应提供具体对标作品（如电影片头或广告风格），明确学习节奏和配色但不照搬内容，避免审美疲劳。 — ✓ “给它一个对标，要稳得多” (7:29)
• 视频节奏需根据音乐BPM设定，将镜头切换、元素出现等动作对齐拍点，并在口播段落让配乐静音以避免嘈杂。 — ✓ “定了对标，再让它想三种讲法” (7:58)
• 转场设计应追求视觉连续性，如形状变形或镜头运动衔接，避免使用平淡的淡入淡出；讲解类视频需确保无字幕也能看懂画面变化。 — ✓ “好的转场，下一个画面是从上一个画面里长出来的” (8:54)
• 制作产品演示视频时，必须提供真实Logo、截图和品牌色，并模拟光标移动、点击和界面反馈以增强真实感。 — ✓ “一定要给他真实的logo，产品截图” (9:40)
• 作者开源了motion-showreel Skill，包含43种预设风格（如像素游戏、软萌3D、白板手绘等），将创作流程标准化。 — ✓ “它已经发布到我们的garden skills仓库了” (10:36)
• 该Skill的工作流包括：写Brief明确约束、生成风格预览帧、逐镜头制作、实时预览工作区以及自动化检查验收。 — ✓ “Skill把前面的技巧都变成了流程里固定的一步” (11:38)
• 自动化检查环节将视频转化为图像和数字指标（如波形、响度LUFS、峰值dBTP），自动检测坏帧、模糊文字和音画同步问题。 — ✓ “成片出来看抽针拼图和运动报告” (14:49)

• 0:00 bilibili
• 1:00 bilibili / 01 原理 02 技巧 03 Skill / 01 原理 / 语言模型是怎么做出视频的 / 接下来 / 网页 SVG Canvas
• 2:00 怎么用文字“写”出来？
• 3:00 — 同一个技巧，整个 logo 一起描出来
• 4:00 bilibili / 扫描线 + 色差 + 弧面 + 颗粒 = 老电视 / 扫描线 / 色差 / 弧面 / 颗粒 / 就是扫描线、色差、弧面、颗粒这几条规则叠在一起
• 5:00 bilibili / 一镜到底 / 1 个镜头 · 0 次剪辑 · 26,633 个三角形
• 6:00 一个音「嗵—」 / 正弦波 · 每秒摇440次 = 标准A / sin(2π · 440 · t) / 底鼓 / 音量从210 Hz滑到48 Hz，音量迅速变小 / sin(2π · f(t)dt) = e^(-t / 0.10) / 这里隔了 11 ms; 摇了 5 次 / 这里隔了 0.42 s
• 7:00 bilibili / 01 原理 / 02 技巧 / 03 Skill / 02 技巧 / 怎么让它做得好看 / 这一章 / 先找对标 / 节奏跟着音乐 / 画面要连起来 / 给真东西 / 看图检查自己
• 8:00 再让它想三种讲法 / 定了对标，再让它想三种讲法
• 9:00 好的转场：下一个画面上一个里长出来 / 一个圆 / 上一镜的圆变成下一镜的太阳

• 读了 1 张图，每张都有描述
• 图上文字 107 行
• 逐字稿 190 段 (942 / 942 s)
• 画面文字 16 行，带出现时间
• 抽帧间隔不超过 60 秒
• 没读到：on-screen text between sampled frames not read: a transcript-first read takes 16 frames, about one every 0:58
• 没读到：comments not read

样例，第 1 张图 — An orange promotional graphic featuring large white Chinese text 'AI 做动画视频' (AI Making Animation Videos) and '完全指南' (Complete Guide). The top includes tags '经验开源' and 'Garden Skills'. Below the title is a grid of various thumbnail images representing animation concepts, code snippets, and design elements. 图上文字开头： “经验开源 Garden Skills AI 做动画视频 完全指南 原理 • 技巧 • Skill 一次给全 PRINT RENDERED 节奏 网格 卡点 fu…”