dsh-creation-mode 3.0.0 → 3.0.1

package/references/motion.md

@@ -0,0 +1,322 @@
+# 运动与缓动
+
+动画好不好看，八成取决于运动曲线，不取决于画了什么。这一份讲清楚：帧怎么算、
+曲线怎么选、速度怎么控、什么时候该加运动模糊。
+
+---
+
+## 一、帧即函数
+
+`window.renderAt(t)` 必须是纯函数：同一个 `t` 永远得到同一帧。
+
+```js
+window.renderAt = function (t) {
+  ctx.clearRect(0, 0, W, H);
+  drawBackground(t);
+  drawTitle(t);
+  drawParticles(t);
+};
+```
+
+三条禁止：
+
+| 禁止 | 后果 |
+|---|---|
+| 读 `Date.now()` / `performance.now()` | 预览和导出不同步，导出时画面乱跳 |
+| 用 `Math.random()` | 每一帧粒子位置都变，导出后像雪花屏 |
+| 依赖上一帧状态（累加、缓存） | 导出是「跳帧取样」，跳过的那几帧状态全丢 |
+
+需要随机就写固定种子的伪随机：
+
+```js
+function mulberry32(seed) {
+  return function () {
+    seed |= 0; seed = (seed + 0x6D2B79F5) | 0;
+    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+const rand = mulberry32(20261103);   // 固定种子，每帧重新创建也一样
+```
+
+需要「上一帧的位置」就把它算出来，不要存。比如粒子在 `t` 时刻的位置：
+
+```js
+// 错：p.x += vx * dt
+// 对：位置是 t 的解析函数
+const x = x0 + vx * t + 0.5 * ax * t * t;
+```
+
+---
+
+## 二、时间归一化
+
+所有动画参数都写成 `t` 的函数，用区间映射：
+
+```js
+const clamp01 = (u) => (u < 0 ? 0 : u > 1 ? 1 : u);
+/** 在 [start, start+dur] 内把时间映射到 0..1 */
+const tween = (t, start, dur) => clamp01((t - start) / Math.max(dur, 1e-6));
+```
+
+有了 `tween`，任何属性都能这样写：
+
+```js
+const u = tween(t, 1.2, 0.6);        // 1.2s 开始，持续 0.6s
+const opacity = easeOutCubic(u);
+const y = 400 - 120 * easeOutBack(u);
+```
+
+---
+
+## 三、缓动曲线
+
+### 3.1 为什么不能线性
+
+匀速运动看起来像机器在动。人眼对「起步」和「收尾」的加速度极其敏感，
+线性插值在这两端加速度突变，观感是「卡了一下」。
+
+### 3.2 常用曲线（附实现）
+
+```js
+const easeOutCubic  = (u) => 1 - Math.pow(1 - u, 3);
+const easeInCubic   = (u) => u * u * u;
+const easeInOutCubic= (u) => u < 0.5 ? 4*u*u*u : 1 - Math.pow(-2*u + 2, 3) / 2;
+const easeOutQuint  = (u) => 1 - Math.pow(1 - u, 5);
+const easeOutExpo   = (u) => u === 1 ? 1 : 1 - Math.pow(2, -10 * u);
+const easeOutBack   = (u) => { const c1 = 1.70158, c3 = c1 + 1;
+  return 1 + c3 * Math.pow(u - 1, 3) + c1 * Math.pow(u - 1, 2); };
+```
+
+### 3.3 什么时候用哪条
+
+| 场景 | 曲线 | 理由 |
+|---|---|---|
+| 元素进场（淡入、上浮） | ease-out | 快进慢停，像被甩进来又稳住 |
+| 元素退场（淡出、下沉） | ease-in | 慢起快走，像被吸走 |
+| 位置移动 | ease-in-out | 两头缓中间快，符合惯性 |
+| 弹性 / 回弹 | ease-out-back | 过冲 10–15% 再落回 |
+| 数字滚动 | ease-out-quint | 末尾几乎静止，读数清楚 |
+| 遮罩揭开 | ease-in-out | 匀速揭开像机械 |
+| 摄像机推近 | ease-in-out 或 ease-out | 推近用 ease-out，拉远用 ease-in |
+
+**不要用 CSS 默认的 `ease`**（等价 cubic-bezier(0.25,0.1,0.25,1)），曲线太弱，
+在 1 秒以内的动画上几乎看不出区别。
+
+### 3.4 用 bezier 精确控制
+
+```js
+function cubicBezier(p1x, p1y, p2x, p2y) {
+  // 牛顿迭代求 x 对应的 t，再算 y
+  const cx = 3 * p1x, bx = 3 * (p2x - p1x) - cx, ax = 1 - cx - bx;
+  const cy = 3 * p1y, by = 3 * (p2y - p1y) - cy, ay = 1 - cy - by;
+  const sampleX = (s) => ((ax * s + bx) * s + cx) * s;
+  const sampleY = (s) => ((ay * s + by) * s + cy) * s;
+  const solveX = (x) => {
+    let s = x;
+    for (let i = 0; i < 6; i++) {
+      const err = sampleX(s) - x;
+      if (Math.abs(err) < 1e-5) break;
+      const d = (3 * ax * s + 2 * bx) * s + cx;
+      if (Math.abs(d) < 1e-6) break;
+      s -= err / d;
+    }
+    return s;
+  };
+  return (x) => sampleY(solveX(clamp01(x)));
+}
+const easeOut = cubicBezier(0.16, 1, 0.3, 1);
+```
+
+常用值：
+
+| 名字 | bezier |
+|---|---|
+| ease-out（强） | `(0.16, 1, 0.3, 1)` |
+| ease-in（强） | `(0.7, 0, 0.84, 0)` |
+| ease-in-out（标准） | `(0.65, 0, 0.35, 1)` |
+| 快出慢收 | `(0.22, 1, 0.36, 1)` |
+| 蓄力 | `(0.5, 0, 0.9, 0.2)` |
+
+### 3.5 弹簧
+
+弹簧比 bezier 更「活」，适合强调性动作（按钮弹入、图标落位）。解析解：
+
+```js
+/** 阻尼弹簧：0 时刻从 0 出发，最终收敛到 1 */
+function spring(t, { stiffness = 180, damping = 12, mass = 1 } = {}) {
+  if (t <= 0) return 0;
+  const w0 = Math.sqrt(stiffness / mass);
+  const zeta = damping / (2 * Math.sqrt(stiffness * mass));
+  if (zeta < 1) {
+    const wd = w0 * Math.sqrt(1 - zeta * zeta);
+    const A = -1, B = -zeta * w0 / wd;
+    return 1 + Math.exp(-zeta * w0 * t) * (A * Math.cos(wd * t) + B * Math.sin(wd * t));
+  }
+  return 1 - Math.exp(-w0 * t) * (1 + w0 * t);
+}
+```
+
+参数直觉：
+
+| 效果 | stiffness | damping |
+|---|---|---|
+| 轻微回弹 | 120 | 14 |
+| 明显回弹 | 200 | 10 |
+| 硬弹（像金属） | 300 | 8 |
+| 几乎不弹（只减速） | 100 | 26 |
+
+**弹簧只用在「结果需要强调」的地方**：一次落位、一次开关。全程弹簧会显得廉价。
+
+---
+
+## 四、夹紧与越界
+
+`ease-out-back` 会过冲（返回值 > 1），`spring` 会来回震荡。这些是设计意图，
+但**位置、透明度、缩放必须夹紧到合法范围**：
+
+```js
+const alpha = clamp01(easeOutBack(u));
+const scale = Math.max(0.01, 1 + 0.15 * spring(t, ...));
+```
+
+不夹紧的典型事故：透明度变成负数（画不出来）、缩放变成 0（除零）、
+元素坐标飞到画布外（看起来像消失了）。
+
+---
+
+## 五、帧预算与性能
+
+30fps 下每帧 16.6ms，60fps 下 8.3ms。浏览器还要留时间给合成和录制。
+
+| 操作 | 大致成本 |
+|---|---|
+| `fillRect` 小面积 | 0.01ms |
+| `fillText` 单行 | 0.05–0.2ms |
+| `drawImage` 同尺寸贴图 | 0.05ms |
+| 径向渐变全屏 | 0.5–2ms |
+| `shadowBlur` 大半径 | 1–5ms |
+| 逐像素 `getImageData/putImageData` | 10–50ms（禁止每帧做） |
+| 创建 `Path2D`（每帧新建） | 0.1–1ms |
+
+经验上限：**每帧 300 个绘制调用**以内比较稳。超过就合并、预渲染、降级。
+
+优化手段：
+
+1. **离屏预渲染**：把静态的复杂图形画一次到 `OffscreenCanvas`，之后 `drawImage`。
+2. **分层**：背景层只在变化时重画（但纯函数约束下通常是每帧重画，所以要缓存到离屏 canvas，按 `t` 的粗粒度失效）。
+3. **粒子用贴图**：不要每个粒子都 `beginPath + arc`，预生成 32×32 的圆点贴图。
+4. **避免每帧分配**：对象池、复用数组。
+
+```js
+// 预生成粒子贴图
+const dot = document.createElement('canvas');
+dot.width = dot.height = 32;
+const dctx = dot.getContext('2d');
+const g = dctx.createRadialGradient(16, 16, 0, 16, 16, 16);
+g.addColorStop(0, 'rgba(255,255,255,1)');
+g.addColorStop(1, 'rgba(255,255,255,0)');
+dctx.fillStyle = g; dctx.fillRect(0, 0, 32, 32);
+// 绘制时
+ctx.drawImage(dot, p.x - 16, p.y - 16, 32, 32);
+```
+
+---
+
+## 六、运动模糊
+
+真实运动模糊来自快门开合：180° 快门意味着曝光覆盖半帧。
+
+### 6.1 子帧叠加
+
+```js
+function drawWithBlur(t, shutter = 0.5, samples = 6) {
+  // shutter 是帧的倍数：0.5 = 半帧曝光
+  const frameDur = 1 / 30;
+  const span = frameDur * shutter;
+  ctx.save();
+  ctx.globalAlpha = 1 / samples;
+  for (let i = 0; i < samples; i++) {
+    const sub = t - (i / (samples - 1 || 1)) * span;
+    drawScene(sub);
+  }
+  ctx.restore();   // 恢复 globalAlpha
+}
+```
+
+### 6.2 什么时候用
+
+| 条件 | 加不加 |
+|---|---|
+| 元素速度 > 40px/帧 | 加 |
+| 画面整体推拉/摇移 | 加 |
+| 静止画面、缓慢淡入 | 不加（只会变糊） |
+| 文字 | 谨慎，小字加了会糊成一团 |
+
+### 6.3 成本
+
+`samples` 直接乘上绘制成本。6 个样本 = 6 倍绘制时间。导出 120 秒 × 30fps × 6 样本
+= 21600 次全场景绘制，会很慢。只在关键段落用，或者把 samples 降到 3。
+
+---
+
+## 七、动作设计
+
+### 7.1 预备—动作—跟随
+
+真实动作有三段，动画也一样：
+
+| 阶段 | 时长占比 | 表现 |
+|---|---|---|
+| 预备（anticipation） | 15% | 反向蓄力，比如起跳前下蹲 |
+| 动作（action） | 50% | 主运动，快 |
+| 跟随（follow-through） | 35% | 过冲 + 回弹 + 附属物延迟 |
+
+```js
+const total = 0.8;
+const u = tween(t, 1.0, total);
+let y;
+if (u < 0.15)      y = 20 * (u / 0.15);                    // 下蹲
+else if (u < 0.65) y = 20 - 140 * easeOutQuint((u - 0.15) / 0.5);  // 起跳
+else               y = -120 + 8 * Math.sin((u - 0.65) / 0.35 * Math.PI); // 回弹
+```
+
+### 7.2 只让一个东西当主角
+
+同一时刻三个元素在动，观众哪个都看不见。检查方法：每隔 0.5 秒问一次
+「现在观众的眼睛该看哪里」。答不上来就说明画面太挤。
+
+### 7.3 留白
+
+静止不是死亡。6–10 帧的静场比全程都在动更有力，尤其是重音之前。
+
+```js
+// 重音落在 3.0s：2.9–3.0 之间画面完全静止
+const holdStart = 2.9, holdEnd = 3.0;
+if (t > holdStart && t < holdEnd) return;   // 保持上一帧内容
+```
+
+### 7.4 次级动作
+
+主体到位后，附属元素延迟 2–4 帧跟上，画面立刻「活」：
+
+```js
+const mainU = tween(t, 1.0, 0.4);
+const subU  = tween(t, 1.0 + 0.08, 0.4);   // 延迟 80ms
+```
+
+---
+
+## 八、自检清单
+
+导出前逐条过：
+
+- [ ] `renderAt(0)` 不是黑屏
+- [ ] `renderAt(duration/2)` 有内容
+- [ ] `renderAt(duration - 0.05)` 不是被截断的半截动作
+- [ ] 没有任何 `Math.random()` 或 `Date.now()`
+- [ ] 所有插值都夹紧了
+- [ ] 同一时刻只有一个视觉主角
+- [ ] 每个卡点前 2–3 帧画面是静的
+- [ ] 逐帧拖动看，没有闪烁或跳变

package/references/particles.md

@@ -0,0 +1,166 @@
+# 粒子系统
+
+粒子是「量」的艺术：几十个是装饰，几千个是氛围，几万个是特效。
+
+这一份讲：怎么在纯函数约束下做粒子、怎么控性能、怎么让粒子「有性格」。
+
+---
+
+## 一、纯函数粒子
+
+粒子**不能**逐帧累加位置，因为导出是跳帧取样，跳过的帧状态全丢。
+
+正确做法：每个粒子的状态是 `t` 的解析函数。
+
+```js
+function particle(i, t) {
+  const rand = mulberry32(1000 + i);        // 每个粒子固定种子
+  const angle = rand() * Math.PI * 2;
+  const speed = 60 + rand() * 140;
+  const life   = 1.2 + rand() * 1.8;
+  const born   = rand() * 2;                // 出生时间错开
+  const age    = t - born;
+  if (age < 0 || age > life) return null;   // 未出生或已消亡
+
+  const k = age / life;
+  const r = speed * age * (1 - 0.5 * k);    // 带阻尼的位移
+  return {
+    x: cx + Math.cos(angle) * r,
+    y: cy + Math.sin(angle) * r + 40 * age * age,   // 重力
+    alpha: (1 - k) * (1 - k),               // 二次衰减
+    size: 2 + rand() * 3,
+  };
+}
+```
+
+关键：`rand` 用粒子索引做种子，每个粒子的初始条件固定，位置由 `age` 算出。
+删掉累加，也就删掉了跳帧问题。
+
+---
+
+## 二、绘制
+
+### 2.1 用贴图，不要画路径
+
+```js
+// 慢：每个粒子 4 次调用
+for (const p of ps) { ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, 7); ctx.fill(); }
+
+// 快：每个粒子 1 次
+for (const p of ps) ctx.drawImage(dot, p.x - s, p.y - s, s * 2, s * 2);
+```
+
+预生成贴图（见 color.md 的 `makeNoise` / 光斑做法）：
+
+```js
+const dot = (() => {
+  const c = document.createElement('canvas');
+  c.width = c.height = 32;
+  const g = c.getContext('2d');
+  const rg = g.createRadialGradient(16, 16, 0, 16, 16, 16);
+  rg.addColorStop(0, 'rgba(255,255,255,1)');
+  rg.addColorStop(0.6, 'rgba(255,255,255,0.6)');
+  rg.addColorStop(1, 'rgba(255,255,255,0)');
+  g.fillStyle = rg; g.fillRect(0, 0, 32, 32);
+  return c;
+})();
+```
+
+### 2.2 混合模式
+
+| 模式 | 效果 | 适用 |
+|---|---|---|
+| `source-over` | 正常叠加 | 实心粒子 |
+| `lighter` | 相加，越叠越亮 | 光点、火花 |
+| `screen` | 柔和的提亮 | 烟雾、光晕 |
+
+`lighter` 最容易出效果，但也最容易过曝。超过 500 个粒子时把单粒子 alpha 降到
+0.15 以下。
+
+---
+
+## 三、性能
+
+| 粒子数 | 做法 |
+|---|---|
+| < 200 | 每帧直接画 |
+| 200–2000 | 贴图 + `lighter`，避免 `save/restore` |
+| 2000–20000 | 降到 16×16 贴图，关闭阴影，减少 alpha 变化 |
+| > 20000 | 预渲染成序列图，或改用 `ImageData` 逐像素（一次性） |
+
+一帧 33ms 的预算下，2000 个 `drawImage` 约 6–10ms。
+
+### 3.1 减少状态切换
+
+```js
+// 差：每个粒子都改 globalAlpha
+for (const p of ps) { ctx.globalAlpha = p.alpha; ctx.drawImage(dot, ...); }
+
+// 好：按 alpha 分桶，每桶设一次
+const buckets = new Map();
+for (const p of ps) {
+  const k = Math.round(p.alpha * 10);
+  (buckets.get(k) || buckets.set(k, []).get(k)).push(p);
+}
+for (const [k, arr] of buckets) {
+  ctx.globalAlpha = k / 10;
+  for (const p of arr) ctx.drawImage(dot, ...);
+}
+```
+
+---
+
+## 四、有性格的粒子
+
+### 4.1 爆发
+
+从一点向外，速度有分布，前快后慢：
+
+```js
+const r = speed * Math.pow(age, 0.6);   // 指数 < 1：一开始冲得快
+```
+
+### 4.2 汇聚
+
+爆发反过来：从四周向中心收，`1 - pow(1 - k, 3)`。
+
+### 4.3 飘浮
+
+速度极低 + 正弦扰动，像尘埃：
+
+```js
+x: x0 + Math.sin(t * 0.7 + seed) * 18,
+y: y0 - t * 12 + Math.cos(t * 0.5 + seed) * 10,
+```
+
+### 4.4 拖尾
+
+每个粒子画最近 4 个历史位置（用 `t - k/30` 重算，不要存）：
+
+```js
+for (let k = 0; k < 4; k++) {
+  const p = particle(i, t - k / 30);
+  if (!p) continue;
+  ctx.globalAlpha = p.alpha * Math.pow(0.5, k);
+  ctx.drawImage(dot, p.x - s, p.y - s, s * 2, s * 2);
+}
+```
+
+---
+
+## 五、和文字/主体的关系
+
+粒子是背景时，**必须压暗**：alpha ≤ 0.35，或者只在外围分布，别盖住中心。
+
+判断方法：把画面缩到 25%，如果粒子还在抢视线，就再压。
+
+---
+
+## 六、自检清单
+
+- [ ] 每个粒子的初始条件用索引做种子？
+- [ ] 位置是 `t` 的解析函数，没有累加？
+- [ ] 用贴图而不是 `arc` 路径？
+- [ ] 粒子数在预算内（< 2000 直接画）？
+- [ ] 背景粒子压暗到不抢主体？
+- [ ] 混合模式统一，没有逐粒子切换？

package/references/sequencing.md

@@ -0,0 +1,143 @@
+# 编排
+
+单帧好看不算片子。整条片子的节奏，靠的是场景之间的长短、轻重、疏密。
+
+这一份讲：时间轴怎么切、节奏怎么排、一场戏该有多长、什么时候该停。
+
+---
+
+## 一、先把时间轴画出来
+
+写代码之前，先在纸上（或脑子里）排一条时间轴：
+
+```
+0.0 ─ 2.4   开场：logo + 标题
+2.4 ─ 3.6   数据：三个数字滚动
+3.6 ─ 6.0   演示：界面操作
+6.0 ─ 7.2   结论：一句话
+7.2 ─ 8.0   收尾：logo 淡出
+```
+
+每段写清三件事：起止时间、这一场要说什么、观众该看哪里。
+
+**没有这条时间轴就开始写代码，十有八九写到一半发现时长不够或节奏拖沓。**
+
+---
+
+## 二、一场戏多长
+
+| 类型 | 时长 | 说明 |
+|---|---|---|
+| 卡点镜头 | 0.4–0.8s | 一闪而过，配合重音 |
+| 信息镜头 | 2–4s | 读一句话 + 看一张图 |
+| 演示镜头 | 3–6s | 操作流程，要有过程 |
+| 情绪镜头 | 2–5s | 慢，留白 |
+| 收尾 | 1–2s | logo / 口号 |
+
+一条 30 秒的片子，通常 6–10 个镜头；48 秒的片子 8–12 个。
+
+镜头少于 5 个会显得空，多于 15 个会显得碎。
+
+---
+
+## 三、节奏曲线
+
+好片子不是匀速的。典型的曲线：
+
+```
+强度
+ │        ╱╲
+ │   ╱╲  ╱  ╲╱╲
+ │  ╱  ╲╱       ╲
+ └────────────────── 时间
+   开场  铺垫  高潮  收尾
+```
+
+- **开场**（前 15%）：抓注意力，节奏快
+- **铺垫**（15%–45%）：给信息，节奏中等
+- **高潮**（45%–80%）：最密、最亮、最响
+- **收尾**（80%–100%）：迅速降下来
+
+全程一个强度，观众 10 秒就腻了。
+
+---
+
+## 四、疏密
+
+| 密度 | 表现 | 用在哪 |
+|---|---|---|
+| 密 | 多个元素同时动、信息多、切得快 | 高潮、卖点罗列 |
+| 疏 | 一个元素、大片留白、慢 | 开场、转折、收尾 |
+
+**密之后必须有疏**，否则观众疲劳。连续 10 秒高密度，后面再炸也没感觉。
+
+---
+
+## 五、转场的节奏
+
+| 段落 | 转场 |
+|---|---|
+| 开场 → 铺垫 | 硬切或快速擦除 |
+| 铺垫内部 | 硬切为主 |
+| 铺垫 → 高潮 | 叠化或闪白（有仪式感） |
+| 高潮内部 | 硬切，越快越好 |
+| 高潮 → 收尾 | 慢叠化（0.6s） |
+
+---
+
+## 六、开头三秒
+
+观众决定要不要看下去，就看这三秒。
+
+三种有效开场：
+
+1. **直接给结果**：先放成品画面，再解释怎么来的
+2. **反常识提问**：一句话制造信息缺口
+3. **强视觉**：一个高密度的画面，先抓住眼睛
+
+三种无效开场：
+
+1. logo 旋转三秒
+2. 「大家好，今天我们来聊聊……」
+3. 缓慢的淡入 + 空镜
+
+---
+
+## 七、结尾
+
+结尾只做一件事：**把话说完**。
+
+| 做法 | 效果 |
+|---|---|
+| 一句话 + 留白 1s | 干净 |
+| logo 淡入 | 品牌感 |
+| 回到开场画面 | 闭环 |
+| 加二维码 / 链接 | 转化（但别超过 2s） |
+
+**不要在结尾堆信息**。观众这时候已经准备划走了。
+
+---
+
+## 八、和配乐的关系
+
+| 段落 | 配乐 |
+|---|---|
+| 开场 | 起势（rise），不要一上来就满 |
+| 铺垫 | 铺底 + 稀疏节奏 |
+| 高潮 | 最满，重音密集 |
+| 收尾 | 只留和弦，散开 |
+
+配乐的密度曲线必须和画面的密度曲线一致。画面在收，音乐还在炸，就是「两张皮」。
+
+---
+
+## 九、自检清单
+
+- [ ] 写代码前有完整时间轴？
+- [ ] 镜头数在 6–12 之间？
+- [ ] 强度曲线有起伏（不是全程一样）？
+- [ ] 密之后有疏？
+- [ ] 开头三秒有钩子？
+- [ ] 结尾只做一件事？
+- [ ] 配乐密度和画面密度一致？
+- [ ] 总时长和分镜一致（叠化有没有偷走时间）？