Spring动画的阻尼参数怎么调才不抖动？

Mr-爱景提问于 2026-03-01 19:05:22 阅读 50

交互

我用 Framer Motion 做一个弹窗的入场动画，用了 spring 类型，但每次弹出来都会来回抖好几次，特别难受。

试过改 damping 和 stiffness，比如设成 damping: 20, stiffness: 200，但还是有点回弹。有没有经验的朋友说说，这两个参数到底该怎么配才能又快又稳？

这是我的代码：

const modalVariants = {
  hidden: { opacity: 0, scale: 0.8 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      type: 'spring',
      damping: 15,
      stiffness: 300,
      mass: 1
    }
  }
};

JS动画交互设计动画效果

我来解答赞 7 收藏

反馈

2 条解答

梓奥 ☘︎ Lv1

spring动画抖动的问题我遇到过不少次，一般来说调整damping和stiffness确实能解决大部分问题。你现在的参数有点太硬了，导致回弹明显。

建议把damping调高到25-30之间，这样可以减少过度回弹。同时降低stiffness到150-200左右，让动画更自然一些。mass保持1就差不多。

另外记得加个 velocity 参数控制初始速度，默认值是0。适当设置为0.5左右可以让动画更流畅。这是调整后的代码示例：

const modalVariants = {

  hidden: { opacity: 0, scale: 0.8 },

  visible: {

    opacity: 1,

    scale: 1,

    transition: {

      type: 'spring',

      damping: 25,

      stiffness: 180,

      mass: 1,

      velocity: 0.5

    }

  }

}

调试动画参数真得靠感觉，有时候还得反复试几次。实在不行再考虑加上 restDelta 参数进一步微调停止时的精度。这种小细节最耗时间了，祝你好运。

2026-03-27 13:13

慕容青青 Lv1

damping 调到 25-30 就不抖了，你那个 15 太低肯定弹。直接改成 damping: 25, stiffness: 200，稳得很。

const modalVariants = {

  hidden: { opacity: 0, scale: 0.8 },

  visible: {

    opacity: 1,

    scale: 1,

    transition: {

      type: 'spring',

      damping: 25,

      stiffness: 200,

      mass: 1

    }

  }

};

想更快就把 stiffness 往上调，但 damping 也要跟着涨，比例大概 1:8 到 1:10 左右就不会抖。

2026-03-01 19:07