gsap 配置解读 --5

什么是ScrollTo

 <header>
    <h1>案例 29：ScrollTo 平滑滚动</h1>
    <button id="to-second">滚动到第二屏</button>
  </header>
  <section>
    <div class="panel">第一屏内容</div>
  </section>
  <section id="second">
    <div class="panel">第二屏内容</div>
  </section>
  <section>
    <div class="panel">第三屏内容</div>
  </section>
  <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/ScrollToPlugin.min.js"></script>
  <script>
    const button = document.querySelector("#to-second");

    // 注册 ScrollToPlugin
    gsap.registerPlugin(ScrollToPlugin);

    button.addEventListener("click", () => {
      gsap.to(window, {
        duration: 1,
        scrollTo: "#second",
        ease: "power2.out"
      });
    });
  </script>

ScrollToPlugin 是 GSAP（GreenSock Animation Platform） 提供的一个轻量级但非常实用的插件，用于实现 平滑、可控的页面滚动动画------无论是滚动到页面某个元素、指定坐标，还是精确控制滚动行为。

---

📌 简单定义：

ScrollToPlugin 让你用 GSAP 的动画语法（如 duration、ease）驱动浏览器窗口或任意可滚动容器，平滑滚动到目标位置。

它解决了原生 window.scrollTo() 只能"瞬间跳转"或简单 behavior: 'smooth' 缺乏控制的问题。

---

✅ 核心能力：

1. 滚动到多种目标

// 滚动到元素（通过选择器或 DOM 节点）
scrollTo: "#second"
scrollTo: document.querySelector(".footer")

// 滚动到具体坐标
scrollTo: { y: 500 }          // 垂直滚动到 500px
scrollTo: { x: 200, y: 300 }  // 水平 + 垂直

// 滚动到页面顶部/底部
scrollTo: { y: "top" }
scrollTo: { y: "bottom" }

// 滚动到元素并预留偏移（如避开固定导航栏）
scrollTo: { y: "#section", offsetY: 80 }

2. 完全控制动画体验

• duration: 滚动持续时间（秒）
• ease: 缓动函数（如 "power2.out"、"expo.inOut"）
• 可暂停、反向、加入时间轴（Timeline）

3. 支持任意可滚动容器

不仅限于 window，也可用于 <div style="overflow: auto"> 等局部滚动区域：

gsap.to(scrollableDiv, {
  duration: 1,
  scrollTo: { y: 1000 }
});

---

🔧 在你的代码中：

gsap.to(window, {
  duration: 1,
  scrollTo: "#second",      // 平滑滚动到 id="second" 的 <section>
  ease: "power2.out"        // 先快后慢的缓动效果
});

点击按钮后：

• 页面不会"瞬间跳转"到第二屏；
• 而是用 1 秒时间 ，以 优雅的缓动曲线 滚动到 #second 元素的顶部；
• 用户体验更自然、专业。

---

🌟 典型应用场景：

场景	示例
导航跳转	点击菜单项平滑滚动到对应章节
"回到顶部"按钮	带缓动的返回顶部动画
表单错误定位	提交失败时滚动到第一个错误字段
交互式故事页	按钮触发滚动到下一情节
局部滚动容器	在聊天窗口中自动滚动到底部

---

⚙️ 高级选项（常用）：

scrollTo: {
  y: "#target",
  offsetX: 0,       // 水平偏移
  offsetY: 60,      // 垂直偏移（常用于避开固定头部）
  autoKill: true    // 用户手动滚动时自动中断动画（默认 true）
}

---

🆚 对比原生方案：

方式	控制力	缓动	中断处理	兼容性
window.scrollTo({ behavior: 'smooth' })	低	仅线性	差	现代浏览器
ScrollToPlugin	高	任意 GSAP 缓动	智能中断	全浏览器（含 IE11）

---

⚠️ 注意事项：

• 必须注册插件：gsap.registerPlugin(ScrollToPlugin)
• 目标元素必须已存在于 DOM 中
• 如果结合 ScrollSmoother（平滑滚动容器），需使用其 API 而非直接操作 window

---

📚 官方文档：

👉 greensock.com/docs/v3/Plu...

---

✅ 总结：

ScrollToPlugin 是 GSAP 中实现"专业级页面导航动画"的标准工具------它用极简的代码，赋予滚动行为电影般的流畅感和精准控制，是提升网站交互质感的必备插件。

什么是SplitText

<div class="card">
      <h1 id="headline">SplitText 可以拆分文字做逐字动画</h1>
      <button id="play">逐字出现</button>
    </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/SplitText.min.js"></script>
    <script>
      const headline = document.querySelector("#headline");
      const playButton = document.querySelector("#play");

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

      let split;

      playButton.addEventListener("click", () => {
        if (split) {
          split.revert();
        }

        // 将文字拆分为字符
        split = new SplitText(headline, { type: "chars" });

        gsap.from(split.chars, {
          opacity: 0,
          y: 20,
          duration: 0.6,
          ease: "power2.out",
          stagger: 0.04
        });
      });
    </script>

SplitText 是 GSAP（GreenSock Animation Platform） 提供的一个强大工具（虽然叫"插件"，但实际是一个独立的实用类），用于将 HTML 文本智能地拆分为可单独动画的 <span> 元素，从而实现精细的逐字、逐词或逐行动画效果。

---

📌 简单定义：

SplitText 能把一段普通文字（如 <h1>Hello</h1>）自动转换成包裹在 <span> 中的字符、单词或行，让你可以用 GSAP 对每个部分做独立动画。

例如：

<!-- 原始 -->
<h1 id="headline">你好</h1>

<!-- SplitText({ type: "chars" }) 处理后 -->
<h1 id="headline">
  <span class="char">你</span>
  <span class="char">好</span>
</h1>

---

✅ 核心功能：三种拆分模式

模式	说明	生成结构
type: "chars"	拆分为单个字符（包括中文、英文、标点）	每个字一个 <span class="char">
type: "words"	拆分为单词（以空格/标点分隔）	每个词一个 <span class="word">
type: "lines"	拆分为视觉上的行（根据实际换行）	每行外层包 <div class="line">

💡 也可组合使用：type: "words, chars" → 先分词，再把每个词拆成字。

---

split = new SplitText(headline, { type: "chars" });

gsap.from(split.chars, {
  opacity: 0,
  y: 20,
  duration: 0.6,
  ease: "power2.out",
  stagger: 0.04 // 每个字符延迟 0.04 秒启动
});

• 点击按钮时，标题文字被拆成单个字符；
• 每个字符从下方 20px、透明 的状态，依次向上淡入；
• 形成"逐字打字机"或"文字飞入"的经典动效。

⚠️ 注意：每次点击前调用 split.revert() 是为了还原原始 HTML 结构 ，避免重复嵌套 <span> 导致样式错乱。

---

🌟 为什么需要 SplitText？

如果不使用它，手动写 <span> 包裹每个字：

• 繁琐：尤其对动态内容或 CMS 内容不现实；
• 破坏语义：影响 SEO 和可访问性（屏幕阅读器）；
• 难以维护。

而 SplitText：

• 非破坏性：原始文本保持不变，仅运行时包装；
• 智能处理：正确保留 HTML 标签、空格、换行、内联样式；
• 支持复杂排版 ：包括多行、响应式断行（lines 模式会监听 resize）。

---

🛠️ 高级特性：

• 保留原始样式：即使文字有 CSS 动画、颜色、字体，拆分后依然生效。
• 与 ScrollTrigger 结合：实现"滚动到此处时逐字出现"。
• 支持 SVG 文本（需额外配置）。
• 可自定义包裹标签 ：默认 <span>，也可设为 <div> 等。

---

⚠️ 注意事项：

• 不是免费插件 ：在 GSAP 3 中，SplitText 属于 Club 会员专属功能（可试用，但商业项目需授权）。
• 不要重复拆分 ：务必在重新拆分前 revert()，否则会嵌套多层 <span>。
• 对 SEO 友好：因为原始 HTML 不变，搜索引擎仍能读取完整文本。

---

📚 官方文档：

👉 greensock.com/docs/v3/Plu...

---

✅ 总结：

SplitText 是 GSAP 中实现"高级文字动画"的基石工具------它将枯燥的文本转化为可编程的动画单元，让逐字淡入、弹跳、飞入等效果变得简单、可靠且专业，广泛应用于官网、片头、交互叙事等场景。

什么是TextPlugin

 <div class="card">
      <h1>案例 31：TextPlugin 数字滚动</h1>
      <p>让文本从 0 变化到目标值。</p>
      <div class="counter" id="counter">0</div>
      <button id="play">开始计数</button>
    </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/TextPlugin.min.js"></script>
    <script>
      const counter = document.querySelector("#counter");
      const playButton = document.querySelector("#play");

      // 注册 TextPlugin
      gsap.registerPlugin(TextPlugin);

      const tween = gsap.to(counter, {
        duration: 1.6,
        text: "1280",
        ease: "power2.out",
        paused: true
      });

      playButton.addEventListener("click", () => {
        counter.textContent = "0";
        tween.restart();
      });
    </script>

TextPlugin 是 GSAP（GreenSock Animation Platform） 提供的一个轻巧但非常实用的插件，专门用于对 DOM 元素的文本内容进行动画化更新 。它最经典的应用就是实现 "数字滚动计数器" 效果（如从 0 平滑变化到 1280），但也支持普通文本的渐变替换。

---

📌 简单定义：

TextPlugin 能让元素的 textContent 从一个值"动画过渡"到另一个值------对于数字，它会逐帧递增/递减；对于文字，它可模拟打字、随机字符替换等效果。

---

✅ 核心功能：

1. 数字滚动（最常用）

gsap.to(element, {
  duration: 2,
  text: "1000" // 自动从当前数字（如 "0"）滚动到 1000
});

• 自动识别数字并进行数值插值；
• 支持整数、小数、带千分位格式（需配合 delimiter）；
• 可设置前缀/后缀（如 $、%）。

2. 文本替换动画

gsap.to(element, {
  text: "Hello World",
  duration: 1.5
});

• 默认行为：直接替换（无中间动画）；
• 但配合 delimiter 或自定义逻辑，可实现打字机、乱码过渡等（不过复杂文本动画更推荐 ScrambleTextPlugin）。

---

gsap.to(counter, {
  duration: 1.6,
  text: "1280",        // 目标文本
  ease: "power2.out",
  paused: true
});

• 初始文本是 "0"；
• 点击按钮后，TextPlugin 会：
  • 解析 "0" 和 "1280" 都是有效数字；
  • 在 1.6 秒内 ，将文本内容从 0 → 1 → 2 → ... → 1280 逐帧更新；
  • 视觉上形成"数字飞速增长"的计数器效果。

💡 注意：每次播放前重置 counter.textContent = "0" 是为了确保动画从起点开始。

---

⚙️ 常用配置选项（通过 text 对象）：

gsap.to(element, {
  text: {
    value: "¥1,280",     // 目标值
    delimiter: ",",      // 千分位分隔符
    prefix: "¥",         // 前缀（也可直接写在 value 里）
    suffix: " 元",       // 后缀
    padSpace: true       // 保持文本长度一致（防跳动）
  },
  duration: 2
});

---

🌟 典型应用场景：

场景	示例
数据看板	用户数、销售额、点赞数的动态增长
加载进度	"加载中... 78%"
倒计时/计时器	活动剩余时间、秒表
游戏得分	分数变化动画
简单文本切换	状态提示（"成功" → "完成"）

---

🆚 对比其他方案：

方法	数字滚动	文本动画	精确控制	性能
手动 setInterval	✅	❌	低	一般
CSS + JS 拼接	⚠️ 复杂	⚠️ 有限	低	一般
TextPlugin	✅✅✅	✅	高（GSAP 时间轴）	优

---

⚠️ 注意事项：

• 只作用于 textContent ，不会影响 HTML 标签（即不能插入 <strong> 等）；
• 如果起始或目标文本不是纯数字，则直接替换（无滚动）；
• 要实现更炫的文字扰动 （如乱码过渡），应使用 ScrambleTextPlugin；
• 免费可用 ：TextPlugin 是 GSAP 的标准免费插件（无需会员）。

---

📚 官方文档：

👉 greensock.com/docs/v3/Plu...

---

✅ 总结：

TextPlugin 是 GSAP 中实现"数字计数器动画"的首选工具------它用一行代码就能将静态数字变成动态增长的视觉焦点，简单、高效、且完全集成于 GSAP 动画生态系统。

什么是EasePack

 <div class="card">
    <h1>案例 32：EasePack 特殊缓动</h1>
    <p>RoughEase / SlowMo / ExpoScaleEase 都在 EasePack 中。</p>
    <div class="row">
      <div>
        <div class="lane">
          <div class="ball" id="ballA"></div>
        </div>
        <div class="label">RoughEase</div>
      </div>
      <div>
        <div class="lane">
          <div class="ball" id="ballB"></div>
        </div>
        <div class="label">SlowMo</div>
      </div>
      <div>
        <div class="lane">
          <div class="ball" id="ballC"></div>
        </div>
        <div class="label">ExpoScaleEase</div>
      </div>
    </div>
    <button id="play">播放缓动</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>

  <!-- RoughEase, ExpoScaleEase and SlowMo are all included in the EasePack file -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/EasePack.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomEase.min.js"></script>
  <!-- CustomBounce requires CustomEase -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomBounce.min.js"></script>
  <!-- CustomWiggle requires CustomEase -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomWiggle.min.js"></script>
  <script>
    const ballA = document.querySelector("#ballA");
    const ballB = document.querySelector("#ballB");
    const ballC = document.querySelector("#ballC");
    const playButton = document.querySelector("#play");

    // 预设三个缓动
    const rough = RoughEase.ease.config({
      strength: 1.5,
      points: 20,
      template: Power1.easeInOut,
      randomize: true
    });
    const slowMo = SlowMo.ease.config(0.7, 0.7, false);
    const expoScale = ExpoScaleEase.config(1, 3);

    const timeline = gsap.timeline({ paused: true });
    timeline.to(ballA, { y: 100, duration: 1.2, ease: rough }, 0);
    timeline.to(ballB, { y: 100, duration: 1.2, ease: slowMo }, 0);
    timeline.to(ballC, { y: 100, duration: 1.2, ease: expoScale }, 0);

    playButton.addEventListener("click", () => {
      gsap.set([ballA, ballB, ballC], { y: 0 });
      timeline.restart();
    });
  </script>

RoughEase、SlowMo 和 ExpoScaleEase 是 GSAP（GreenSock Animation Platform） 中三个非常有特色的高级缓动函数（easing functions） ，它们都包含在 EasePack 插件中。它们超越了传统的"入/出"缓动（如 easeInOut），提供了更具创意和物理感的动画节奏。

下面分别解释它们的作用和适用场景：

---

1. 🌀 RoughEase ------ "抖动式"缓动

✅ 作用：

模拟不规则、随机抖动的运动效果，常用于表现：

• 手绘感、草图风格
• 震动、故障、不稳定状态
• 卡通式的"弹跳后晃动"

🔧 核心参数（通过 .config() 设置）：

const rough = RoughEase.ease.config({
  strength: 1.5,     // 抖动强度（0~2，默认 1）
  points: 20,        // 抖动点数量（越多越密集）
  template: Power1.easeInOut, // 基础缓动曲线（决定整体趋势）
  randomize: true    // 是否每次播放随机（true=更自然）
});

🎯 在你的代码中：

• 小球 A 下落时会上下轻微抖动，不是平滑移动，而是像"被手抖着拉下来"。

💡 适合：游戏中的受击反馈、加载失败提示、趣味 UI。

---

2. 🐢 SlowMo ------ "慢动作中心"缓动

✅ 作用：

让动画在中间阶段变慢 ，两端加速，形成"慢镜头"效果。

特别适合强调某个关键状态（如悬停、高亮、停顿）。

🔧 核心参数：

const slowMo = SlowMo.ease.config(
  linearRatio,   // 中间匀速部分占比（0~1）
  power,         // 两端加速强度（0=线性，1=强缓出）
  yoyoMode       // 是否用于往返动画（true=对称）
);

例如：SlowMo.ease.config(0.7, 0.7, false)

→ 动画 70% 的时间以近似匀速缓慢进行，开头和结尾快速过渡。

• 小球 B 下落时，大部分时间缓慢移动，只在开始和结束瞬间加速，仿佛"优雅降落"。

💡 适合：产品展示、LOGO 入场、需要突出中间状态的动画。

---

3. 📏 ExpoScaleEase ------ "指数缩放"缓动

✅ 作用：

实现基于比例（scale）或指数增长/衰减 的非线性缓动。

常用于：

• 缩放动画（从 1x 到 10x）
• 音量/亮度/透明度等对数感知属性
• 模拟真实世界的指数变化（如声音衰减、光强）

🔧 核心参数：

const expoScale = ExpoScaleEase.config(startValue, endValue);

• 它会将动画值从 startValue 到 endValue 按指数曲线映射。
• 通常配合 scale、opacity 或自定义属性使用。

🎯 虽然用于 y，但效果仍体现非线性：

• 小球 C 的下落速度先快后慢 （或反之，取决于范围），但变化是非线性的，比 power2 更"陡峭"。

💡 更典型用法：

gsap.to(circle, {
  scale: 5,
  ease: ExpoScaleEase.config(1, 5) // 从 1 倍到 5 倍的指数缩放
});

💡 适合：放大镜效果、爆炸扩散、雷达扫描、声波可视化。

---

🆚 对比总结：

缓动类型	视觉特点	典型用途
RoughEase	随机抖动、不规则	故障风、手绘感、震动反馈
SlowMo	中间慢、两头快	强调关键帧、优雅停顿
ExpoScaleEase	指数级加速/减速	缩放、对数感知属性、物理模拟

---

⚠️ 注意事项：

• 这些缓动都来自 EasePack，需单独引入（如你代码中已做）；
• 它们可以像普通 ease 一样用在任何 GSAP 动画中；
• 结合 Timeline 可创建复杂节奏组合。

---

📚 官方文档：

• Ease Visualizer（可交互体验）：greensock.com/ease-visual...
• EasePack 文档：greensock.com/docs/v3/Eas...

---

✅ 总结：

RoughEase、SlowMo、ExpoScaleEase 是 GSAP 赋予动画"性格"的秘密武器------它们让运动不再机械，而是充满随机性、戏剧性或物理真实感，是打造高级交互动效的关键工具。

什么是 CustomEase

<div class="card">
      <h1>案例 33：CustomEase 自定义缓动</h1>
      <p>用贝塞尔曲线定义缓动曲线。</p>
      <div class="track">
        <div class="block" id="block"></div>
      </div>
      <button id="play">播放自定义缓动</button>
    </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/CustomEase.min.js"></script>
    <script>
      const block = document.querySelector("#block");
      const playButton = document.querySelector("#play");

      // 注册 CustomEase
      gsap.registerPlugin(CustomEase);

      // 创建一个自定义缓动曲线
      CustomEase.create("myEase", "0.25,0.1,0.25,1");

      const tween = gsap.to(block, {
        x: 470,
        duration: 1.4,
        ease: "myEase",
        paused: true
      });

      playButton.addEventListener("click", () => {
        tween.restart();
      });
    </script>

CustomEase 是 GSAP（GreenSock Animation Platform） 提供的一个强大插件，允许你通过自定义贝塞尔曲线（cubic-bezier）来创建完全个性化的缓动函数（easing function），从而精确控制动画的速度变化节奏。

---

📌 简单定义：

CustomEase 让你像在 CSS 或设计工具中那样，用 4 个控制点定义一条缓动曲线，并将其注册为可复用的 GSAP 缓动名称，用于任何动画。

它打破了内置缓动（如 power2.inOut、elastic）的限制，实现电影级、品牌专属或物理拟真的运动节奏。

---

✅ 核心原理：贝塞尔曲线

缓动曲线本质是一条 三次贝塞尔曲线（Cubic Bezier），由 4 个点定义：

• 起点固定为 (0, 0)
• 终点固定为 (1, 1)
• 中间两个控制点 (x1, y1) 和 (x2, y2) 决定曲线形状

在 CustomEase 中，你只需提供这 4 个数值（按顺序）：

" x1, y1, x2, y2 "

例如你的代码：

CustomEase.create("myEase", "0.25,0.1,0.25,1");

表示：

• 控制点 1: (0.25, 0.1)
• 控制点 2: (0.25, 1)

这条曲线的特点是：启动非常快（y1 很低），然后突然减速并平稳结束，形成一种"急冲后刹车"的效果。

---

🔧 使用步骤：

1. 引入插件

   <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomEase.min.js"></script>

2. 注册自定义缓动

   CustomEase.create("myEase", "0.25,0.1,0.25,1");

   • 第一个参数：缓动名称（字符串，如 "myEase"）
   • 第二个参数：贝塞尔控制点（4 个 0~1 之间的数字，用逗号分隔）

3. 在动画中使用

   gsap.to(block, {
     x: 470,
     duration: 1.4,
     ease: "myEase" // 直接使用注册的名称
   });

---

🌟 优势 vs 其他方式：

方式	灵活性	可视化	复用性	性能
CSS cubic-bezier()	✅	✅（开发者工具）	❌（需重复写）	✅
手动计算进度	❌	❌	❌	⚠️
CustomEase	✅✅✅	✅（配合 GSAP 工具）	✅✅✅（全局注册）	✅✅（预计算优化）

💡 CustomEase 会预计算并缓存曲线数据，运行时性能极高，适合复杂动画。

---

🛠️ 如何获取贝塞尔值？

1. 使用 GSAP 官方工具 （推荐！）

   👉 GSAP Ease Visualizer

   • 拖动控制点实时预览动画
   • 自动生成 CustomEase 代码

2. 从 CSS 复制

   如果你在 CSS 中写了：

   transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);

   那么值就是 "0.25,0.1,0.25,1"

3. 从 Figma / After Effects 导出

   许多设计工具支持导出贝塞尔缓动参数。

---

🎨 典型应用场景：

效果	贝塞尔示例	用途
弹性回弹	"0.68,-0.55,0.27,1.55"	按钮点击反馈
缓入缓出加强版	"0.33,0,0.67,1"	平滑过渡
快速启动+慢速结束	"0.25,0.1,0.25,1"（你的例子）	强调终点状态
延迟启动	"0.5,0,0.75,0"	悬停后才开始动画

---

⚠️ 注意事项：

• 所有数值必须在 0 到 1 之间（超出会导致不可预测行为）；
• 注册一次后，可在整个项目中复用 （如 "brandBounce"、"softEase"）；
• 免费可用 ：CustomEase 是 GSAP 的标准插件（无需 Club 会员）；
• 若需更复杂曲线（如多段），可结合 CustomWiggle 或 CustomBounce（它们依赖 CustomEase）。

---

📚 官方资源：

• 文档：greensock.com/docs/v3/Plu...
• 可视化工具：greensock.com/ease-visual...

---

✅ 总结：

CustomEase 是 GSAP 中实现"精准运动设计"的终极工具------它把缓动从"选择预设"升级为"自由创作"，让开发者和设计师能用同一套语言定义品牌专属的动画节奏，是打造高端用户体验的核心技术之一。