第2章 核心概念

// 手动：你需要在每一帧自己写
let progress = 0;
const targetX = 300;
function animate() {
  progress += 0.016; // 约 60fps
  box.style.left = (progress * targetX) + 'px';
  if (progress < 1) requestAnimationFrame(animate);
}
animate();

// GSAP：一句话搞定
gsap.to(box, { x: 300, duration: 1 });

const p = elapsed / duration;       // 时间进度，通常限制到 0…1
const q = ease(p);                  // 属性进度，back/elastic 可超出 0…1
const x = startX + (endX - startX) * q;

// 驱动 Canvas 绘制
const ctx = canvas.getContext('2d');
const state = { radius: 0, color: [0, 0, 255] };

gsap.to(state, {
  radius: 100,
  duration: 2,
  onUpdate: () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(150, 150, state.radius, 0, Math.PI * 2);
    ctx.fill();
  }
});

// 驱动 Three.js 场景
gsap.to(cube.position, { x: 5, duration: 1 });
gsap.to(cube.rotation, { y: Math.PI * 2, duration: 2 });

// ❌ 散装动画——维护起来是噩梦
gsap.to('.logo', { opacity: 1, duration: 0.5 });
gsap.to('.title', { opacity: 1, duration: 0.5, delay: 0.5 });
gsap.to('.subtitle', { opacity: 1, duration: 0.5, delay: 1.0 });
gsap.to('.cta', { scale: 1.1, duration: 0.3, delay: 1.5 });

// ✅ Timeline——编排逻辑清晰如乐谱
const tl = gsap.timeline();

tl.to('.logo', { opacity: 1, duration: 0.5 })
  .to('.title', { opacity: 1, duration: 0.5 })
  .to('.subtitle', { opacity: 1, duration: 0.5 })
  .to('.cta', { scale: 1.1, duration: 0.3 });

const tl = gsap.timeline({ defaults: { duration: 0.6, ease: 'power2.out' } });

// 并行：position 参数为 "<" 表示与前一个动画同时开始
tl.to('.left', { x: 200 })
  .to('.right', { x: -200 }, '<');   // 同时开始

// 延时并行
tl.to('.top', { y: 100 })
  .to('.bottom', { y: -100 }, '<0.3'); // 比上一个晚 0.3 秒开始

// 标签
tl.to('.step1', { opacity: 1 })
  .addLabel('stage2')
  .to('.step2', { opacity: 1 }, 'stage2+=0.5'); // stage2 之后 0.5 秒

// 全局控制
tl.play();
tl.pause();
tl.reverse();
tl.timeScale(2);  // 2 倍速播放

// 没有缓动——机械、生硬
gsap.to('.ball', { y: -200, duration: 1, ease: 'none' });

// 有缓动——像真实抛球
gsap.to('.ball', { y: -200, duration: 1, ease: 'power2.out' });

// 同是 power2，三种形态完全不同
gsap.to('.in',  { x: 300, duration: 1.5, ease: 'power2.in' });    // 慢→快
gsap.to('.out', { x: 300, duration: 1.5, ease: 'power2.out' });   // 快→慢（最常用）
gsap.to('.io',  { x: 300, duration: 1.5, ease: 'power2.inOut' }); // 慢→快→慢

power2.in:     开头缓慢，逐渐加速  → 适合元素离开屏幕
power2.out:    开头快速，逐渐减速  → 适合元素进入屏幕（最自然）
power2.inOut:  两端慢中间快        → 适合需要对称感的动画

// 从公开的 gsap 包加载 CustomEase 后注册
gsap.registerPlugin(CustomEase);
CustomEase.create('customCurve', '0.17,0.67,0.83,0.67');

gsap.to('.custom', {
  x: 300,
  duration: 1.5,
  ease: 'customCurve'
});

// 这个比喻落实到代码
const symphony = gsap.timeline({ defaults: { duration: 0.8 } });

symphony
  // 小提琴起（第一小提琴声部）
  .to('.violin', { opacity: 1, y: -20, ease: 'power2.out' })
  // 长笛加入（同时开始，但用更柔和的缓动）
  .to('.flute', { opacity: 0.8, y: -10, ease: 'sine.out' }, '<')
  // 定音鼓（比上一拍晚 0.3 秒，用弹跳缓动）
  .to('.timpani', { scale: 1.2, ease: 'bounce.out' }, '<0.3')
  // 休止
  .to({}, { duration: 0.5 })  // 空 Tween 产生停顿
  // 全体强奏
  .to('.all', { scale: 1.5, ease: 'power4.out' });

gsap.to(target, { vars })
        │          │
        │          └── 配置对象：duration、x、ease、onComplete 等
        └── 目标：CSS 选择器 / DOM 元素 / 任意 JS 对象 / 数组

// target 的四种形式
gsap.to('.box', { x: 100 });                    // CSS 选择器
gsap.to(document.querySelector('.box'), { x: 100 });  // DOM 元素
gsap.to({ val: 0 }, { val: 100 });               // JS 对象
gsap.to(['.box1', '.box2', '.box3'], { x: 100 }); // 数组（批量）

// vars 的关键字段结构
const vars = {
  // === 动画目标值 ===
  x: 100,          y: 50,           // transform 简写
  rotation: 360,   scale: 1.5,      // transform 简写
  opacity: 0,      backgroundColor: '#ff0000',  // CSS 属性
  val: 999,                          // 任意属性

  // === 时间控制 ===
  duration: 1.5,   delay: 0.3,      // 持续时间、延迟
  repeat: 2,       repeatDelay: 1,   // 重复次数、重复间隔
  yoyo: true,                        // 往返（需要 repeat）
  yoyoEase: 'power2.out',            // 往返时的缓动

  // === 缓动 ===
  ease: 'power2.out',

  // === 回调 ===
  onStart: () => console.log('开始'),
  onUpdate: () => console.log('每一帧'),
  onComplete: () => console.log('完成'),
  onRepeat: () => console.log('重复'),
  onInterrupt: () => console.log('被中断'),

  // === 控制 ===
  paused: true,                      // 创建后不动，等待 play()
  overwrite: 'auto',                 // 冲突动画覆盖策略
  immediateRender: true,             // from() 动画是否立即渲染初始状态
  stagger: 0.1,                      // 批量目标的间隔时间
};

// 类名写错时默认会有 GSAP target not found 警告
gsap.to('.cardd', { x: 100 });  // 没有任何 .cardd 元素

// ✅ 先确认元素存在
const cards = document.querySelectorAll('.card');
if (cards.length) {
  gsap.to(cards, { x: 100 });
}

// ❌ 拼错了，但 GSAP 不会警告
gsap.to('.box', { duratoin: 2, x: 100 });  // duratoin 无效
// 动画会以默认 duration=0.5 运行

// ❌ 还有这些常见误写
// opacity → opaticy / opaicity
// rotation → rotaion / roatation
// backgroundColor → backgorundColor

// ❌ GSAP 的 duration 单位是秒，不是毫秒
gsap.to('.box', { x: 100, duration: 2000 });  // 2000 秒！不是 2 秒

// ✅ 正确
gsap.to('.box', { x: 100, duration: 2 });  // 2 秒

// ❌ 错误认知：以为 GSAP 是 CSS transition 的替代
// GSAP 做的是"声明式动画"，不是"状态过渡"

// GSAP 正确的使用方式：
// 在 JS 事件中主动创建动画，而不是依赖 CSS 状态变化
button.addEventListener('click', () => {
  gsap.to('.modal', { scale: 1, opacity: 1, duration: 0.3 });
});