第8章：Easing 缓动

// 显式设置 none；GSAP Tween 默认 ease 为 power1.out
gsap.to(".box", { x: 400, duration: 2 });

// 有缓动——活过来了
gsap.to(".box", { x: 400, duration: 2, ease: "power3.out" });

// 力度对比
gsap.to(".box1", { x: 400, duration: 1.5, ease: "power1.out" });  // 轻
gsap.to(".box2", { x: 400, duration: 1.5, ease: "power2.out" });  // 中
gsap.to(".box3", { x: 400, duration: 1.5, ease: "power3.out" });  // 强
gsap.to(".box4", { x: 400, duration: 1.5, ease: "power4.out" });  // 暴力

ease: "power2.in"     // 缓慢起步 → 加速冲刺（起跑用）
ease: "power2.out"    // 快速起步 → 优雅减速到位（最常用！）
ease: "power2.inOut"  // 缓慢起步 → 中间加速 → 减速停下（循环用）

// 三种变体的视觉差异

// in——起步慢，加速冲线
gsap.to(".box-in",    { x: 400, duration: 2, ease: "power3.in" });

// out——起步快，优雅减速到位（90% 场景用这个）
gsap.to(".box-out",   { x: 400, duration: 2, ease: "power3.out" });

// inOut——慢-快-慢，平滑完整
gsap.to(".box-inout", { x: 400, duration: 2, ease: "power3.inOut" });

ease: "back.out(1.7)"   // 默认超调量
ease: "back.out(3)"     // 大幅超调
ease: "back.out(0.5)"   // 轻微超调，接近 power2.out

// 对比
gsap.to(".b1", { y: -50, duration: 0.6, ease: "back.out(1.2)" });  // 轻微回弹
gsap.to(".b2", { y: -50, duration: 0.6, ease: "back.out(1.7)" });  // 标准回弹
gsap.to(".b3", { y: -50, duration: 0.6, ease: "back.out(4)" });    // 剧烈回弹

ease: "elastic.out(1, 0.3)"  // (振幅, 周期)
// 振幅默认 1，周期默认 0.3
// 振幅越大越"弹"，周期越小震动越频繁

gsap.to(".box", {
  y: 200,
  duration: 2,
  ease: "elastic.out(1.5, 0.5)",   // 大幅度慢震
});

gsap.to(".box", {
  y: 200,
  duration: 2,
  ease: "elastic.out(1, 0.2)",     // 周期更短，振幅参数不小于1
});

ease: "steps(5)"    // 5 步跳跃
ease: "steps(12)"   // 12 步——模拟逐帧动画

// 从公开的 gsap 包导入插件后注册
gsap.registerPlugin(CustomEase);

// 从 cubic-bezier 值创建
CustomEase.create("myEase", "0.47, 0, 0.745, 0.715");

// 使用
gsap.to(".box", {
  x: 400,
  duration: 2,
  ease: "myEase",
});

CustomEase.create("custom1", "M0,0 C0.5,0 0.5,1 1,1");   // 平滑 S 形
CustomEase.create("custom2", "M0,0 C0.2,1.2 0.8,-0.2 1,1"); // 夸张的回弹
CustomEase.create("custom3", "M0,0 C0,1.5 0.5,1.5 1,1");   // 大超调

gsap.to(".hand-drawn", {
  x: 300,
  duration: 2,
  ease: "rough({ template: power1.out, strength: 1, points: 20, taper: 'out', randomize: true, clamp: true })"
});

gsap.from(".typewriter span", {
  opacity: 0,
  duration: 0.05,
  stagger: 0.03,
  ease: "rough({ strength: 0.3, points: 5 })",
});

gsap.from(".sketch-line", {
  drawSVG: "0%",
  duration: 3,
  ease: "rough({ template: power1.inOut, strength: 0.5, points: 30, clamp: true })",
});

// 不使用 expoScale——scale 从 0 开始会有问题
gsap.from(".box", { scale: 0, duration: 1, ease: "expo.out" });  // scale 0 可能永远到不了

// 使用 expoScale——干净利落
gsap.from(".box", {
  scale: 0,
  duration: 1,
  ease: "expoScale(1, 5, power2.out)",  // (start, end, ease)
});

const btn = document.querySelector(".btn");

btn.addEventListener("mouseenter", () => {
  gsap.to(btn, {
    scale: 1.15,
    duration: 0.3,
    ease: "back.out(2.5)",
  });
});

btn.addEventListener("mouseleave", () => {
  gsap.to(btn, {
    scale: 1,
    duration: 0.3,
    ease: "power2.out",
  });
});

btn.addEventListener("mousedown", () => {
  gsap.to(btn, {
    scale: 0.95,
    duration: 0.1,
    ease: "power2.in",
  });
});

btn.addEventListener("mouseup", () => {
  gsap.to(btn, {
    scale: 1.15,
    duration: 0.2,
    ease: "elastic.out(1, 0.3)",
  });
});

// 一个简单的缓动预览工具
const eases = [
  "power1.out", "power2.out", "power3.out", "power4.out",
  "back.out(1.7)", "elastic.out(1, 0.3)", "bounce.out",
  "circ.out", "expo.out", "sine.out",
];

eases.forEach((ease, i) => {
  const dot = document.createElement("div");
  dot.className = "ease-dot";
  dot.style.top = `${i * 40 + 20}px`;
  document.querySelector(".ease-demo").appendChild(dot);

  gsap.to(dot, {
    x: 500,
    duration: 2,
    ease,
    repeat: -1,
    yoyo: true,
    repeatDelay: 0.5,
    delay: i * 0.1,
  });
});

// 并排对比 6 种常用缓动
const demoBoxes = document.querySelectorAll(".demo-box");

const easingList = [
  "none",
  "power2.out",
  "power3.out",
  "back.out(1.7)",
  "elastic.out(1, 0.3)",
  "bounce.out",
];

demoBoxes.forEach((box, i) => {
  gsap.to(box, {
    x: 450,
    duration: 2.5,
    ease: easingList[i],
    repeat: -1,
    yoyo: true,
    repeatDelay: 1,
    delay: i * 0.1,
  });
});

// slowMo 创造"中间暂停"的效果
gsap.to(".car", {
  x: 600,
  duration: 3,
  ease: "slow(0.2, 0.8, false)",
  //      参数: (起始比例, 结束比例, 是否平滑衔接)
});

// slow(0.1, 0.9, false)
// 开始 10%：加速
// 中间 80%：线性匀速（慢门区）
// 最后 10%：减速

const ease = gsap.parseEase('back.out(1.7)');
const peak = Math.max(...Array.from({ length:1001 }, (_,i) => ease(i/1000)));
console.log(peak);                 // 约 1.10
console.log(250 * peak);           // 0→250 的运动，峰值约 275px

// 错误：x1 超出 0~1 范围
CustomEase.create("bad", "M0,0 C1.2,0 0.5,1 1,1");

// 正确：x 值在 0~1，y 值可以任意
CustomEase.create("good", "M0,0 C0.5,1.5 0.8,-0.3 1,1");
//                           x1=0.5 ✓  y1=1.5 ✓(超调)
//                           x2=0.8 ✓  y2=-0.3 ✓(undershoot)

const tl = gsap.timeline({ defaults: { ease: 'power3.out', duration: 1 } });
tl.to(boxA, { x: 300 }).to(boxB, { x: 300, ease:'none' });

// duration=0.3, steps=10 → 每步只有 30ms，几乎没有可感知的停顿
gsap.to(".counter", { x: 200, duration: 0.3, ease: "steps(10)" });

// 更好的搭配
gsap.to(".counter", { x: 200, duration: 2, ease: "steps(20)" });
// 每步 100ms——人力能感知的范围

// 这不会报错！
gsap.to(".box", { x: 300, ease: "bounce.inOut" });
// bounce 没有 .inOut 变体，静默回退

// bounce 只有 .out 和 .in
gsap.to(".box", { x: 300, ease: "bounce.out" });