Skip to content

Commit b0ab516

Browse files
committed
docs(motion): 量化仪器曲线差并禁两路横跳
1 parent 6268f34 commit b0ab516

2 files changed

Lines changed: 21 additions & 6 deletions

File tree

‎app/scripts/gen-tokens.mjs‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,16 @@ export const DURATION_TOKENS = [
105105
*
106106
* 双基调的两条(规格 §8.3 的两张面;两侧的同源机理见 `src/motion/tone.ts` 的头注):
107107
* · `ease-instrument`(精密仪器 · 有「读数」的界面:采集 / 复习 / 时间轴 / 到期刻度):GSAP 侧是
108-
* `power3.inOut`,而 CSS 没有 ease 族 ⇒ 这里**只能是 bezier 近似**(微小曲线差本批接受、不引入
109-
* 第二套 ease 定义);值取计划 T8 Step 2 的逐字值 `cubic-bezier(0.4, 0, 0.2, 1)`。
108+
* `power3.inOut`,而 CSS 没有 ease 族 ⇒ 这里**只能是 bezier 粗近似**(**不引入第二套 ease 定义**);值取
109+
* 计划 T8 Step 2 的逐字值 `cubic-bezier(0.4, 0, 0.2, 1)`。🔴 与 GSAP `power3.inOut` 的差**不是「微小」**,
110+
* 而是**量化事实**:归一化进度轴上 **maxDiff ≈ 0.409 @ x = 0.40**(CSS 0.6136 vs GSAP 0.2048;
111+
* 出处 = T8+T9 合并评审的独立测量)⇒ 本批**接受该差**,但 🔴 **同一动效不得在 CSS 路与 GSAP 路之间横跳**:
112+
* 一个落点要么全程 CSS transition(`var(--ed-ease-instrument)`)、要么全程 GSAP timeline,**不许**同一处
113+
* 两路混用;**「本批接受该差」不等于可以两路横跳**(混用即出现 0.409 量级的曲线跳变)。
110114
* · `ease-paper`(活的纸 · 有「文字」的界面:笔记 / 会话 / 体系):`power2.out` 的 bezier 近似,
111-
* 与 `engine.ts` 里 `CustomEase.create("ed-paper-bleed", …)` 用**同一组控制点** ⇒ 两侧是同一条曲线。
115+
* 与 `engine.ts` 里 `CustomEase.create("ed-paper-bleed", …)` 用**同一组控制点** `[0.215,0.61,0.355,1]`
116+
* ⇒ 两侧是**同一条曲线**(不是近似):101 点对拍 **maxDiff = 5.26e-4 · drops = 0**(同一台仪器、同一次运行),
117+
* 即「活的纸」族**两路一致**,与 instrument 族的 0.409 形成对照。
112118
* 🔴 两条都**不是回弹**(规格 §8.7 明确不做回弹/弹性):单调不减由 `motion/tone.test.ts` 的 101 点判据
113119
* 钉住 —— 改这里的 `value` 时那条判据会红(y 控制点必须满足 `0 ≤ y1 ≤ y2 ≤ 1`)。
114120
*/

‎app/src/motion/tone.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,18 @@
1010
* @ai-context CSS 侧与 GSAP 侧的**同源机理**:CSS 只有 `cubic-bezier(...)`(真源 = 生成物 `tokens.css` 的
1111
* `--ed-ease-instrument` / `--ed-ease-paper` 两条,由 `scripts/gen-tokens.mjs` 的 `EASING_TOKENS` 渲染),
1212
* GSAP 侧是 `CustomEase.create("ed-paper-bleed", …)`(在 `engine.ts` 注册)——「活的纸」两侧是**同一条**
13-
* bezier(`0.215,0.61,0.355,1`,即 `power2.out` 的 bezier 近似);「精密仪器」两侧只是**近似**
14-
* (CSS 没有 GSAP 的 ease 族,`power3.inOut` 用 `cubic-bezier(0.4,0,0.2,1)` 近似 —— 微小曲线差本批接受,
15-
* 且**不引入第二套 ease 定义**)。两侧共享的**硬性质** = 「不是回弹」(单调不减、无过冲、无二次反方向),
13+
* bezier(`0.215,0.61,0.355,1`,即 `power2.out` 的 bezier 近似);「精密仪器」两侧只是**粗近似**
14+
* (CSS 没有 GSAP 的 ease 族,`power3.inOut` 用 `cubic-bezier(0.4,0,0.2,1)` 近似,且**不引入第二套 ease 定义**)。
15+
* 🔴 **量化**(T8+T9 合并评审的**独立测量**,归一化进度轴上的采样对拍;不是「微小」):
16+
* · `--ed-ease-instrument`(`cubic-bezier(0.4,0,0.2,1)`,CSS 侧)vs GSAP `power3.inOut`:
17+
* **maxDiff ≈ 0.409 @ x = 0.40**(CSS 0.6136 vs GSAP 0.2048)—— 同一 x 上前 40% 的进度差 **41 个百分点**
18+
* (CSS 侧前段快出、GSAP 侧前段慢起);两个值在**同一台仪器、同一次运行**内取得 ⇒ 本批**接受该差**。
19+
* · `--ed-ease-paper` vs GSAP `ed-paper-bleed`(`CustomEase`):控制点均 `[0.215,0.61,0.355,1]` ⇒ **同一条曲线**,
20+
* 101 点对拍 **maxDiff = 5.26e-4 · drops = 0** —— 即「活的纸」族**两路一致**,与 instrument 族 0.409 形成对照。
21+
* 🔴 **下游纪律**:「本批接受该差」**不等于**可以两路横跳 —— **同一动效不得在 CSS 路与 GSAP 路之间横跳**:
22+
* 一个落点的曲线要么全程取 CSS(`transition-timing-function: var(--ed-ease-instrument)`),要么全程取
23+
* GSAP timeline 的 `ease: "power3.inOut"`,**不许**同一处两路混用(否则该处会出现 0.409 量级的曲线跳变)。
24+
* 两侧共享的**硬性质** = 「不是回弹」(单调不减、无过冲、无二次反方向),
1625
* 由 `tone.test.ts` 的 101 点单调性判据钉住 —— 那是本任务最有牙的一条。
1726
*
1827
* 副作用:无 —— 纯数据 + 纯函数,**不 import GSAP**(故本模块可被首屏静态引用,不进 `vendor-gsap` 懒 chunk)。

0 commit comments

Comments
 (0)