HH/.agents/skills/huashu-design/references/hero-animation-case-study.md

Gallery Ripple + Multi-Focus · 场景编排哲学

从 huashu-design hero 动画 v9（25 秒，8 场景）里提炼出的一种可复用的视觉编排结构。 不是动画制作流水线，是什么场景下这种编排是"对的"。 实战参考：demos/hero-animation-v9.mp4 · https://www.huasheng.ai/huashu-design-hero/

一句话先行

当你有 20+ 同质视觉素材、场景需要"表达规模感和深度"时，优先考虑 Gallery Ripple + Multi-Focus 这套编排，而不是堆砌排版。

通用 SaaS feature 动画、产品发布会、skill 推广、系列作品集展示——只要素材数量够、风格一致，这套结构几乎都能出效果。

---

这个手法究竟在表达什么

不是"秀素材"——是通过两个节奏变化讲一个叙事：

第一拍 · Ripple 展开（~1.5s）：从中心向四周扩散出 48 张卡片，观众被"量"震住——「哦，这东西有这么多产出」。

第二拍 · Multi-Focus（~8s，4 次循环）：镜头在慢速 pan 的同时，4 次把背景 dim + desaturate，把某一张卡单独放大到屏幕中央——观众从"量的冲击"切换到"质的凝视"，每次 1.7s 节奏稳定。

核心叙事结构：规模（Ripple） → 凝视（Focus × 4） → 淡出（Walloff）。这三拍组合起来表达的是「Breadth × Depth」——不只是能做很多，每一个还都值得停下来看。

对比一下反例：

做法	观众感知
48 张卡静态排列（没有 Ripple）	好看但无叙事，像一张 grid screenshot
一张一张快切（没有 Gallery context）	像 slideshow，失去"规模感"
只有 Ripple 没有 Focus	震住了但没让人记住任何具体一张
Ripple + Focus × 4（本配方）	先震撼于量，再凝视于质，最后平静淡出——完整情绪弧线

---

前置条件（必须全部满足）

这套编排不是万能的，下面 4 条缺一不可：

1. 素材规模 ≥ 20 张，最好 30+ 少于 20 张 Ripple 会显得"空"——48 格里每格都在动才有密度感。v9 用了 48 格 × 32 张图（循环填充）。

2. 素材视觉风格一致 全是 16:9 slide 预览 / 全是 app 截图 / 全是封面设计——长宽比、色调、版式得像是"一套"。混搭会让 Gallery 看起来像剪贴板。

3. 素材单独放大后仍有可读信息 Focus 是把某张卡放大到 960px 宽，如果原图放大后糊了或信息稀薄，Focus 这一拍就废了。反向验证：能不能从 48 张里挑出 4 张作为"最有代表性"的？挑不出来就说明素材质量不齐。

4. 场景本身是 landscape 或 square，不是竖屏 Gallery 的 3D 倾斜（rotateX(14deg) rotateY(-10deg)）需要横向延伸感，竖屏会让倾斜效果看起来窄且别扭。

缺条件的后备路径：

缺什么	退化为什么
素材 < 20 张	改用「3-5 张并排静态展示 + 逐个 focus」
风格不一致	改用「封面 + 3 章节大图」的 keynote-style
信息稀薄	改用「data-driven dashboard」或「金句 + 大字」
竖屏场景	改用「vertical scroll + sticky cards」

---

技术配方（v9 实战参数）

4-Layer 结构

viewport (1920×1080, perspective: 2400px)
  └─ canvas (4320×2520, 超大 overflow) → 3D tilt + pan
      └─ 8×6 grid = 48 cards (gap 40px, padding 60px)
          └─ img (16:9, border-radius 9px)
      └─ focus-overlay (absolute center, z-index 40)
          └─ img (matches selected slide)

关键：canvas 比 viewport 大 2.25 倍，这样 pan 才有"窥视更大世界"的感觉。

Ripple 展开（距离延迟算法）

// 每张卡的入场时间 = 距中心的距离 × 0.8s 延迟
const col = i % 8, row = Math.floor(i / 8);
const dc = col - 3.5, dr = row - 2.5;       // 到中心的 offset
const dist = Math.hypot(dc, dr);
const maxDist = Math.hypot(3.5, 2.5);
const delay = (dist / maxDist) * 0.8;       // 0 → 0.8s
const localT = Math.max(0, (t - rippleStart - delay) / 0.7);
const opacity = expoOut(Math.min(1, localT));

核心参数：

• 总时长 1.7s（T.s3_ripple: [8.3, 10.0]）
• 最大延迟 0.8s（中心最早出，角落最晚）
• 每张卡入场时长 0.7s
• Easing: expoOut（爆发感，不是平滑）

同时做的事：canvas scale 从 1.25 → 0.94（zoom out to reveal）—— 配合出现的同步推远感。

Multi-Focus（4 次节奏）

T.focuses = [
  { start: 11.0, end: 12.7, idx: 2  },  // 1.7s
  { start: 13.3, end: 15.0, idx: 3  },  // 1.7s
  { start: 15.6, end: 17.3, idx: 10 },  // 1.7s
  { start: 17.9, end: 19.6, idx: 16 },  // 1.7s
];

节奏规律：每个 focus 1.7s，间隔 0.6s 喘息。总计 8s（11.0–19.6s）。

每次 focus 内部：

• In ramp: 0.4s（expoOut）
• Hold: 中间 0.9s（focusIntensity = 1）
• Out ramp: 0.4s（easeOut）

背景变化（这是关键）：

if (focusIntensity > 0) {
  const dimOp = entryOp * (1 - 0.6 * focusIntensity);  // dim to 40%
  const brt = 1 - 0.32 * focusIntensity;                // brightness 68%
  const sat = 1 - 0.35 * focusIntensity;                // saturate 65%
  card.style.filter = `brightness(${brt}) saturate(${sat})`;
}

不只是 opacity——同时 desaturate + darken。这让前景 overlay 的色彩"跳出来"，而不是只是"变亮一点"。

Focus overlay 尺寸动画：

• 从 400×225（入场）→ 960×540（hold 态）
• 外围有 3 层 shadow + 3px accent 色 outline ring，呈现"被框住的感觉"

Pan（持续感让静止不无聊）

const panT = Math.max(0, t - 8.6);
const panX = Math.sin(panT * 0.12) * 220 - panT * 8;
const panY = Math.cos(panT * 0.09) * 120 - panT * 5;

• 正弦波 + 线性 drift 双层运动——不是纯循环，每个时刻位置都不同
• X/Y 频率不同（0.12 vs 0.09）避免视觉上看出"规律循环"
• clamp 在 ±900/500px 防止漂出

为什么不用纯线性 pan：纯线性观众会"预测"下一秒在哪；正弦+drift 让每一秒都是新的，3D 倾斜下产生"微晕船感"（好的那种），注意力被拉住。

---

5 个可复用模式（从 v6→v9 迭代中蒸馏）

1. expoOut 作为主 easing，不是 cubicOut

easeOut = 1 - (1-t)³（平滑）vs expoOut = 1 - 2^(-10t)（爆发后迅速收敛）。

选择理由：expoOut 的前 30% 很快达到 90%，更像物理阻尼，符合"重的东西落地"的直觉。特别适合：

• 卡片入场（重量感）
• Ripple 扩散（冲击波）
• Brand 浮起（落定感）

什么时候仍用 cubicOut：focus out ramp、对称的微动效。

2. 纸感底色 + 赤陶橙 accent（Anthropic 血统）

--bg: #F7F4EE;        /* 暖纸 */
--ink: #1D1D1F;       /* 几乎黑 */
--accent: #D97757;    /* 赤陶橙 */
--hairline: #E4DED2;  /* 暖线条 */

为什么：温暖底色在 GIF 压缩后依然有"呼吸感"，不像纯白会显得"屏幕感"。赤陶橙作为唯一 accent 贯穿 terminal prompt、dir-card 选中、cursor、brand hyphen、focus ring——所有视觉锚点都被这一个色串起来。

v5 教训：加了 noise overlay 以模拟"纸纹"，结果 GIF 帧压缩全废（每帧都不同）。v6 改为"只用底色 + 暖 shadow"，纸感保留 90%，GIF 体积缩小 60%。

3. 两档 Shadow 模拟深度，不用真 3D

.gallery-card.depth-near { box-shadow: 0 32px 80px -22px rgba(60,40,20,0.22), ... }
.gallery-card.depth-far  { box-shadow: 0 14px 40px -16px rgba(60,40,20,0.10), ... }

用 sin(i × 1.7) + cos(i × 0.73) 确定性算法给每张卡分配 near/mid/far 三档 shadow——视觉上有"三维堆叠"感，但每帧 transform 完全不变，GPU 消耗 0。

真 3D 的代价：每个 card 单独 translateZ，GPU 每帧都在算 48 个 transform + shadow blur。v4 试过，Playwright 录制 25fps 都吃力。v6 的两档 shadow 肉眼效果差距 <5%，但成本差 10 倍。

4. 字重变化（font-variation-settings）比字号变化更电影感

const wght = 100 + (700 - 100) * morphP;  // 100 → 700 over 0.9s
wordmark.style.fontVariationSettings = `"wght" ${wght.toFixed(0)}`;

Brand wordmark 从 Thin → Bold 用 0.9s 渐变，配合 letter-spacing 微调（-0.045 → -0.048em）。

为什么比放大缩小好：

• 放大缩小观众看过太多，预期固化
• 字重变化是"内在的充实感"，像气球被吹满，而不是"被推近"
• variable fonts 是 2020+ 才普及的特性，观众下意识感觉"现代"

限制：必须用支持 variable font 的字体（Inter/Roboto Flex/Recursive 等）。普通静态字体只能拟态（切换几个固定 weight 有跳变）。

5. Corner Brand 低强度持续签名

Gallery 阶段左上角有个 HUASHU · DESIGN 小标识，16% opacity 色值，12px 字号，宽字距。

为什么加这个：

• Ripple 爆发后观众容易"失焦"不记得在看什么，左上角轻标示帮助 anchor
• 比全屏大 logo 更高级——做品牌的人知道，品牌签名不需要喊
• 在 GIF 被截屏分享时仍留下归属信号

规则：只在中段（画面 busy）出现，开场关闭（不遮 terminal），结尾关闭（brand reveal 是主角）。

---

反例：什么时候不要用这套编排

❌ 产品演示（要展示功能的）：Gallery 让每一张都一闪而过，观众记不住任何一个功能。改用「单屏 focus + tooltip 标注」。

❌ 数据驱动内容：观众要读数字，Gallery 的快速节奏不给时间读。改用「数据图表 + 逐项 reveal」。

❌ 故事叙事：Gallery 是"并列"结构，故事需要"因果"。改用 keynote 章节切换。

❌ 素材只有 3-5 张：Ripple 密度不够，看起来像"补丁"。改用「静态排列 + 逐张高亮」。

❌ 竖屏（9:16）：3D tilt 需要横向延伸，竖屏会让倾斜感觉"歪"而不是"展开"。

---

如何判断自己的任务适用这套编排

三步快速检查：

Step 1 · 素材数量：数一下你有多少同类视觉素材。< 15 → 停；15-25 → 凑；25+ → 直接用。

Step 2 · 一致性测试：把 4 张随机素材并排放，是否像「一套」？不像 → 先统一风格再做，或改方案。

Step 3 · 叙事匹配：你要表达的是「Breadth × Depth」（量 × 质）吗？还是「流程」「功能」「故事」？不是前者就别硬套。

三步都 yes，直接 fork v6 HTML，改 SLIDE_FILES 数组和时间轴就能复用。调色板改 --bg / --accent / --ink，整体换皮不换骨。

---

相关 Reference

• 完整技术流程：references/animations.md · references/animation-best-practices.md
• 动画导出流水线：references/video-export.md
• 音频配置（BGM + SFX 双轨）：references/audio-design-rules.md
• Apple 画廊风格的横向参考：references/apple-gallery-showcase.md
• 源 HTML（v6 + 音频集成版）：www.huasheng.ai/huashu-design-hero/index.html