企业官网建设流程全解析

torph 是一个零依赖的动画文本组件 TextMorph，支持 React、Vue、Svelte 和原生 JavaScript。它的ease属性除了支持普通 CSS 缓动曲线，还接受一组物理弹簧参数，通过spring easing（弹簧缓动）让文字切换自带真实的"弹跳感"。本文将带你读懂stiffness、damping、mass、precision这 4 个参数，并给出一套可以直接抄走的调优清单，几分钟就能调出自然的动效。✨

什么是 torph 的弹簧缓动？

普通缓动曲线（如ease-out）是"预设"的速度曲线，而弹簧缓动模拟的是真实的物理过程：一根弹簧拉离平衡点后，会加速冲向目标、冲过头、再回弹、再收敛——这种"冲过头再落回"正是弹跳感的来源。

torph 的做法很巧妙：它并不用 JavaScript 逐帧驱动动画，而是把弹簧物理公式离散采样成一条linear(...)曲线交给浏览器执行，因此动画全程跑在合成器上，性能开销极低。核心实现在 spring.ts，参数类型SpringParams也从 src/index.ts 对外导出。

使用时只需把ease从字符串换成对象：

import { TextMorph } from "torph/react"; <TextMorph ease={{ stiffness: 200, damping: 20 }}>Hello world</TextMorph>;

📖 完整 API 说明见 packages/torph/README.md。

上手前必须看懂的 4 个参数

默认值定义在 spring.ts。

弹跳感由谁决定：阻尼比 zeta

torph 内部先用两个物理量描述这根弹簧（见 spring.ts）：

• 固有频率omega0 = sqrt(stiffness / mass)—— 决定"快不快"
• 阻尼比zeta = damping / (2 * sqrt(stiffness * mass))—— 决定"弹不弹"

zeta 是弹跳感的总开关，调参时心里装着它就不会跑偏：

对照几个常用组合，感受一下参数的影响：

官方 playground 内置的 spring 预设也用的是stiffness: 200, damping: 20, mass: 1，参考 config.ts。

3 步调出你要的弹跳感

第 1 步：先定"性格"。想要活泼就选 zeta ≈ 0.4 ~ 0.6；想要克制高级感就选 zeta ≈ 0.7 ~ 0.9；要干脆不弹就压到 zeta = 1。

第 2 步：用stiffness定速度。常用区间是 50 ~ 400：数值越大动画越快、越干脆。不确定时从 100（默认）或 200（官方示例）起步。

第 3 步：用damping微调回弹。保持stiffness不变，每提高damping一档，回弹幅度就收一点——这是手感调优时最常用的一根旋钮。mass平时保持 1 即可，只有想营造"厚重感"时再加大到 2 ~ 4。

💡 经验法则：先调 stiffness 定节奏，再调 damping 定弹性，mass和precision基本不用动。

动画时长为什么不用你操心？

给ease传对象后，duration由物理参数自动推导：torph 以 1ms 为步长对弹簧曲线做数值采样，当位移连续 0.1 秒都落在precision容差之内，就判定"已稳定"，从而算出动画时长（逻辑见 computeDuration）。这带来两个实用结论：

• 不用手动设置duration：传弹簧参数时它会被自动计算的时长取代，硬设也没有意义。
• precision控制收尾：默认0.001足够；想让它更早收尾（比如高频更新的数字滚动场景）可以适当放大到0.01，反之想要收尾更"坐实"就调小。

另外，同一组参数只计算一次——torph 用Map缓存了换算结果（spring.ts），重复渲染不会重复采样，可以放心用在列表、计数器等高频场景。

常见问题速查 🎯

Q：文字完全不弹，像普通 ease-out？A：damping偏大导致 zeta ≥ 1。试着把damping降到2 * sqrt(stiffness * mass)以内。

Q：弹跳很"碎"、来回晃？A：zeta 太小。把damping往上调，让 zeta 进入 0.6 ~ 0.8 的甜区。

Q：动画感觉慢吞吞？A：优先调大stiffness，其次检查mass是否被设大了。

Q：对性能有顾虑吗？A：最终落地是一条 CSSlinear(...)缓动曲线，由浏览器合成器执行，没有逐帧 JS 计算；参数换算还带缓存，几乎零开销。

小结

torph 的 spring easing 把"调手感"从玄学变成了算术：

1. 用stiffness定节奏（快慢）；
2. 用damping定弹性（弹不弹、弹几回）；
3. 心里装着 zeta：0.7 左右最接近"自然的弹跳感"；
4. precision与duration交给物理模型自动结算。

从{ stiffness: 200, damping: 20 }起步，按自己的品牌气质微调，就能在 torph 的 TextMorph 上做出既专业又不过度动画的文本过渡效果。🚀