【免费下载链接】torphDependency-free animated text component.项目地址https://gitcode.com/gh_mirrors/to/torph点击查看免费下载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 个参数参数类型默认值直觉理解stiffnessnumber100弹簧硬度越大冲得越快动效越脆dampingnumber10阻尼越大回弹越小动效越稳massnumber1质量越大越沉动画更慢precisionnumber0.001收敛容差越小动画收尾越精确但越晚结束默认值定义在 spring.ts。弹跳感由谁决定阻尼比 zetatorph 内部先用两个物理量描述这根弹簧见 spring.ts固有频率omega0 sqrt(stiffness / mass)—— 决定快不快阻尼比zeta damping / (2 * sqrt(stiffness * mass))—— 决定弹不弹zeta 是弹跳感的总开关调参时心里装着它就不会跑偏zeta 区间状态视觉感受0 ~ 0.5欠阻尼强明显来回弹跳活泼0.5 ~ 0.9欠阻尼弱轻微冲过头再落回最自然 1临界阻尼不冲过头、收敛最快干净利落 1过阻尼完全不弹像被蜂蜜裹住容易显拖沓对照几个常用组合感受一下参数的影响参数组合zeta 约等于效果{ stiffness: 100, damping: 10 }默认0.50弹跳明显俏皮{ stiffness: 200, damping: 20 }0.71轻弹后稳稳落地官方示例的自然配方 ✅{ stiffness: 300, damping: 30 }0.87几乎不可见的微冲偏沉稳{ stiffness: 100, damping: 20 }1.00临界阻尼无弹跳、最快到位官方 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-outAdamping偏大导致 zeta ≥ 1。试着把damping降到2 * sqrt(stiffness * mass)以内。Q弹跳很碎、来回晃Azeta 太小。把damping往上调让 zeta 进入 0.6 ~ 0.8 的甜区。Q动画感觉慢吞吞A优先调大stiffness其次检查mass是否被设大了。Q对性能有顾虑吗A最终落地是一条 CSSlinear(...)缓动曲线由浏览器合成器执行没有逐帧 JS 计算参数换算还带缓存几乎零开销。小结torph 的 spring easing 把调手感从玄学变成了算术用stiffness定节奏快慢用damping定弹性弹不弹、弹几回心里装着 zeta0.7 左右最接近自然的弹跳感precision与duration交给物理模型自动结算。从{ stiffness: 200, damping: 20 }起步按自己的品牌气质微调就能在 torph 的 TextMorph 上做出既专业又不过度动画的文本过渡效果。赞分享【免费下载链接】torphDependency-free animated text component.项目地址https://gitcode.com/gh_mirrors/to/torph点击查看免费下载相关推荐Remotion spring() 动画实战指南用弹簧物理参数驱动自然、有机的运动Remotion spring 动画实战指南用弹簧物理参数驱动自然、有机的运动 spring 是 Remotion 内置的物理动画函数它模拟阻尼弹簧振荡器音视频AI 应用前端5分钟掌握ViewAnimator弹簧动画调校从参数到自然物理动效的完整指南5分钟掌握ViewAnimator弹簧动画调校从参数到自然物理动效的完整指南 ViewAnimator是一款强大的iOS动画库通过简洁的链式API让开发者轻移动开发G-Helper单文件搞定华硕笔记本风扇、功耗与电池控制5 步上手指南G Helper单文件搞定华硕笔记本风扇、功耗与电池控制5 步上手指南 风扇吵、性能肉官方的 Armoury Crate 却在后台吃掉几百 MB 内存。G桌面应用系统编程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考