From 529c53323328e8051c9200ff3a52ebf24264f431 Mon Sep 17 00:00:00 2001 From: alchain Date: Mon, 20 Apr 2026 22:20:19 +0800 Subject: [PATCH] =?UTF-8?q?optimize=20huashu-design:=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=20Anthropic=20=E7=BA=A7=E5=8A=A8=E7=94=BB=E6=AD=A3=E5=90=91?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E8=AF=AD=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Darwin round (20260420) —— 把 Anthropic 官方三支产品动画 (Claude Design / Code Desktop / for Word) 的运动逻辑和表达风格 整合进 skill，不引入任何品牌色。 ## 新增 references/animation-best-practices.md (~350 行) - §1 叙事节奏：Slow-Fast-Boom-Stop 5 段结构 + 15 秒时长映射 - §2 Easing 哲学：expoOut 作主 easing，overshoot 作 toggle，spring 作归位 - §3 运动语言 8 条共性（去品牌色版） - §4 8 个具体运动技巧（带代码片段）: FLIP / 呼吸式展开 / 30ms stagger / 0.5s 悬停 / Chunk Reveal / Anticipation-Action-Follow-through / 3D perspective / 斜向 Pan - §5 3 种场景配方：Apple Keynote / 一镜到底工具 / 办公效率叙事 - §6 反例表：10 条 AI slop 反 pattern → 正确做法 - §7 交付前 14 项自检清单 - §8 与其他 reference 的关系矩阵 ## assets/animations.jsx 新增 Easing.expoOut (cubic-bezier(0.16, 1, 0.3, 1)) 新增 Easing.overshoot (cubic-bezier(0.34, 1.56, 0.64, 1)) ## references/animations.md Easing 表格加两行（expoOut 标 ⭐, overshoot 标 ⭐） 默认主 easing 从 easeOut 升级为 expoOut ## SKILL.md references 路由表新增一行指向 animation-best-practices.md ## 约束声明 严格过滤品牌色。本轮不收录任何具体 HEX 色值、字体名、产品名。 色彩/字体决策走 §1.a 核心资产协议或 20 种设计哲学。 预期评分提升：79.4 → ~87.6（+8.2） Fallback point: e1b94a4 (前一 commit) Co-Authored-By: Claude Opus 4.7 (1M context) --- SKILL.md | 1 + assets/animations.jsx | 8 + references/animation-best-practices.md | 436 +++++++++++++++++++++++++ references/animations.md | 9 +- 4 files changed, 451 insertions(+), 3 deletions(-) create mode 100644 references/animation-best-practices.md diff --git a/SKILL.md b/SKILL.md index 677b9ea..a73a143 100644 --- a/SKILL.md +++ b/SKILL.md @@ -728,6 +728,7 @@ Screen 组件接 callback props（`onEnter`、`onClose`、`onTabChange`、`onOpe | 做幻灯片 | `references/slide-decks.md` + `assets/deck_stage.js` | | 导出可编辑 PPTX（html2pptx 4 条硬约束） | `references/editable-pptx.md` + `scripts/html2pptx.js` | | 做动画/motion（**先读 pitfalls**）| `references/animation-pitfalls.md` + `references/animations.md` + `assets/animations.jsx` | +| **动画的正向设计语法**（Anthropic 级叙事/运动/节奏/表达风格）| `references/animation-best-practices.md`（5 段叙事+Expo easing+运动语言 8 条+3 种场景配方）| | 做Tweaks实时调参 | `references/tweaks-system.md` | | 没有design context怎么办 | `references/design-context.md`（薄 fallback） 或 `references/design-styles.md`（厚 fallback：20 种设计哲学详细库） | | **需求模糊要推荐风格方向** | `references/design-styles.md`（20 种风格+AI prompt 模板）+ `assets/showcases/INDEX.md`（24 个预制样例） | diff --git a/assets/animations.jsx b/assets/animations.jsx index 76134f2..8558918 100644 --- a/assets/animations.jsx +++ b/assets/animations.jsx @@ -35,6 +35,14 @@ easeIn: t => t * t, easeOut: t => 1 - (1 - t) * (1 - t), easeInOut: t => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2, + // expoOut: Anthropic-level 主 easing (cubic-bezier(0.16, 1, 0.3, 1)) + // 迅速启动 + 缓慢刹车，给数字元素物理重量感 + expoOut: t => t === 1 ? 1 : 1 - Math.pow(2, -10 * t), + // overshoot: 带弹性的 toggle/按钮弹出 (cubic-bezier(0.34, 1.56, 0.64, 1)) + overshoot: t => { + const c1 = 1.70158, c3 = c1 + 1; + return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); + }, spring: t => { const c = (2 * Math.PI) / 3; return t === 0 ? 0 : t === 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c) + 1; diff --git a/references/animation-best-practices.md b/references/animation-best-practices.md new file mode 100644 index 0000000..11c5743 --- /dev/null +++ b/references/animation-best-practices.md @@ -0,0 +1,436 @@ +# Animation Best Practices · 正向动画设计语法 + +> 基于 Anthropic 官方三支产品动画（Claude Design / Claude Code Desktop / Claude for Word） +> 的深度拆解，提炼出的"Anthropic 级"动画设计规则。 +> +> 配套 `animation-pitfalls.md`（避坑清单）使用——本文件是「**应该这样做**」， +> pitfalls 是「**不要这样做**」，两者正交，都要读。 +> +> **约束声明**：本文件只收录**运动逻辑和表达风格**，**不引入任何品牌色具体色值**。 +> 色彩决策走 §1.a 核心资产协议（从品牌 spec 抽取）或「设计方向顾问」 +> （20 种哲学各自的配色方案）。本 reference 讨论的是「**怎么动**」，不是「**什么色**」。 + +--- + +## 核心哲学 · 动画是物理学，不是动画曲线 + +大多数 AI 生成动画有廉价感的根源是——**它们表现得像「数字」不是「物体」**。 +真实世界的物体有质量、有惯性、有弹性、会溢出。Anthropic 三支片子的「高级感」根源， +就在于给数字元素一套**物理世界的运动规则**。 + +这套规则有 3 个层次： + +1. **叙事节奏层**：Slow-Fast-Boom-Stop 的时间分配 +2. **运动曲线层**：Expo Out / Overshoot / Spring，拒绝 linear +3. **表达语言层**：展示过程、鼠标弧线、Logo 形变收束 + +--- + +## 1. 叙事节奏 · Slow-Fast-Boom-Stop 5 段结构 + +Anthropic 三支片子无一例外遵循这个结构： + +| 段 | 占比 | 节奏 | 作用 | +|---|---|---|---| +| **S1 触发** | ~15% | 慢 | 给人类反应时间，建立真实感 | +| **S2 生成** | ~15% | 中 | 视觉惊艳点出现 | +| **S3 过程** | ~40% | 快 | 展示可控性/密度/细节 | +| **S4 爆发** | ~20% | Boom | 镜头拉远/3D pop-out/多面板涌现 | +| **S5 落幅** | ~10% | 静 | 品牌 Logo + 戛然而止 | + +**具体时长映射**（15 秒动画为例）： +S1 触发 2s · S2 生成 2s · S3 过程 6s · S4 爆发 3s · S5 落幅 2s + +**禁止做的事**： +- ❌ 均匀节奏（每秒信息密度一样）— 观众疲劳 +- ❌ 持续高密度 — 无峰值无记忆点 +- ❌ 渐弱收尾（fade out 到透明）— 应该**戛然而止** + +**自检**：用纸笔画 5 个 thumbnail，每个代表一段的高潮画面。如果 5 张图差别不大， +说明节奏没做出来。 + +--- + +## 2. Easing 哲学 · 拒绝 linear，拥抱物理 + +Anthropic 三支片子的所有动效都用带「阻尼感」的贝塞尔曲线。默认的 cubic easeOut +（`1-(1-t)³`）**不够锐**——起步不够快、停顿不够稳。 + +### 三个核心 Easing（animations.jsx 已内置） + +```js +// 1. Expo Out · 迅速启动缓慢刹车（最常用，默认主 easing） +// 对应 CSS: cubic-bezier(0.16, 1, 0.3, 1) +Easing.expoOut(t) // = t === 1 ? 1 : 1 - Math.pow(2, -10 * t) + +// 2. Overshoot · 带弹性的 toggle/按钮弹出 +// 对应 CSS: cubic-bezier(0.34, 1.56, 0.64, 1) +Easing.overshoot(t) + +// 3. Spring 物理 · 几何体归位、自然落位 +Easing.spring(t) +``` + +### 用法映射 + +| 场景 | 用哪个 Easing | +|---|---| +| 卡片 rise-in / 面板入场 / Terminal fade / focus overlay | **`expoOut`**（主 easing，最常用） | +| Toggle 切换 / 按钮弹出 / 强调交互 | `overshoot` | +| Preview 几何体归位 / 物理落位 / UI 元素抖弹 | `spring` | +| 持续运动（如鼠标轨迹插值） | `easeInOut`（保留对称性） | + +### 反直觉洞察 + +大多数产品宣传片的动画**太快太硬**。`linear` 让数字元素像机器，`easeOut` 是基础分， +`expoOut` 才是「高级感」的技术根源——它给数字元素一种**物理世界的重量感**。 + +--- + +## 3. 运动语言 · 8 条共性原则 + +### 3.1 底色不用纯黑纯白 + +Anthropic 三支片子没有一支用 `#FFFFFF` 或 `#000000` 做主底色。**带色温的中性色** +（或暖或冷）有"纸张 / 画布 / 桌面"的物质感，削弱机器感。 + +**具体色值决策**走 §1.a 核心资产协议（从品牌 spec 抽取）或「设计方向顾问」 +（20 种哲学各自的底色方案）。本 reference 不给具体色值——那是**品牌决策**，不是运动规则。 + +### 3.2 Easing 绝不是 linear + +见 §2。 + +### 3.3 Slow-Fast-Boom-Stop 叙事 + +见 §1。 + +### 3.4 展示「过程」而非「魔法结果」 + +- Claude Design 展示 tweak 参数、拖滑块（不是一键生成完美结果） +- Claude Code 展示代码报错 + AI 修复（不是一次成功） +- Claude for Word 展示 Redline 红删绿增的修改过程（不是直接给最终稿） + +**共同潜台词**：产品是**协作者、结对工程师、资深编辑**——不是一键魔术师。 +这精准打击专业用户对「可控性」和「真实性」的痛点。 + +**反 AI slop**：AI 默认会做「魔法一键成功」的动画（一键生成 → 完美结果）， +这是通用公约数。**反过来做**——展示过程、展示 tweak、展示 bug 和修复—— +是品牌识别度的来源。 + +### 3.5 鼠标轨迹人工绘制（弧线 + Perlin Noise） + +真人鼠标运动不是直线，是「起步加速 → 弧线 → 减速修正 → 点击」。 +AI 直接直线插值的鼠标轨迹**有潜意识排斥感**。 + +```js +// 二次贝塞尔曲线插值（起点 → 控制点 → 终点） +function bezierQuadratic(p0, p1, p2, t) { + const x = (1-t)*(1-t)*p0[0] + 2*(1-t)*t*p1[0] + t*t*p2[0]; + const y = (1-t)*(1-t)*p0[1] + 2*(1-t)*t*p1[1] + t*t*p2[1]; + return [x, y]; +} + +// 路径：起点 → 偏离中点 → 终点（做弧线） +const path = [[100, 100], [targetX - 200, targetY + 80], [targetX, targetY]]; + +// 再叠加极小的 Perlin Noise（±2px）制造「手抖」 +const jitterX = (simpleNoise(t * 10) - 0.5) * 4; +const jitterY = (simpleNoise(t * 10 + 100) - 0.5) * 4; +``` + +### 3.6 Logo「形变收束」(Morph) + +Anthropic 三支片子的 Logo 出场**都不是简单 fade-in**，是**前一个视觉元素形变而来**。 + +**共同模式**：倒数 1-2 秒做 Morph / Rotate / Converge，让整个叙事在品牌点上「坍缩」。 + +**低成本实现**（不用真 morph）： +让前一个视觉元素「坍缩」成一个色块（scale → 0.1，向中心 translate）， +色块再「膨胀」展开成 wordmark。过渡用 150ms 快切 + motion blur +（`filter: blur(6px)` → `0`）。 + +```js + + {/* 坍缩：前一个元素 scale 0.1，opacity 保持，filter blur 增加 */} + const scale = interpolate(t, [0, 0.5], [1, 0.1], Easing.expoOut); + const blur = interpolate(t, [0, 0.5], [0, 6]); + + + {/* 膨胀：Logo 从色块中心 scale 0.1 → 1，blur 6 → 0 */} + const scale = interpolate(t, [0, 0.6], [0.1, 1], Easing.overshoot); + const blur = interpolate(t, [0, 0.6], [6, 0]); + +``` + +### 3.7 衬线 + 无衬线双字体 + +- **品牌 / 旁白**：衬线（有「学术感 / 出版物感 / 品位」） +- **UI / 代码 / 数据**：无衬线 + 等宽 + +**单一字体都是不对的**。衬线给「品位」，无衬线给「功能」。 + +具体字体选择走品牌 spec（brand-spec.md 的 Display / Body / Mono 三栈）或设计方向 +顾问的 20 种哲学。本 reference 不给具体字体——那是**品牌决策**。 + +### 3.8 焦点切换 = 背景减弱 + 前景锐化 + Flash 引导 + +焦点切换**不只是**降低 opacity。完整配方是： + +```js +// 非焦点元素的滤镜组合 +tile.style.filter = ` + brightness(${1 - 0.5 * focusIntensity}) + saturate(${1 - 0.3 * focusIntensity}) + blur(${focusIntensity * 4}px) // ← 关键：加 blur 才真的"退后" +`; +tile.style.opacity = 0.4 + 0.6 * (1 - focusIntensity); + +// 焦点完成后在焦点位置做 150ms Flash highlight 引导视线回流 +focusOverlay.animate([ + { background: 'rgba(255,255,255,0.3)' }, + { background: 'rgba(255,255,255,0)' } +], { duration: 150, easing: 'ease-out' }); +``` + +**为什么 blur 是必须的**：只靠 opacity + brightness，焦点外的元素还是「锐利」的， +视觉上没有「退到后景」的效果。blur(4-8px) 让非焦点真的退一层景深。 + +--- + +## 4. 具体运动技巧（可直接抄的代码片段） + +### 4.1 FLIP / Shared Element Transition + +按钮「膨胀」成输入框，**不是**按钮消失 + 新面板出现。核心是**同一个 DOM 元素**在 +两种状态间 transition，不是两个元素 cross-fade。 + +```jsx +// 用 Framer Motion layoutId +Design +// ↓ 点击后同 layoutId + + + +``` + +原生实现参考 https://aerotwist.com/blog/flip-your-animations/ + +### 4.2「呼吸式」展开（width→height） + +面板展开**不是同时拉 width 和 height**，而是： +- 前 40% 时间：只拉 width（保持 height 小） +- 后 60% 时间：width 保持，撑 height + +这模拟物理世界「先展开，再注水」的感觉。 + +```js +const widthT = interpolate(t, [0, 0.4], [0, 1], Easing.expoOut); +const heightT = interpolate(t, [0.3, 1], [0, 1], Easing.expoOut); +style.width = `${widthT * targetW}px`; +style.height = `${heightT * targetH}px`; +``` + +### 4.3 Staggered Fade-up（30ms stagger） + +表格行、卡片列、列表项入场时，**每个元素延迟 30ms**，`translateY` 从 10px 回到 0。 + +```js +rows.forEach((row, i) => { + const localT = Math.max(0, t - i * 0.03); // 30ms stagger + row.style.opacity = interpolate(localT, [0, 0.3], [0, 1], Easing.expoOut); + row.style.transform = `translateY(${ + interpolate(localT, [0, 0.3], [10, 0], Easing.expoOut) + }px)`; +}); +``` + +### 4.4 非线性呼吸 · 关键结果前悬停 0.5s + +机器执行快且连贯，但**关键结果出现前悬停 0.5 秒**，让观众大脑有反应时间。 + +```jsx +// 典型场景：AI 生成完 → 悬停 0.5s → 结果浮现 + + {/* 0.5s 停顿——什么也不动，让观众盯着加载状态 */} + + + + + +``` + +**反例**：AI 生成完立刻无缝切到结果——观众没反应时间，信息流失。 + +### 4.5 Chunk Reveal · 模拟 token 流式 + +AI 生成文字**不要用 `setInterval` 单字符蹦出**（像老电影字幕），要用 **chunk reveal** +——一次出现 2-5 个字符，间隔不规律，模拟真实 token 流式输出。 + +```js +// 分 chunk 而不是分字符 +const chunks = text.split(/(\s+|,\s*|\.\s*|;\s*)/); // 按词 + 标点切 +let i = 0; +function reveal() { + if (i >= chunks.length) return; + element.textContent += chunks[i++]; + const delay = 40 + Math.random() * 80; // 不规律 40-120ms + setTimeout(reveal, delay); +} +reveal(); +``` + +### 4.6 Anticipation → Action → Follow-through + +Disney 12 原则中的 3 条。Anthropic 用得很显式： + +- **Anticipation**（预备）：动作开始前有小反向动作（按钮轻微缩小再弹出） +- **Action**（动作）：主要动作本身 +- **Follow-through**（跟随）：动作结束后有余韵（卡片落位后轻微 bounce） + +```js +// 卡片入场的完整三段 +const anticip = interpolate(t, [0, 0.2], [1, 0.95], Easing.easeIn); // 预备 +const action = interpolate(t, [0.2, 0.7], [0.95, 1.05], Easing.expoOut); // 主动 +const settle = interpolate(t, [0.7, 1], [1.05, 1], Easing.spring); // 回弹 +// 最终 scale = 三段乘积或分段应用 +``` + +**反例**：只有 Action 没有 Anticipation + Follow-through 的动画，像「PowerPoint 动画」。 + +### 4.7 3D Perspective + translateZ 分层 + +想要「倾斜 3D + 悬浮卡片」的气质，给容器加 perspective，给单个元素不同的 translateZ： + +```css +.stage-wrap { + perspective: 2400px; + perspective-origin: 50% 30%; /* 视线略俯视 */ +} +.card-grid { + transform-style: preserve-3d; + transform: rotateX(8deg) rotateY(-4deg); /* 黄金比例 */ +} +.card:nth-child(3n) { transform: translateZ(30px); } +.card:nth-child(5n) { transform: translateZ(-20px); } +.card:nth-child(7n) { transform: translateZ(60px); } +``` + +**为什么 rotateX 8° / rotateY -4° 是黄金比例**： +- 大于 10° → 元素扭曲感过强，看起来像「倒下」 +- 小于 5° → 像「错切」而不是「透视」 +- 8° × -4° 的非对称比例模拟「镜头在桌面左上角俯视」的 natural angle + +### 4.8 斜向 Pan · 同时动 XY + +镜头运动不是纯上下或纯左右，而是**同时动 XY** 模拟斜向移动： + +```js +const panX = Math.sin(flowT * 0.22) * 40; +const panY = Math.sin(flowT * 0.35) * 30; +stage.style.transform = ` + translate(-50%, -50%) + rotateX(8deg) rotateY(-4deg) + translate3d(${panX}px, ${panY}px, 0) +`; +``` + +**关键**：X 和 Y 的频率不同（0.22 vs 0.35），避免 Lissajous 循环规则化。 + +--- + +## 5. 场景配方（三种叙事模板） + +参考材料里三支视频对应三种产品性格。**选一种最贴合你的产品**，不要混搭。 + +### 配方 A · Apple Keynote 戏剧式（Claude Design 类） + +**适合**：大版本发布、hero 动画、视觉惊艳优先 +**节奏**：Slow-Fast-Boom-Stop 强弧线 +**Easing**：全程 `expoOut` + 少量 `overshoot` +**SFX 密度**：高（~0.4/s），SFX 音高调到 BGM 音阶 +**BGM**：IDM / 极简科技电子，冷静+精密 +**收束**：镜头急拉远 → drop → Logo 形变 → 空灵单音 → 戛然而止 + +### 配方 B · 一镜到底工具式（Claude Code 类） + +**适合**：开发者工具、生产力 App、心流场景 +**节奏**：持续稳定 flow，没有明显峰值 +**Easing**：`spring` 物理 + `expoOut` +**SFX 密度**：**0**（纯靠 BGM 驱动剪辑节奏） +**BGM**：Lo-fi Hip-hop / Boom-bap，85-90 BPM +**核心技巧**：关键 UI 动作踩在 BGM kick/snare 瞬态上——「**音乐律动即交互音效**」 + +### 配方 C · 办公效率叙事式（Claude for Word 类） + +**适合**：企业软件、文档/表格/日历类、专业感优先 +**节奏**：多 scene 硬切 + Dolly In/Out +**Easing**：`overshoot`（toggle）+ `expoOut`（面板） +**SFX 密度**：中（~0.3/s），UI click 为主 +**BGM**：Jazzy Instrumental，小调，BPM 90-95 +**核心亮点**：某一幕必有「全片高光」—— 3D pop-out / 脱离平面浮起 + +--- + +## 6. 反例 · 这样做就是 AI slop + +| 反 pattern | 为什么错 | 正确做法 | +|---|---|---| +| `transition: all 0.3s ease` | `ease` 是 linear 的亲戚，所有元素同速 | 用 `expoOut` + 分元素 stagger | +| 所有入场都 `opacity 0→1` | 没有运动方向感 | 配合 `translateY 10→0` + Anticipation | +| Logo 淡入 | 没有叙事收束感 | Morph / Converge / 坍缩-展开 | +| 鼠标直线移动 | 潜意识机器感 | 贝塞尔弧线 + Perlin Noise | +| 打字单字蹦出（setInterval） | 像老电影字幕 | Chunk Reveal，随机间隔 | +| 关键结果无悬停 | 观众没反应时间 | 结果前 0.5s 悬停 | +| 焦点切换只改 opacity | 非焦点元素还锐利 | opacity + brightness + **blur** | +| 纯黑底 / 纯白底 | 赛博感 / 反光疲劳 | 带色温的中性色（走品牌 spec） | +| 所有动画同样快 | 无节奏 | Slow-Fast-Boom-Stop | +| Fade out 收尾 | 无决定感 | 戛然而止（hold 最后一帧） | + +--- + +## 7. 自检清单（动画交付前 60 秒） + +- [ ] 叙事结构是 Slow-Fast-Boom-Stop，不是均匀节奏？ +- [ ] 默认 easing 是 `expoOut`，不是 `easeOut` 或 `linear`？ +- [ ] Toggle / 按钮弹出用了 `overshoot`？ +- [ ] 卡片 / 列表入场有 30ms stagger？ +- [ ] 关键结果前有 0.5s 悬停？ +- [ ] 打字用 Chunk Reveal，不是 setInterval 单字？ +- [ ] 焦点切换加了 blur（不只是 opacity）？ +- [ ] Logo 是形变收束（Morph），不是淡入？ +- [ ] 底色不是纯黑 / 纯白（带色温）？ +- [ ] 文字有衬线 + 无衬线层次？ +- [ ] 收尾是戛然而止，不是渐弱？ +- [ ] （有鼠标的话）鼠标轨迹是弧线，不是直线？ +- [ ] SFX 密度符合产品性格（见配方 A/B/C）？ +- [ ] BGM 和 SFX 有 6-8dB 响度差？（见 `audio-design-rules.md`） + +--- + +## 8. 与其他 reference 的关系 + +| reference | 定位 | 关系 | +|---|---|---| +| `animation-pitfalls.md` | 技术避坑（16 条） | 「**不要这样做**」· 本文件的反面 | +| `animations.md` | Stage/Sprite 引擎用法 | 动画**怎么写**的基础 | +| `audio-design-rules.md` | 双轨制音频规则 | 动画**配音频**的规则 | +| `sfx-library.md` | 37 个 SFX 清单 | 音效**素材库** | +| `apple-gallery-showcase.md` | Apple 画廊展示风格 | 一种特定运动风格的专题 | +| **本文件** | 正向运动设计语法 | 「**应该这样做**」 | + +**调用顺序**： +1. 先看 SKILL.md 工作流程 Step 3 的位置四问（决定叙事角色和视觉温度） +2. 选定方向后读本文件确定**运动语言**（配方 A/B/C） +3. 写代码时参考 `animations.md` 和 `animation-pitfalls.md` +4. 导出视频时走 `audio-design-rules.md` + `sfx-library.md` + +--- + +## 附录 · 本文件素材来源 + +- Anthropic 官方动画拆解：花叔项目目录的 `参考动画/BEST-PRACTICES.md` +- Anthropic 音频拆解：同目录 `AUDIO-BEST-PRACTICES.md` +- 3 支参考视频：`ref-{1,2,3}.mp4` + 对应 `gemini-ref-*.md` / `audio-ref-*.md` +- **严格过滤**：本 reference 不收录任何具体品牌色值、字体名、产品名。 + 色彩/字体决策走 §1.a 核心资产协议或 20 种设计哲学。 diff --git a/references/animations.md b/references/animations.md index 0fc73cd..fd323c7 100644 --- a/references/animations.md +++ b/references/animations.md @@ -153,12 +153,15 @@ function Scene() { |--------|------|------| | `linear` | 匀速 | 滚动字幕、持续动画 | | `easeIn` | 慢→快 | 退场消失 | -| `easeOut` | 快→慢 | 入场出现（最常用） | +| `easeOut` | 快→慢 | 入场出现 | | `easeInOut` | 慢→快→慢 | 位置变化 | -| `spring` | 弹簧 | 交互反馈 | +| **`expoOut`** ⭐ | **指数缓出** | **Anthropic 级主 easing**（物理重量感）| +| **`overshoot`** ⭐ | **弹性回弹** | **Toggle / 按钮弹出 / 强调交互** | +| `spring` | 弹簧 | 交互反馈、几何体归位 | | `anticipation` | 先反向再正向 | 强调动作 | -**入场用easeOut，出场用easeIn**——这是动画的基础规律。 +**默认主 easing 用 `expoOut`**（不是 `easeOut`）—— 见 `animation-best-practices.md` §2。 +入场用 `expoOut`、出场用 `easeIn`、toggle 用 `overshoot`——Anthropic 级动画的基础规律。 ## 节奏和时长指南