gsap 配置解读 --2

yoyo 是什么意思

在 GSAP（GreenSock Animation Platform）中，yoyo: true 是一个控制重复动画播放方向的选项

const tween = gsap.to(slider, {
x: 420,
duration: 1.2, 
ease: "power1.inOut",
repeat: -1, // 无限重复
yoyo: true, // ← 关键：开启"来回"模式
paused: true
});

这段代码的作用是：

让 slider 元素在 x: 0 和 x: 420 之间无限来回移动（像钟摆一样），每次往返耗时 2.4 秒（1.2 秒去 + 1.2 秒回）。

---

✅ yoyo: true 的核心行为

yoyo值	动画重复时的行为
false（默认）	每次重复都从头开始 ：0 → 420，然后重置回 0 再 0 → 420（会有"跳回"感）
true	每次重复都反向播放 ：0 → 420，然后 420 → 0，再 0 → 420......形成平滑来回

对比示例：

• repeat: -1, yoyo: false
0 → 420 → 瞬间跳回 0 → 0 → 420 → 瞬间跳回 0 ...（不连贯）
• repeat: -1, yoyo: true
0 → 420 → 420 → 0 → 0 → 420 → 420 → 0 ...（流畅往复）

💡 yoyo 这个名字来源于"悠悠球"------扔出去再自动收回来，形象地表达了"来回"运动。

---

🔧 配合 repeat 使用

• repeat: 1 + yoyo: true → 播放一次正向 + 一次反向（共 2 次）
• repeat: -1 + yoyo: true → 无限循环往复（最常见用法）
• repeat: 0（默认）→ yoyo 无效（因为没有重复）

---

🎯 常见应用场景

1. 背景元素左右/上下浮动

   js

   gsap.to(".cloud", { x: 100, repeat: -1, yoyo: true, duration: 3 });

2. 指示器、光标闪烁或晃动

   js

   gsap.to(".cursor", { opacity: 0, repeat: -1, yoyo: true, duration: 0.5 });

3. 机械式往复运动（如风扇叶片微调、机器人手臂）

---

⚠️ 注意事项

• yoyo 只影响动画的播放方向 ，不会改变 ease（缓动）。

  • 正向：使用你指定的 ease（如 "power1.inOut"）
  • 反向：GSAP 会自动反转缓动曲线，确保运动自然（无需手动设置）

• 如果你用了 keyframes，yoyo 会反转整个关键帧序列。

---

✅ 总结

配置	含义
repeat: -1	无限重复动画
yoyo: true	每次重复时反向播放，实现"来回"效果

你的代码创建了一个水平方向无限来回滑动的动画，常用于：

• 轮播图自动滚动（配合暂停/继续）
• 装饰性动态元素
• 游戏中的巡逻敌人/NPC

配合 paused: true，你可以在需要时（如鼠标悬停、点击按钮）通过 tween.play() 启动这个循环动画。

onStart onUpdate onComplete 是什么意思

在 GSAP（GreenSock Animation Platform）中，onStart、onUpdate 和 onComplete 是 动画生命周期回调函数（callback functions） ，用于在动画的特定时刻执行自定义 JavaScript 代码。

 const tween = gsap.to(dot, {
        x: 460,
        duration: 1.4,
        ease: "power2.out",
        paused: true,
        onStart: () => {
          log.textContent = "动画开始...";
        },
        onUpdate: () => {
          const progress = Math.round(tween.progress() * 100);
          log.textContent = `进行中：${progress}%`;
        },
        onComplete: () => {
          log.textContent = "动画完成！";
        }
      });

这段代码为动画定义了三个关键时机的"监听器"：

---

✅ 各回调函数的作用

回调	触发时机	常见用途
onStart	动画刚开始播放的第一帧（在第一次渲染前）	显示提示、启动计时器、添加 class 等
onUpdate	每一帧动画更新时都会触发（每秒约 60 次）	实时更新进度条、显示百分比、同步其他元素状态
onComplete	动画完全结束（到达最后一帧）	隐藏元素、跳转页面、播放音效、触发下一个动画

---

🔍 详细说明

1. onStart

• 只会执行 一次。
• 在动画真正开始移动/变化之前触发。
• 适合做"初始化"操作。

✅ 示例：

js

onStart: () => {
  dot.classList.add('animating');
  console.log('Dot animation started!');
}

---

2. onUpdate

• 高频触发（每帧一次），性能敏感，避免做 heavy 操作（如 DOM 查询、复杂计算）。
• 常配合 tween.progress()（返回 0~1 的进度值）或 tween.time() 使用。

✅ 你的代码：

js

onUpdate: () => {
  const progress = Math.round(tween.progress() * 100); // 转为 0~100%
  log.textContent = `进行中：${progress}%`;
}

→ 实时显示动画完成百分比。

💡 提示：如果只是想读取当前属性值，也可以用 gsap.getProperty(dot, "x")。

---

3. onComplete

• 动画正常播放完毕时触发（不包括被暂停、反向或 killed 的情况）。
• 如果设置了 repeat: -1，onComplete 永远不会触发（因为动画永不结束）。

✅ 示例：

js

onComplete: () => {
  setTimeout(() => dot.style.display = 'none', 500);
  playNextAnimation();
}

---

⚠️ 其他相关回调（扩展）

回调	说明
onReverseComplete	当反向播放完成 时触发（比如调用了 tween.reverse() 并回到起点）
onRepeat	每次重复开始时 触发（需配合 repeat 使用）
onInterrupt	动画被kill 或 stop 时触发（GSAP 3.10+）

---

✅ 总结

回调	何时运行	你的代码作用
onStart	动画刚开始	显示 "动画开始..."
onUpdate	每一帧更新	实时显示进度百分比
onComplete	动画彻底结束	显示 "动画完成！"

这些回调让你能精确控制动画与 UI、逻辑、数据的同步，是实现高级交互动效的关键工具。

💡 小技巧：即使 paused: true，一旦你调用 tween.play()，这些回调仍会按规则触发。

tween.play tween.pause tween.reverse tween.restart是什么意思

在 GSAP（GreenSock Animation Platform）中，tween.play()、tween.pause()、tween.reverse() 和 tween.restart() 是 控制动画播放状态的核心方法。它们让你可以像操作视频播放器一样，灵活地控制动画的播放、暂停、倒放和重播。

 const ship = document.querySelector("#ship");
      const progress = document.querySelector("#progress");
      const playButton = document.querySelector("#play");
      const pauseButton = document.querySelector("#pause");
      const reverseButton = document.querySelector("#reverse");
      const restartButton = document.querySelector("#restart");

      // 创建一个补间并绑定更新进度条
      const tween = gsap.to(ship, {
        x: 470,
        duration: 3,
        ease: "power1.inOut",
        paused: true,
        onUpdate: () => {
          progress.value = Math.round(tween.progress() * 100);
        }
      });

      playButton.addEventListener("click", () => tween.play());
      pauseButton.addEventListener("click", () => tween.pause());
      reverseButton.addEventListener("click", () => tween.reverse());
      restartButton.addEventListener("click", () => tween.restart());

      // 拖动进度条，手动 seek 到指定位置
      progress.addEventListener("input", (event) => {
        const value = Number(event.target.value) / 100;
        tween.progress(value).pause();
      });

假设你有如下动画：

js

const tween = gsap.to(box, {
  x: 300,
  duration: 2,
  paused: true // 初始暂停，等待手动控制
});

此时动画已创建但未播放。你可以通过以下方法控制它：

---

✅ 1. tween.play()

作用 ：从当前进度 开始正向播放动画。

• 如果是第一次播放 → 从头开始（进度 0 → 1）
• 如果之前被暂停在 50% → 从 50% 继续播放到 100%

js

tween.play(); // 开始或继续播放

💡 相当于点击"播放"按钮 ▶️

---

✅ 2. tween.pause()

作用 ：暂停动画，停留在当前帧。

• 动画状态被冻结，不会继续更新。
• 可随时用 play() 或 reverse() 恢复。

js

tween.pause(); // 暂停动画
console.log(tween.progress()); // 比如输出 0.6（60% 进度）

💡 相当于点击"暂停"按钮 ⏸️

---

✅ 3. tween.reverse()

作用 ：反向播放动画（倒放）。

• 如果当前在正向播放 → 立即掉头往回走
• 如果已暂停 → 从当前位置倒放到起点
• 再次调用 reverse() 会切回正向

js

tween.reverse(); // 开始倒放
// 再次调用：
tween.reverse(); // 又变回正向播放

💡 相当于"倒带" ◀️，常用于 hover 离开时还原状态

---

✅ 4. tween.restart()

作用 ：重置并重新播放动画（从头开始）。

• 无论当前在什么进度，都会跳回 0% 并开始正向播放。
• 相当于 tween.progress(0).play()

js

tween.restart(); // 从头开始播放

💡 相当于"重新开始" 🔁

---

🔄 状态变化图示

假设动画总时长 2 秒：

方法	当前进度	调用后行为
初始	0%	---
.play()	0% → 正向播放 → 100%
播放到 60% 时 .pause()	停在 60%	---
.play()	60% → 继续正向 → 100%
.reverse()	60% → 倒放 → 0%
.restart()	无论在哪 → 跳回 0% → 正向播放

---

💡 实际应用场景

场景 1：Hover 效果

js

box.addEventListener('mouseenter', () => tween.play());
box.addEventListener('mouseleave', () => tween.reverse());

场景 2：按钮控制

js

playBtn.onclick = () => tween.play();
pauseBtn.onclick = () => tween.pause();
resetBtn.onclick = () => tween.restart();

场景 3：滚动触发动画

js

ScrollTrigger.create({
  trigger: ".section",
  onEnter: () => tween.play(),
  onLeaveBack: () => tween.reverse()
});

---

⚠️ 注意事项

• 这些方法返回 tween 自身，支持链式调用：

  js

  tween.play().timeScale(2); // 2倍速播放

• reverse() 不会改变 duration，只是反向运行。

• 如果动画已完成（100%），调用 play() 不会重播（需用 restart()）。

---

✅ 总结

方法	作用	类比
.play()	从当前位置正向播放	▶️ 播放
.pause()	暂停在当前帧	⏸️ 暂停
.reverse()	从当前位置反向播放	◀️ 倒放
.restart()	重置到开头并播放	🔁 重播

这些方法赋予你对 GSAP 动画完全的程序化控制能力，是实现交互动效的基础。

gsap.defaults 是什么

在 GSAP（GreenSock Animation Platform）中，gsap.defaults() 是一个全局配置方法 ，用于为所有后续创建的 GSAP 动画（tween 或 timeline）设置默认参数 ，避免重复书写相同的配置项（如 duration、ease 等）。

   const boxes = gsap.utils.toArray(".box");
      const playButton = document.querySelector("#play");

      // 设置默认动画参数
      gsap.defaults({
        duration: 0.8,
        ease: "power2.out"
      });

      const timeline = gsap.timeline({ paused: true });

      timeline.to(boxes[0], { x: 220, background: "#22d3ee" });
      timeline.to(boxes[1], { x: 180, background: "#a3e635" }, "<0.1");
      timeline.to(boxes[2], { x: 140, background: "#f472b6" }, "<0.1");

      playButton.addEventListener("click", () => {
        timeline.restart();
      });

这行代码的意思是：

从此以后，所有通过 gsap.to()、gsap.from()、gsap.timeline().to() 等创建的动画，如果没有显式指定 duration 和 ease，就会自动使用 duration: 0.8 和 ease: "power2.out"。

---

✅ 作用：减少重复代码，统一动效风格

在你的后续代码中：

js

timeline.to(boxes[0], { x: 220, background: "#22d3ee" });
timeline.to(boxes[1], { x: 180, background: "#a3e635" }, "<0.1");
timeline.to(boxes[2], { x: 140, background: "#f472b6" }, "<0.1");

虽然你没有写 duration 和 ease ，但由于前面设置了 gsap.defaults()，这三个 .to() 动画会自动继承：

• duration: 0.8
• ease: "power2.out"

等价于：

js

timeline.to(boxes[0], { x: 220, background: "#22d3ee", duration: 0.8, ease: "power2.out" });
// ...其他同理

---

🔧 gsap.defaults() 支持的常用属性

属性	说明
duration	默认动画时长（秒）
ease	默认缓动函数（如 "power2.out", "elastic", "back.inOut" 等）
delay	默认延迟时间
overwrite	默认覆盖行为（如 "auto"）
opacity	默认透明度（较少用）

⚠️ 注意：局部配置会覆盖默认值 。

例如：gsap.to(el, { x: 100, duration: 2 }) 中的 duration: 2 会覆盖 defaults 中的 0.8。

---

🎯 使用场景

1. 项目级动效规范
   整个网站/应用使用统一的动画节奏和缓动曲线。
2. 快速原型开发
   先用默认值快速搭建动画，后期再微调个别参数。
3. 减少样板代码
   避免在几十个动画中反复写 duration: 0.8, ease: "power2.out"。

---

⚠️ 注意事项

• gsap.defaults() 只影响调用之后创建的动画，对已存在的 tween/timeline 无效。
• 它设置的是全局默认值 ，会影响所有 GSAP 动画（包括 gsap.to、timeline.to 等）。
• 如果你在团队协作中使用，建议在项目入口文件（如 main.js）中统一设置。

gsap.quickTo 和 gsap.utils.clamp 是什么

GSAP 的两个非常高效且实用的工具：gsap.quickTo() 和 gsap.utils.clamp() 。它们常用于高性能指针/光标跟随、拖拽、实时交互等场景。下面分别详细解释：

---

  const stage = document.querySelector("#stage");
      const cursor = document.querySelector("#cursor");

      // quickTo 可以高频率更新属性，且保持平滑
      const moveX = gsap.quickTo(cursor, "x", { duration: 0.3, ease: "power3.out" });
      const moveY = gsap.quickTo(cursor, "y", { duration: 0.3, ease: "power3.out" });

      // utils.clamp 限制数值范围
      const clampX = gsap.utils.clamp(0, stage.clientWidth - 36);
      const clampY = gsap.utils.clamp(0, stage.clientHeight - 36);

      stage.addEventListener("mousemove", (event) => {
        const rect = stage.getBoundingClientRect();
        const x = clampX(event.clientX - rect.left - 18);
        const y = clampY(event.clientY - rect.top - 18);
        moveX(x);
        moveY(y);
      });

✅ 1. gsap.quickTo()

🔍 是什么？

gsap.quickTo() 是 GSAP 提供的一个高性能属性更新器 ，它会预先创建一个轻量级的 tween（动画） ，然后你可以通过调用返回的函数高频次地更新目标值，而无需反复创建新动画。

📌 你的代码：

js

const moveX = gsap.quickTo(cursor, "x", { duration: 0.3, ease: "power3.out" });
const moveY = gsap.quickTo(cursor, "y", { duration: 0.3, ease: "power3.out" });

• 创建了两个"快速更新器"：moveX 和 moveY
• 它们分别控制 cursor 元素的 x 和 y 属性
• 每次调用 moveX(100)，就会让 cursor 的 x 平滑地动画到 100（耗时 0.3 秒，带缓动）

🎯 在事件中使用：

js

stage.addEventListener("mousemove", (event) => {
  // ...计算 x, y
  moveX(x); // ← 高频调用（每秒可能几十次）
  moveY(y);
});

✅ 为什么用 quickTo 而不用 gsap.to？

表格

方式	问题
gsap.to(cursor, { x: newX, duration: 0.3 })	每次 mousemove 都新建一个 tween，内存和性能开销大，容易卡顿
gsap.quickTo(...)	只创建一次 tween ，后续只是更新它的目标值，极其高效 ✅

💡 quickTo 内部会自动处理"中断上一帧动画、平滑过渡到新目标"的逻辑，非常适合鼠标跟随、拖拽预览等场景。

---

✅ 2. gsap.utils.clamp()

🔍 是什么？

clamp（钳制/限制）是一个数值范围限制工具函数 ，确保一个值不会超出指定的最小值和最大值。

📌 你的代码：

js

const clampX = gsap.utils.clamp(0, stage.clientWidth - 36);
const clampY = gsap.utils.clamp(0, stage.clientHeight - 36);

• clampX 是一个函数，它接收一个数字，返回被限制在 [0, stage.clientWidth - 36] 范围内的值
• -36 是因为你的 cursor 元素宽高为 36px（假设），要防止它超出容器右/下边缘

🎯 在事件中使用：

js

const x = clampX(event.clientX - rect.left - 18); // -18 是 cursor 宽度的一半（居中对齐）

✅ 作用：防止光标移出舞台区域

比如：

• 舞台宽度是 500px，cursor 宽 36px → 最大允许 x = 500 - 36 = 464
• 如果用户把鼠标移到 500px 处，clampX(500 - 18) = clampX(482) → 返回 464
• 这样 cursor 就不会"跑出"舞台右边

🔁 等价于手写：

js

function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}

但 GSAP 的版本更简洁、可复用。

---

🧩 整体逻辑总结

"受限区域内的平滑自定义光标" ：

1. 监听 #stage 的鼠标移动
2. 计算鼠标相对于舞台的坐标 （clientX - rect.left）
3. 减去 18px 使光标中心对齐鼠标（假设光标是 36×36）
4. 用 clamp 限制坐标，不让光标超出舞台边界
5. 用 quickTo 高性能、平滑地更新光标位置

---

✅ 优势

技术	好处
gsap.quickTo	高频更新不卡顿，动画流畅，内存友好
gsap.utils.clamp	一行代码实现边界限制，代码清晰
GSAP 的 x/y	自动使用 transform，性能优于 left/top

---

💡 扩展建议

• 如果想让光标在离开舞台时隐藏，可加：

  js

  stage.addEventListener("mouseleave", () => gsap.set(cursor, { autoAlpha: 0 }));
  stage.addEventListener("mouseenter", () => gsap.set(cursor, { autoAlpha: 1 }));

• quickTo 也支持其他属性，如 scale、rotation、backgroundColor 等。

---

✅ 总结

方法	作用
gsap.quickTo(target, prop, vars)	创建高性能属性更新器，适合高频调用
gsap.utils.clamp(min, max)	生成一个限制数值范围的函数，防止越界

这两个工具组合起来，是实现专业级交互动效（如自定义光标、拖拽预览、游戏 UI）的黄金搭档！

Draggable 是什么

  <div class="card">
      <h1>案例 14：Draggable 拖拽</h1>
      <p>拖动方块，体验 Draggable 的基础能力。</p>
      <div class="stage">
        <div class="drag" id="drag">拖我</div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/Draggable.min.js"></script>
    <script>
      const drag = document.querySelector("#drag");

      // 注册 Draggable 插件
      gsap.registerPlugin(Draggable);

      // 创建可拖拽对象并限制在父容器内
      Draggable.create(drag, {
        type: "x,y",
        bounds: ".stage",
        inertia: false
      });
    </script>

Draggable 是 GSAP（GreenSock Animation Platform）官方提供的一个强大插件 ，用于快速创建高性能、可定制的拖拽交互（drag-and-drop）。它不仅支持鼠标拖动，还完美兼容触摸设备（手机/平板），并内置了惯性滚动、边界限制、对齐吸附、旋转拖拽等高级功能。

---

📌 你的代码解释：

Draggable.create(drag, {
  type: "x,y",      // 允许水平和垂直拖动
  bounds: ".stage", // 限制拖拽范围在 .stage 容器内
  inertia: false    // 禁用惯性（松手后不会继续滑动）
});

这段代码的作用是：

让 #drag 元素变成一个可在 .stage 区域内自由拖动的方块，且松手后立即停止（无惯性滑动）。

---

✅ Draggable 的核心能力

功能	说明
跨平台支持	自动适配鼠标 + 触摸（无需额外代码）
高性能	使用 transform（非 left/top），60fps 流畅拖拽
边界限制 (bounds)	可限制在父容器、自定义矩形区域或另一个元素内
惯性动画 (inertia)	松手后根据速度继续滑动（类似 iOS 滚动）
多种拖拽类型 (type)	x（水平）、y（垂直）、x,y（自由）、rotation（旋转）、scroll（模拟滚动）等
事件回调	onDragStart, onDrag, onDragEnd 等，便于扩展逻辑
与其他 GSAP 动画无缝集成	拖拽过程中可触发 timeline、tween 等

---

🔧 常见配置项详解

1. type

• "x"：仅水平拖动
• "y"：仅垂直拖动
• "x,y"：自由二维拖动（最常用）
• "rotation"：围绕中心点旋转（适合旋钮、转盘）
• "scrollTop" / "scrollLeft"：模拟滚动条

2. bounds

• 字符串选择器：".container" → 限制在该元素内
• DOM 元素：document.body
• 对象：{ top: 0, left: 0, width: 500, height: 300 }

3. inertia

• true：松手后根据拖拽速度继续滑动（需加载 InertiaPlugin）
• false：松手立即停止（默认）

---

🎯 实际应用场景

场景	配置示例
可拖拽卡片	type: "x,y", bounds: ".card-container"
滑块/进度条	type: "x", bounds: ".slider-track"
旋转调节器	type: "rotation", bounds: { minRotation: 0, maxRotation: 180 }
图片裁剪框	type: "x,y", bounds: ".image"
游戏人物移动	type: "x,y", onDrag: updateCharacterPosition

---

💡 事件回调示例

Draggable.create(drag, {
  type: "x,y",
  bounds: ".stage",
  onDragStart: () => console.log("开始拖拽"),
  onDrag: () => console.log("正在拖拽", drag._gsap.x, drag._gsap.y),
  onDragEnd: () => console.log("拖拽结束")
});

📌 拖拽过程中的位置可通过 element._gsap.x / element._gsap.y 实时获取（GSAP 自动维护）。

---

⚠️ 注意事项

1. 必须注册插件 ：

   gsap.registerPlugin(Draggable);

2. 被拖拽元素需定位 ：建议设置 position: absolute 或 fixed，否则可能布局错乱。

3. 避免与原生滚动冲突 ：在移动端可能需要 touch-action: none：

   .drag {
     touch-action: none; /* 禁用浏览器默认拖拽/缩放 */
   }

当然可以！在 GSAP 的 Draggable 插件中，type 选项决定了拖拽行为的类型 。以下是多个常见的 type 配置及其实际应用场景和代码示例，帮助你快速掌握不同拖拽模式的用法。

---

✅ 1. type: "x" ------ 仅水平拖动

适用于滑块、时间轴、横向卡片流等。

Draggable.create(".slider-handle", {
  type: "x",
  bounds: ".slider-track" // 限制在轨道内
});

📌 效果：只能左右拖，不能上下移动。

---

✅ 2. type: "y" ------ 仅垂直拖动

适用于音量条、滚动预览、垂直进度条。

Draggable.create(".volume-knob", {
  type: "y",
  bounds: ".volume-bar"
});

📌 效果：只能上下拖，不能左右移动。

---

✅ 3. type: "x,y" ------ 自由二维拖动（最常用）

适用于可移动窗口、拖拽图标、自定义光标、游戏人物。

Draggable.create(".draggable-box", {
  type: "x,y",
  bounds: ".container" // 限制在容器内
});

📌 效果 ：可任意方向拖动，但不会超出 .container 边界。

---

✅ 4. type: "rotation" ------ 旋转拖拽

适用于旋钮、转盘、角度调节器、图片旋转工具。

Draggable.create(".knob", {
  type: "rotation",
  bounds: { minRotation: 0, maxRotation: 270 } // 限制旋转角度
});

📌 效果：鼠标/手指绕元素中心旋转，值为角度（°）。

💡 元素需设置 transform-origin: center（默认即是）。

---

✅ 5. type: "scrollTop" ------ 模拟垂直滚动

适用于自定义滚动条、迷你地图导航。

// 拖动小方块控制大内容区滚动
Draggable.create(".scroll-thumb", {
  type: "scrollTop",
  scrollElement: document.querySelector(".content") // 要滚动的目标元素
});

📌 效果 ：拖动 .scroll-thumb 时，.content 区域会同步垂直滚动。

---

✅ 6. type: "scrollLeft" ------ 模拟水平滚动

适用于横向长图浏览、时间线导航。

Draggable.create(".horizontal-thumb", {
  type: "scrollLeft",
  scrollElement: document.querySelector(".timeline")
});

📌 效果 ：拖动 thumb 控制 .timeline 水平滚动。

---

✅ 7. type: "top,left" ------ 使用 top/left 定位（不推荐）

⚠️ 性能较差，仅用于特殊布局（如非 transform 兼容场景）。

Draggable.create(".legacy-element", {
  type: "top,left",
  bounds: ".parent"
});

📌 区别：

• 默认 x,y 使用 transform: translate()（高性能、不影响文档流）
• top,left 直接修改 CSS top/left（触发重排，性能低）

✅ 建议优先使用 x,y

---

✅ 8. 组合类型（GSAP 3.12+ 支持）------ type: "x,rotation"

同时支持水平移动 + 旋转（高级交互）。

Draggable.create(".dial", {
  type: "x,rotation",
  bounds: { minX: 0, maxX: 300 }
});

📌 效果：左右拖动改变位置，同时可旋转（需配合手势或逻辑判断）。

🔔 注意：组合类型需明确指定每个维度的行为，实际使用较少。

---

🎯 补充：如何读取拖拽状态？

无论哪种 type，你都可以通过以下方式获取实时值：

const drag = Draggable.get(".element");

console.log(drag.x);        // 当前 x 位移（px）
console.log(drag.y);        // 当前 y 位移（px）
console.log(drag.rotation); // 当前旋转角度
console.log(drag.scrollY);  // 当前 scrollTop 值（如果 type 是 scrollTop）

---

✅ 总结：常用 type 对照表

type 值	用途	是否常用
"x"	水平滑块	✅ 高频
"y"	垂直滑块	✅ 高频
"x,y"	自由拖拽（窗口/图标）	✅ 最常用
"rotation"	旋钮、转盘	✅ 中频
"scrollTop"	自定义垂直滚动条	✅ 中频
"scrollLeft"	自定义水平滚动条	✅ 中频
"top,left"	兼容旧布局（不推荐）	❌ 少用

---

通过合理选择 type，你可以用极少的代码实现丰富的交互效果。结合 bounds、inertia、事件回调（onDrag 等），Draggable 几乎能满足所有拖拽需求！

✅ 总结

术语	含义
Draggable	GSAP 官方拖拽插件，提供高性能、跨平台、可定制的拖拽交互能力

代码是一个典型的 "受限区域内的基础拖拽" 示例，非常适合入门。通过组合 bounds、type、inertia 和事件回调，你可以轻松实现从简单 UI 控件到复杂游戏交互的各种需求。