morphicons弹簧物理全解damped harmonic oscillator、三种预设与可中断动画——连点图标从不跳帧的秘密【免费下载链接】morphiconsAny icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip.项目地址: https://gitcode.com/gh_mirrors/mo/morphiconsmorphicons 是一款零依赖的图标变形动画库核心卖点是让任意图标之间丝滑互变而驱动这一切的是一台弹簧物理引擎damped harmonic oscillator阻尼谐振子。这篇文章用大白话拆解它的弹簧引擎、三种预设smooth / snappy / bouncy和可中断动画设计——这正是你连点图标也从不跳帧的秘密。 morphicons 是做什么的一句话icon属性一变图标就以弹簧动力学的方式变形过去而不是生硬地换图。汉堡菜单变关闭叉、播放变暂停中间过程圆润、有物理感而且 Lucide、Tabler、Heroicons 等任何描边图标都能互变。实现源码在 src/core/纯函数、不碰 DOMgzip 后约 7 KB。 弹簧物理引擎一个阻尼谐振子在驱动进度条传统动画库用缓动函数easeInOut 之类直接映射时间到进度打断时容易闪跳。morphicons 换了一种思路把动画进度 x 当成一颗被弹簧拉着的小球。它的运动方程写在 spring.ts 的文件头注释里形式为加速度 ẍ k·(1−x) − c·ẋ用生活化的比喻kstiffness刚度弹簧的拉力。x 离目标 1 越远被拉回来越猛——它决定动画快不快。cdamping阻尼相当于空气阻力。它让小球停下来、不来回弹个没完——它决定动画稳不稳。x变形进度从 0源图标走向 1目标图标。有了这条二阶微分方程图标形变就变成了一道标准物理题。每帧求解它的方式叫半隐式欧拉积分先更新速度再用新速度更新位置且把每一帧切成1/240 秒的固定子步一帧最多 16 个子步见 spring.ts 的 step 方法。这样做有两个好处数值稳定子步足够小弹簧再硬也不会发散帧率无关后台标签页、掉帧时dt 会被钳制在 0.1 秒以内dom/index.ts 的调度器动画只会变慢、不会炸掉。⚡ 三种弹簧预设怎么选smooth、snappy、bouncy预设定义在 SPRING_PRESETS每个预设就是一对 (k, c)物理上用阻尼比 ζ c / 2√k来刻画性格预设stiffness (k)damping (c)阻尼比 ζ手感smooth170261.00临界阻尼稳稳到位零过冲最正经⚡snappy默认420300.73又快又利索带一点点过冲bouncy300140.40明显回弹俏皮活泼几个实用结论不传 spring 时默认就是 snappyresolveSpring 以它作为回退值快而不晃是设计师选的安全默认。ζ 1 意味着临界阻尼理论上正好停到目标不超调smooth的 ζ ≈ 1.00所以它永远不会弹过头。ζ 1 的过冲是特性不是 bug弹簧的 x 会短暂超过 1插值器 interpPolar 对 t 1 天然做外推图标会冲过终点再收回——这就是bouncy的俏皮感来源。想要专属手感可以传自定义参数例如m.morphTo(X, { stiffness: 800, damping: 20 })完全接管这对 (k, c)。 可中断动画连点图标为什么不跳帧连点图标从不跳帧是本文的题眼由三个设计共同保证1️⃣ 速度继承start() 只重置位置不重置速度看 Spring.start()新目标启动时x 被拉回 0重新开始走进度但速度 v 被完整保留只钳制在 ±14 防止失控。物理直觉上小球被弹到新位置却带着原来的冲量继续飞。速度不突变画面自然不突变——这是不跳帧的第一道保险。2️⃣ 中途重规划从正在飞的形状继续飞飞行中再次调用morphTo时createMorph 的retarget会调用 snapshot()把当前已渲染的中间形状当作新的起点与目标重新做对齐规划Procrustes 极坐标插值。由于 morphicons 的 plan 本来就接受任意采样点列表而不只是标准图标从半成品的形状出发几乎是免费的。官方测试 test/dom.test.ts 精确断言了这一点中途转向后第一帧渲染的形状与转向前逐字节一致绝无闪跳。3️⃣ 静止判定与归位收尾每一帧 step 都会检查收敛条件位置误差 |1−x| 0.001 且速度 |v| 0.02 才算落稳。落稳后执行 settle()直接把d属性换成目标的规范路径抹掉最后一丝浮点残差停在精确图标上而不是差一微米的近似释放 plan 与输出缓冲区取消 rAF——静止时零 CPU 开销。此外全页所有图标实例共享同一个 requestAnimationFrame 循环单例调度器图标再多也不叠加动画时钟。 三种模式各管一件事理解了弹簧API 就很好记了Morph 接口方法干什么用在哪morphTo(icon, spring?)弹簧动画过去可中断点击切换90% 场景set(icon)直接跳变不播动画需要瞬时同步时seek(icon, t)冻结在进度 t不走弹簧手势拖拽、滚动联动MorphIcon icon{open ? X : Menu} springbouncy /React/Vue/Svelte/React Native/Astro 五个绑定共用同一套 controller 逻辑行为完全一致。另外它默认无视系统减少动态效果设置图标形变小而短属于可接受的微动效需要遵循系统偏好时传reducedMotionuser即可。 想深入从这里读起弹簧引擎本体不到 50 行src/core/spring.ts极坐标插值与过冲外推src/core/interpolate.ts驱动层调度器、快照、收敛归位src/dom/index.ts可中断行为的测试锚点test/dom.test.ts完整 API 与架构说明README.md小结morphicons 的弹簧物理 一条阻尼谐振子方程 240Hz 子步积分三种预设 三组精心调校的 (k, c)而不跳帧靠的是速度继承、中间形状重规划和精确的收敛归位。把这三件事读懂你就理解了它的全部手感。✨【免费下载链接】morphiconsAny icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip.项目地址: https://gitcode.com/gh_mirrors/mo/morphicons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考