为什么我的Spring动画在结束时会有明显的跳跃？

开发者艺晗提问于 2026-01-30 14:41:32 阅读 93

交互

我在用GSAP的spring缓动做按钮悬停动画时，发现元素在动画结束时总会突然跳回几像素，明明计算的数值是正确的啊。我试过调整stiffness和damping参数，但问题依旧存在…

代码是这样的：gsap.to(button, {duration: 1, x: 50, ease: "power1.out", easeParams: [spring(18, 7)]})。当我把ease改成quad的时候就没有这个问题，但需要保持弹簧效果…

后来我试着用控制台记录动画每一帧的位置，发现最后0.1秒的位置突然从50px跳到48px，这完全不符合预期的物理效果。是不是参数组合有问题？或者spring配置有什么隐藏的限制？

我来解答赞 3 收藏

反馈

2 条解答

迷人的雨涵 Lv1

你那个 spring easing 结束跳跃是因为没设置质量参数，默认是 1，导致系统不稳定。省事的话直接用 GSAP 内置的 elastic 或 back 变体，比如改成 ease: "spring(18, 70, 7, 0)"，最后一个参数是 mass，设成 0.5~1 之间就行。

或者干脆换现成的：

gsap.to(button, { duration: 1, x: 50, ease: "spring.out(18, 70, 7, 0.5)" })

这个配置能稳住结尾，不会跳。

2026-02-11 15:01

Code°保艳 Lv1

你这问题是因为 spring 缓动的物理模型默认没完全静止就结束了动画。最简单的办法是加个 overwrite: true 和 roundProps: "x"，这样能确保最后位置精确。

修改代码如下：

gsap.to(button, {duration: 1, x: 50, ease: "spring(18, 7)", overwrite: true, roundProps: "x"});

如果还跳，就把 duration 稍微调长点，比如 1.2 秒。懒人天才就是这样偷懒解决问题的。

2026-01-30 15:13