缓动函数

是什么

缓动函数（Easing）描述动画进度随时间变化的方式。线性运动（ease: 'none'）每一帧走相同的距离，看起来机械；现实中的物体会加速、减速、冲过头再回弹，缓动就是用一条曲线模拟这些特性。GSAP 用字符串指定缓动，名称后缀 .in 表示慢启动、.out 表示慢收尾、.inOut 两端都慢。不写 ease 时默认是 power1.out，默认时长是 0.5 秒。

上方演示让 6 个圆点在相同时长内跑完同一段距离，差别只在缓动：none 匀速，expo.out 起步极快、收尾很长，back.out(1.7) 略微冲过终点再退回，elastic.out(1, 0.4) 像弹簧一样来回振荡，bounce.out 像球落地弹跳。

核心参数

写法	含义
ease: 'power1.out'	默认值；power0 到 power4 力度递增，power0 等同于 none
.in / .out / .inOut	加速起步、减速收尾、两端都慢
back.out(1.7)	括号内为超出量，默认 1.7，越大冲得越远
elastic.out(1, 0.3)	振幅与周期，默认 1 和 0.3；演示用 0.4，振荡更慢
steps(5)	分 5 段跳变，适合逐帧效果
gsap.defaults({ ease })	设置全局默认缓动

代码示例

import { gsap } from 'gsap';

const eases = ['none', 'power2.inOut', 'expo.out', 'back.out(1.7)', 'elastic.out(1, 0.4)', 'bounce.out'];
const tl = gsap.timeline({ repeat: -1, yoyo: true, repeatDelay: 0.8 });

document.querySelectorAll('.dot').forEach((dot, i) => {
  // 所有圆点从时间 0 同时出发，只有 ease 不同
  tl.to(dot, { x: 300, duration: 1.6, ease: eases[i] }, 0);
});

什么时候用

• 元素入场用 out 类（power2.out、expo.out），让动作快速到位、柔和停下。
• 元素离场用 in 类，加速离开，不拖泥带水。
• 位置切换、页面过渡等两端都有状态的动画用 inOut。
• back、elastic、bounce 个性强，适合图标、徽章、游戏化反馈，少量点缀即可。

常见误区

• 全站混用太多种缓动：同一产品里 2 到 3 种就够，保持节奏统一。
• 在滚动联动（scrub）的动画里使用强缓动：进度已由滚动控制，通常应写 ease: 'none'。
• 以为 CSS 的 cubic-bezier() 能表达所有曲线：弹性和弹跳这类多段曲线无法用单个贝塞尔表示，这正是 GSAP 缓动的优势。