Skip to main content

过渡效果

缓动/回弹ease​

官方示例：Easing | GSAP | Docs & Learning

gsap.to(".box", {
  x: 100,
  duration: 1,
  
  // --- 核心属性 `ease` ---
  ease: "bounce.out",           // 基础弹跳效果
  ease: "elastic.out(1, 0.3)",  // 弹性效果（参数可调整弹性幅度）
  ease: "back.out(1.7)",        // 回弹效果（参数控制回弹强度）
  ease: "power2.inOut"          // 标准缓入缓出
  ease: "缓动类型.inOut"         // 无参数版本（如 power2.inOut）
  ease: "缓动类型.inOut(参数)"   // 带参数版本（如 elastic.inOut(1, 0.5)）
  ease: "power2.inOut",         // 开始和结束都缓慢，中间加速
});

重点说明​

  1. ease 是唯一控制缓动的属性，直接通过不同字符串值指定效果：

    1. 内置缓动函数：如 "power1", "power2", "sine", "expo", "circ" 等。
    2. 特殊效果：
      • "bounce"（弹跳）
      • "elastic"（弹性震荡）
      • "back"（回弹）
      • "rough"（粗糙随机）
      • "slow"（慢速抖动）

  2. 调整参数（以 elastic 和 back 为例）：

    ease: "elastic.out(1, 0.3)", // 参数1: 振幅，默认1，越大越夸张 | 参数2: 弹性阻尼、周期，默认0.3值越小震动频率越高
    ease: "back.out(1.7)",       // 参数: 回弹强度（越大越夸张）
        
    // 或对象写法
    { ease: "elastic", direction: "out", amplitude: 1, period: 0.3 }

  3. 缓动方向（通过后缀控制）：

    • .inOut 的盒子会在起点和终点有明显减速，中间快速移动。
    • .in 的盒子启动慢但结束快。
    • .out 的盒子启动快但结束慢。

  4. 缓动设置

缓动类型行为
"power2.in"开始缓慢，结束快速
"power2.out"开始快速，结束缓慢
"power2.inOut"开始和结束都缓慢，中间快速
"none"完全线性（无加速减速）

完整示例：回弹动画​

gsap.to(".box", {
  x: 300,
  duration: 2,
  ease: "back.out(1.7)", // 重点！设置回弹效果
  onUpdate: function() {
    console.log("当前X值:", this.targets()[0].style.transform);
  }
});

常见错误​

  1. 拼写错误： ❌ ease: "bouncy"（正确应为 "bounce"） ❌ ease: "Back.out"（正确应为全小写 "back.out"）
  2. 参数格式错误： ❌ ease: "elastic.out(1)"（弹性效果需要两个参数） ✅ 正确写法：ease: "elastic.out(1, 0.3)"