缓动效果

效果描述

模拟了橡皮筋或弹簧释放后的物理运动

• 运动过程：动画对象会快速移动向目标值，并**冲过（Overshoot）**目标点，然后反弹回来，经过几次逐渐减弱的震荡，最终停在目标位置。
• 视觉感受：具有很强的弹性、果冻感和有机感，常用于增加 UI 交互的趣味性（如按钮弹窗、图标出现的动画）。

单次回弹

cubic-bezier()，在 x 轴上只能在 [0, 1] 区间变化，但 y 轴却是可以突破这个区间的，从而使其经历一个比最终值更大的状态

上面动画曲线代码可以通过cubic-bezier网站获取和调整：cubic-bezier(.21,.1,.18,1.42)

应用例子：有回弹效果的生动气泡提示框

多次回弹

如果想要更生动的多次回弹效果（如一开始例子效果），可以使用 gsap 库，并把 ease 设置为 elastic.out(振幅, 周期) 函数：

• 参数 1：振幅 (Amplitude)
  • 控制“冲过头”的幅度大小。
  • 数值越大，回弹的力度越强，冲过目标点的距离越远。
• 参数 2：周期 (Period)
  • 控制弹跳的频率（即震荡的快慢）。
  • 数值越小，震荡的频率越高（弹得越快、次数越多）。
  • 数值越大，震荡越平缓。

gsap.to(".box", {
  x: 300,
  duration: 2,
  ease: "elastic.out(1.5, 0.2)" // 振幅1.5，周期0.2
});