gsap 配置解读 --4

morphSVG 是什么

js 复制代码

 <div class="card">
      <h1>案例 22：MorphSVG 形状变形</h1>
      <p>把一个 SVG 形状平滑变形为另一个。</p>
      <svg viewBox="0 0 200 200">
        <path
          id="shape"
          class="shape"
          d="M40 100 C40 40, 160 40, 160 100 C160 160, 40 160, 40 100 Z"
        />
        <path
          id="target"
          d="M100 20 L180 180 L20 180 Z"
          fill="none"
          stroke="none"
        />
      </svg>
      <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/MorphSVGPlugin.min.js"></script>
    <script>
      const shape = document.querySelector("#shape");
      const target = document.querySelector("#target");
      const playButton = document.querySelector("#play");

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

      const tween = gsap.to(shape, {
        duration: 1.4,
        ease: "power2.inOut",
        morphSVG: target,
        paused: true
      });

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

morphSVG 是 GSAP（GreenSock Animation Platform） 动画库中的一个高级插件（MorphSVGPlugin），专门用于实现 SVG 路径（<path>）之间的平滑形状变形动画。

📌 简单定义：

morphSVG 可以让一个 SVG 形状（如圆形、心形、自定义路径）流畅地"变形"为另一个完全不同的 SVG 形状，即使它们的点数、结构完全不同。

✅ 核心能力：

自动路径匹配

即使两个 <path> 的 d 属性（路径数据）包含不同数量的锚点或命令（比如一个有 4 个点，另一个有 20 个点），MorphSVGPlugin 会智能地插入/删除点，使变形过程平滑自然。
无需手动对齐

传统变形需要手动确保路径点数一致，而 morphSVG 自动处理这些复杂细节。
支持多种目标格式：
- 另一个 <path> 元素（如你的代码中的 #target）
- SVG 路径字符串（如 "M10,10 L50,50 ..."）
- 基本 SVG 形状（如 "circle", "rect" ------ 插件会自动转换为等效路径）
高性能 & 精确

基于数学算法优化，确保变形流畅且视觉准确。

js 复制代码

gsap.to(shape, {
  duration: 1.4,
  ease: "power2.inOut",
  morphSVG: target, // 把 #shape 变形成 #target 的形状
  paused: true
});

起始形状 ：#shape 是一个椭圆/胶囊形（用两个三次贝塞尔曲线构成的闭合路径）。
目标形状 ：#target 是一个三角形 （M100 20 L180 180 L20 180 Z）。
点击按钮后，椭圆会平滑地变成三角形，中间经过自然的过渡形态。

💡 注意：#target 设置了 fill="none" stroke="none"，因为它只是作为"目标形状数据"存在，不需要显示出来。

⚠️ 重要前提：

morphSVG 只能作用于 <path> 元素 。
如果你有 <circle>、<rect> 等，GSAP 会自动将其转换为等效的 <path>（需插件支持）。
需要加载 MorphSVGPlugin（如你代码中已引入）。
GSAP 3 中该插件属于会员功能（免费版不能用于商业项目，但可试用）。

🌟 应用场景：

Logo 动画变形（如从图标变文字）
加载动画（形状循环变化）
数据可视化（图表类型切换）
创意交互动画（按钮 hover 变形、图标切换等）

📚 官方文档：

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

✅ 总结：

morphSVG 是 GSAP 中实现"SVG 形状魔法变形"的利器------只需一行代码，就能让任意两个 SVG 形状之间产生电影级的流畅过渡效果，极大简化了复杂矢量动画的开发。

什么是 Observer

js 复制代码

 <div class="card">
      <h1>案例 23：Observer 监听输入</h1>
      <p>滚轮或触摸滑动时移动条形。</p>
      <div class="stage">
        <div class="bar" id="bar"></div>
      </div>
      <div class="hint">在页面上滚动鼠标或触摸滑动</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/Observer.min.js"></script>
    <script>
      const bar = document.querySelector("#bar");
      const limit = 380;
      let position = 0;

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

      Observer.create({
        target: window,
        type: "wheel,touch,pointer",
        onChange: (event) => {
          position += event.deltaX + event.deltaY;
          position = gsap.utils.clamp(-limit, limit, position);
          gsap.to(bar, { x: position, duration: 0.3, ease: "power2.out" });
        }
      });
    </script>

Observer 是 GSAP（GreenSock Animation Platform） 提供的一个实用插件（Observer plugin），用于统一监听和处理多种用户输入事件，如：

鼠标滚轮（wheel）
触摸滑动（touch）
指针设备移动（pointer，包括鼠标、触控笔、触摸屏等）

它的核心目标是：跨设备、跨浏览器地标准化输入行为，让你用一套简洁的 API 响应各种交互，而无需手动处理不同事件的兼容性问题。

📌 简单定义：

Observer 是一个"输入事件聚合器"，它把滚轮、触摸、指针等操作统一转化为带有 deltaX / deltaY 的标准化数据，方便你驱动动画或逻辑。

✅ 核心特性：

多输入类型支持

通过 type: "wheel,touch,pointer" 一行代码同时监听多种交互方式，适配桌面（滚轮）和移动端（滑动）。
标准化增量值（delta）
- event.deltaX：水平方向的滚动/滑动量（向右为正）
- event.deltaY：垂直方向的滚动/滑动量（向下为正）
  不同设备/浏览器的原始事件（如 wheel.deltaY、touchmove 位移）会被自动归一化，数值更一致。
防抖与性能优化

内置节流（throttle）机制，避免高频事件导致性能问题。
灵活的目标绑定

可监听 window、document 或任意 DOM 元素。
额外控制选项
- preventDefault: 是否阻止默认滚动行为
- tolerance: 触发阈值（避免误触）
- dragMinimum: 最小拖拽距离

js 复制代码

Observer.create({
  target: window,                     // 监听整个窗口
  type: "wheel,touch,pointer",        // 同时响应滚轮、触摸、指针
  onChange: (event) => {
    position += event.deltaX + event.deltaY; // 累加水平+垂直移动量
    position = gsap.utils.clamp(-limit, limit, position); // 限制范围 [-380, 380]
    gsap.to(bar, { x: position, ... });       // 驱动条形移动
  }
});

当你在页面上滚动鼠标滚轮 或在手机上左右/上下滑动时，
Observer 会捕获这些动作，并计算出 deltaX（水平）和 deltaY（垂直），
代码将两者相加（实现"任意方向滑动都影响条形位置"），
然后用 GSAP 动画平滑更新 .bar 的 x 位置。

💡 注意：这里把 deltaX + deltaY 合并使用，意味着上下滚轮也会移动条形 （通常只用 deltaX 做横向拖拽）。这是一种简化设计，实际项目中可能只取某一方向。

🌟 典型应用场景：

场景	说明
自定义滚动容器	禁用原生滚动，用 Observer 驱动内容平移
视差/交互动画	滚动时触发元素位移、缩放、透明度变化
移动端拖拽交互	实现可拖拽的时间轴、图片对比滑块等
游戏控制	用滚轮/触摸控制角色移动或视角

⚠️ 注意事项：

Observer 不会阻止浏览器默认行为 （如页面滚动），除非设置 preventDefault: true。
如果只想监听特定方向 ，建议分开处理 deltaX 和 deltaY，避免干扰。
在触摸设备上，若需精确拖拽，通常配合 Draggable 插件更合适；Observer 更适合"感应式"输入（如滚动触发）。

📚 官方文档：

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

✅ 总结：

Observer 是 GSAP 中用于"感知用户输入"的瑞士军刀------它抹平了滚轮、触摸、指针设备的差异，提供统一、流畅、高性能的交互数据，是构建现代交互动画不可或缺的工具。

什么是physics2D

js 复制代码

<div class="card">
      <h1>案例 24：Physics2D 抛物线</h1>
      <p>模拟速度与重力的抛物线。</p>
      <div class="stage">
        <div class="ball" id="ball"></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/Physics2DPlugin.min.js"></script>
    <script>
      const ball = document.querySelector("#ball");
      const playButton = document.querySelector("#play");

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

      const tween = gsap.to(ball, {
        duration: 1.6,
        physics2D: {
          velocity: 420,
          angle: 60,
          gravity: 600
        },
        paused: true,
        onComplete: () => {
          gsap.set(ball, { clearProps: "all" });
        }
      });

      playButton.addEventListener("click", () => {
        gsap.set(ball, { x: 0, y: 0 });
        tween.restart();
      });
    </script>

Physics2D 是 GSAP（GreenSock Animation Platform） 提供的一个专用插件（Physics2DPlugin），用于模拟二维空间中的基础物理运动，比如抛物线轨迹、弹道、重力下落等效果。

📌 简单定义：

Physics2D 插件让你只需指定初始速度（velocity）、发射角度（angle）和重力（gravity），就能自动计算并驱动元素沿真实的物理抛物线运动。

它把复杂的物理公式（如匀加速运动、矢量分解）封装成简单的配置项，无需手动编写运动方程。

✅ 核心参数说明：

js 复制代码

physics2D: {
  velocity: 420,   // 初始速度（单位：像素/秒）
  angle: 60,       // 发射角度（单位：度，0°=向右，90°=向上）
  gravity: 600     // 重力加速度（单位：像素/秒²，方向向下）
}

GSAP 会自动将速度分解为水平（x）和垂直（y）分量：

vx = velocity * cos(angle)
vy = velocity * sin(angle)

然后根据物理公式逐帧更新位置：

x(t) = vx * t
y(t) = vy * t + 0.5 * gravity * t²

从而生成自然的抛物线轨迹。

🔧 案例中发生了什么？

点击"发射小球"按钮；
小球被重置到起点（x: 0, y: 0）；
GSAP 启动 Physics2D 动画：
- 以 420 像素/秒 的初速度，
- 60° 角（斜向上）发射，
- 受到 600 像素/秒² 的重力影响（向下加速）；
小球沿一条先上升后下降的抛物线飞行；
动画结束后，clearProps: "all" 清除内联样式，便于重复播放。

🌟 典型应用场景：

场景	说明
游戏开发	子弹、炮弹、跳跃角色的轨迹
交互动效	点击时元素"弹出"并落回（如点赞动画）
数据可视化	模拟粒子运动、物理演示
趣味 UI	抛物线菜单、飞入购物车的商品

⚠️ 注意事项：

Physics2D 只控制 x 和 y 属性 （即 transform: translate(x, y)），不影响旋转、缩放等。
它不处理碰撞检测（如撞墙反弹），如需复杂物理，应使用专业引擎（如 Matter.js、Box2D）。
所有单位基于CSS 像素 和秒，数值需根据视觉效果调整（例如 gravity: 600 比真实地球重力大很多，只为视觉流畅）。

📚 官方文档：

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

✅ 总结：

Physics2D 是 GSAP 中实现"真实感抛物线运动"的快捷方式------你只需提供初速度、角度和重力，它就能自动生成符合牛顿力学的平滑轨迹，让网页动画更具物理直觉和趣味性。

PhysicsProps是什么

js 复制代码

 <div class="card">
      <h1>案例 25：PhysicsProps 物理属性</h1>
      <p>同时给 x / y 设置速度与加速度。</p>
      <div class="stage">
        <div class="square" id="square"></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/PhysicsPropsPlugin.min.js"></script>
    <script>
      const square = document.querySelector("#square");
      const playButton = document.querySelector("#play");

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

      const tween = gsap.to(square, {
        duration: 1.6,
        physicsProps: {
          x: { velocity: 380, acceleration: -100 },
          y: { velocity: -420, acceleration: 600 }
        },
        paused: true,
        onComplete: () => {
          gsap.set(square, { clearProps: "all" });
        }
      });

      playButton.addEventListener("click", () => {
        gsap.set(square, { x: 0, y: 0 });
        tween.restart();
      });
    </script>

PhysicsProps 是 GSAP（GreenSock Animation Platform） 提供的一个高级插件（PhysicsPropsPlugin），用于为任意 CSS 属性（如 x、y、rotation、scale 等）模拟基于"初速度"和"加速度"的物理运动。

与 Physics2D（仅限二维抛物线）不同，PhysicsProps 更灵活、通用------你可以分别控制每个属性的物理行为。

📌 简单定义：

PhysicsProps 允许你为元素的任意可动画属性设置初始速度（velocity）和恒定加速度（acceleration），GSAP 会根据物理公式自动计算其随时间变化的值。

它本质上实现了：
位移 = 初速度 × 时间 + ½ × 加速度 × 时间²

（即经典运动学公式 <math xmlns="http://www.w3.org/1998/Math/MathML"> s = v 0 t + 1 2 a t 2 s = v_0 t + \frac{1}{2} a t^2 </math>s=v0t+21at2）

✅ 核心特点：

按属性独立控制 ：可以只给 x 加速度，y 只有速度，rotation 单独减速等。
支持任意数值型属性 ：不仅限于位置，还可用于 opacity、scale、backgroundColor（需配合其他插件）等。
精确物理模拟：基于真实时间（秒）和像素/单位/秒² 的加速度模型。

🔧 在你的代码中：

js 复制代码

physicsProps: {
  x: { velocity: 380, acceleration: -100 },
  y: { velocity: -420, acceleration: 600 }
}

这意味着：

方向	初速度（velocity）	加速度（acceleration）	物理含义
x（水平）	`+380 px/s`（向右）	`-100 px/s²`（向左减速）	小方块先快速右移，但逐渐慢下来，甚至可能反向
y（垂直）	`-420 px/s`（向上）	`+600 px/s²`（向下加速）	小方块先快速上冲，然后被"重力"拉回并加速下落

💡 注意：y 轴在网页中是向下为正 ，所以 velocity: -420 表示向上运动 ，而 acceleration: 600 表示向下加速（类似重力）。

这实际上也形成了一个抛物线轨迹 ，但比 Physics2D 更自由------你可以让 x 减速、y 加速，甚至让 rotation 也参与物理运动。

🆚 `PhysicsProps` vs `Physics2D`

特性	`Physics2D`	`PhysicsProps`
用途	专为 2D 抛物线设计	通用物理属性模拟
输入方式	`velocity`, `angle`, `gravity`	每个属性单独设 `velocity` 和 `acceleration`
灵活性	低（固定模式）	高（任意组合）
适用属性	仅 `x` 和 `y`	任何数值型属性（`x`, `y`, `rotation`, `scaleX`...）

✅ 简单抛物线 → 用 Physics2D

✅ 复杂多属性物理效果 → 用 PhysicsProps

🌟 应用场景举例：

弹跳方块 ：y 有负初速度 + 正重力加速度，配合 onComplete 实现多次弹跳
旋转减速 ：rotation: { velocity: 720, acceleration: -300 }（转两圈后慢慢停下）
淡入淡出惯性 ：opacity: { velocity: 1, acceleration: -0.5 }
组合动画：位置抛物线 + 自身旋转减速

⚠️ 注意事项：

duration 仍然有效，动画会在指定时间内结束（即使物理上还没"停"）。
如果希望无限物理模拟 （如持续受力），应使用 gsap.ticker 手动更新，而非 to() 动画。
和 Physics2D 一样，不处理碰撞或边界反弹，需自行添加逻辑。

📚 官方文档：

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

✅ 总结：

PhysicsProps 是 GSAP 中实现"精细化物理动画"的利器------它让你像写物理题一样，为每个属性设定初速度和加速度，从而创造出更真实、更动态的交互动效。

什么是PixiPlugin

js 复制代码

   <div class="card">
      <h1>案例 26：PixiPlugin + PixiJS</h1>
      <p>用 GSAP 控制 PixiJS 图形。</p>
      <div id="canvas-wrapper"></div>
      <button id="play">播放动画</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.4.0/dist/pixi.min.js"></script>
    <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/PixiPlugin.min.js"></script>
    <script>
      const wrapper = document.querySelector("#canvas-wrapper");
      const playButton = document.querySelector("#play");

      // 创建 Pixi 应用
      const app = new PIXI.Application({
        width: 520,
        height: 220,
        backgroundColor: 0x0f172a
      });
      wrapper.appendChild(app.view);

      // 创建一个圆形图形
      const circle = new PIXI.Graphics();
      circle.beginFill(0xf97316).drawCircle(0, 0, 30).endFill();
      circle.x = 80;
      circle.y = 110;
      app.stage.addChild(circle);

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

      const tween = gsap.to(circle, {
        duration: 1.6,
        pixi: {
          x: 440,
          y: 110,
          rotation: Math.PI * 2,
          scale: 1.3
        },
        ease: "power2.inOut",
        paused: true
      });

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

PixiPlugin 是 GSAP（GreenSock Animation Platform） 提供的一个专用插件，用于无缝、高效地对 PixiJS 创建的图形对象（如 Sprite、Graphics、Container 等）进行动画控制。

📌 简单定义：

PixiPlugin 让你像操作普通 DOM 元素一样，用 GSAP 的简洁语法直接动画 PixiJS 对象的属性（如位置、旋转、缩放、颜色等），而无需手动更新渲染或处理底层细节。

✅ 为什么需要它？

PixiJS 是一个基于 WebGL 的高性能 2D 渲染引擎，常用于游戏、交互式图形和复杂动画。但它的对象属性（如 x, y, rotation, scale）不是普通的 CSS 属性，而是 JavaScript 对象的数值字段。

如果没有 PixiPlugin，你虽然也能用 GSAP 动画这些值，但：

无法自动触发 Pixi 的渲染更新；
不能直接使用某些 Pixi 特有属性（如 tint 颜色、anchor）；
缩放（scale）是 { x, y } 对象，不能直接写 scale: 1.5。

PixiPlugin 解决了这些问题！

🔧 核心功能：

js 复制代码

gsap.to(circle, {
  duration: 1.6,
  pixi: {
    x: 440,
    y: 110,
    rotation: Math.PI * 2, // 旋转 360°
    scale: 1.3             // 自动作用于 circle.scale.x 和 .y
  },
  ease: "power2.inOut",
  paused: true
});

`PixiPlugin` 做了什么？

属性	普通方式问题	`PixiPlugin` 如何处理
`x`, `y`	可以直接设，但需确保在渲染循环中生效	自动集成，高效更新
`rotation`	单位是弧度，需手动计算	直接接受弧度（也可配置角度）
`scale`	是 `{x: 1, y: 1}` 对象，不能直接赋值数字	写 `scale: 1.3` → 自动设为 `scale.x = scale.y = 1.3`
`tint`	颜色是十六进制数字（如 `0xff0000`）	支持字符串 `"red"`、`"#ff0000"` 自动转数字
`anchor`, `pivot`	同样是 `{x, y}` 对象	支持简写（如 `anchor: 0.5`）

此外，PixiPlugin 还会：

自动与 Pixi 的渲染循环协同，确保动画流畅；
优化性能，避免不必要的计算；
支持 GSAP 所有高级功能：时间轴、缓动、重复、回调等。

🌟 典型可动画的 Pixi 属性（通过 `pixi: {}`）：

js 复制代码

pixi: {
  x: 100,
  y: 200,
  rotation: Math.PI / 2,
  scaleX: 1.5,
  scaleY: 0.8,
  scale: 1.2,        // 同时设 scaleX 和 scaleY
  anchor: 0.5,       // 或 { x: 0.5, y: 0.5 }
  pivot: { x: 10, y: 10 },
  tint: "#ff5500",   // 自动转为 0xff5500
  alpha: 0.7         // 注意：alpha 不需要 pixi 前缀，但也可用
}

💡 注意：像 alpha、visible 等通用属性，即使不写在 pixi 对象里，GSAP 也能直接动画。但强烈建议把 Pixi 专属属性放在 pixi: {} 中，以获得最佳兼容性和功能支持。

🆚 对比：不用插件 vs 用 `PixiPlugin`

❌ 不用插件（繁琐且易错）：

js 复制代码

gsap.to(circle.scale, { x: 1.3, y: 1.3, duration: 1.6 });
gsap.to(circle, { x: 440, y: 110, rotation: Math.PI * 2, duration: 1.6 });
// tint 颜色还得自己转换...

✅ 用 PixiPlugin（简洁直观）：

js 复制代码

gsap.to(circle, {
  pixi: { x: 440, y: 110, rotation: Math.PI * 2, scale: 1.3, tint: "orange" }
});

⚠️ 使用前提：

已引入 PixiJS （如 pixi.min.js）
已引入 GSAP 和 PixiPlugin
调用 gsap.registerPlugin(PixiPlugin)

📚 官方文档：

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

✅ 总结：

PixiPlugin 是 GSAP 与 PixiJS 之间的"翻译官"和"加速器"------它让你用最简洁的代码，高效、准确地驱动高性能 WebGL 图形的复杂动画，是开发 PixiJS 交互动画的必备工具。

什么是ScrambleText

js 复制代码

<div class="card">
      <h1>案例 27：ScrambleText 文字扰动</h1>
      <p>让文字从乱码过渡到目标内容。</p>
      <div class="text" id="text">GSAP 很好用</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/ScrambleTextPlugin.min.js"></script>
    <script>
      const text = document.querySelector("#text");
      const playButton = document.querySelector("#play");

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

      const tween = gsap.to(text, {
        duration: 1.2,
        scrambleText: {
          text: "ScrambleText 很炫酷",
          chars: "上下左右123456",
          revealDelay: 0.2
        },
        paused: true
      });

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

ScrambleText 是 GSAP（GreenSock Animation Platform） 提供的一个趣味性插件（ScrambleTextPlugin），用于实现 "文字扰动"动画效果 ：

即让一段文本从随机乱码字符 开始，经过短暂的"闪烁/跳动"过程，最终平滑揭示出目标文字内容。

📌 简单定义：

ScrambleText 会将元素的文本临时替换为指定的乱码字符（如符号、数字、自定义文字），然后逐字"解码"为目标文本，营造出黑客风、密码破解、数据加载等酷炫效果。

✅ 核心特性：

1. 乱码字符可自定义

通过 chars 参数指定用于扰动的字符集：

js 复制代码

chars: "上下左右123456"  // 使用这些汉字和数字作为乱码
// 或内置预设：
// chars: "upperCase"    → A-Z
// chars: "lowerCase"    → a-z
// chars: "upperAndLowerCase" → A-Za-z
// chars: "all"          → 所有 ASCII 可见字符

2. 控制揭示节奏

revealDelay: 每个字符开始"解码"前的延迟（秒），制造逐字显现效果。
整体动画时长由 duration 控制。

3. 保留原始样式

动画只改变文本内容，不会影响元素的 CSS 样式（字体、颜色、大小等）。

4. 支持中文、emoji 等 Unicode 字符

只要 chars 和目标文本使用合法 Unicode 字符，即可正常工作（如你的例子中使用中文）。

js 复制代码

scrambleText: {
  text: "ScrambleText 很炫酷", // 最终显示的文字
  chars: "上下左右123456",     // 乱码阶段使用的字符
  revealDelay: 0.2            // 每个字延迟 0.2 秒开始揭示
}

动画过程：

初始文本 "GSAP 很好用" 被隐藏；
显示与目标文本相同长度 的乱码（如 "上1下2左3右4"）；
从左到右（或按内部逻辑），每个字符在 0.2s 间隔后，从乱码"跳变"为目标字符；
最终完整显示 "ScrambleText 很炫酷"。

💡 注意：乱码长度 = 目标文本长度。如果目标文本更长，会补乱码；更短则截断。

🌟 典型应用场景：

场景	示例
科技感 UI	登录界面密码验证、数据加载提示
标题动画	页面标题/LOGO 的入场效果
游戏反馈	得分变化、关卡名称切换
营销 H5	"揭晓答案"、"惊喜文案"展示

⚠️ 注意事项：

只作用于纯文本内容 ，不能用于富文本（如包含 <span> 的 HTML）。
如果目标文本包含 HTML 标签，会被当作普通字符处理（不推荐）。
动画结束后，元素的 textContent 会被永久替换为目标文本。
GSAP 3 中该插件属于会员功能（免费版可用于学习/非商业项目）。

📚 官方文档：

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

✅ 总结：

ScrambleText 是 GSAP 中实现"文字解码"特效的魔法工具------只需一行配置，就能让静态文字变身科幻电影中的动态信息流，极大提升界面的趣味性和专业感。

什么是ScrollSmoother

js 复制代码

<div class="wrapper" id="smooth-wrapper">
      <div class="content" id="smooth-content">
        <header>
          <h1>案例 28：ScrollSmoother 平滑滚动</h1>
          <p>滚动更柔和，体验更顺滑。</p>
        </header>
        <div class="section">
          <div class="card">第一屏内容</div>
        </div>
        <div class="section">
          <div class="card">第二屏内容</div>
        </div>
        <div class="section">
          <div class="card">第三屏内容</div>
        </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/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrollSmoother.min.js"></script>
    <script>
      // 注册插件
      gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

      // 创建平滑滚动
      ScrollSmoother.create({
        wrapper: "#smooth-wrapper",
        content: "#smooth-content",
        smooth: 1.2
      });
    </script>

ScrollSmoother 是 GSAP（GreenSock Animation Platform） 提供的一个高级插件（属于 ScrollSmoother 模块），用于实现 "平滑滚动"（Smooth Scrolling） 效果------即当你用鼠标滚轮或触摸板滚动页面时，内容不是"一格一格"跳动，而是像被"缓冲"一样流畅、柔顺地滑动，极大提升用户体验。

📌 简单定义：

ScrollSmoother 通过拦截原生滚动事件，用 GSAP 驱动页面内容以缓动动画的方式移动，从而实现电影级的丝滑滚动体验。

它常用于高端网站、作品集、品牌官网等追求精致交互的场景。

✅ 核心原理：

结构要求：
- 一个外层容器（wrapper）：设置 overflow: hidden，作为"视窗"。
- 一个内层内容（content）：高度由实际内容决定，被 GSAP 控制垂直位移。
工作方式：
- 用户滚动时，不直接滚动页面，而是记录滚动意图（delta）。
- GSAP 用 requestAnimationFrame 和缓动函数（如 power3.out）逐步更新 content 的 y 位置。
- 视觉上形成"惯性滚动"或"阻尼滚动"效果。
与 ScrollTrigger 无缝集成：
- 所有基于滚动的动画（如元素淡入、视差）仍能正常工作。
- ScrollTrigger 会自动识别 ScrollSmoother，使用其内部的虚拟滚动位置。

js 复制代码

ScrollSmoother.create({
  wrapper: "#smooth-wrapper",   // 外层容器（固定高度，隐藏溢出）
  content: "#smooth-content",   // 内层可滚动内容
  smooth: 1.2                   // 平滑系数（值越大越"慢"，默认 1）
});

页面结构被包裹在 .wrapper 中；
实际内容放在 .content 里；
滚动时，.content 会被 GSAP 以 ease-out 方式平滑移动；
smooth: 1.2 表示轻微增强平滑感（数值通常在 0.5 ~ 2 之间）。

💡 注意：你不需要写任何 CSS 动画或监听 wheel 事件------ScrollSmoother 全自动处理！

🌟 主要优势：

特性	说明
极致流畅	消除原生滚动的卡顿感，尤其在 macOS 触控板上效果显著
保留原生行为	地址栏、锚点链接、键盘导航（↑↓ PgUp/PgDn）依然有效
兼容 ScrollTrigger	所有 GSAP 滚动触发动画无需修改即可运行
支持方向控制	可限制仅垂直/水平平滑，或完全禁用某方向
移动端优化	在 iOS/Android 上自动降级为原生滚动（避免性能问题）

⚙️ 常用配置选项：

js 复制代码

ScrollSmoother.create({
  wrapper: "#wrapper",
  content: "#content",
  smooth: 1,               // 平滑系数
  effects: true,           // 启用高级效果（如视差需此开启）
  smoothTouch: 0.1,        // 移动端平滑度（0 = 关闭）
  normalizeScroll: true,   // 防止浏览器地址栏收起导致的跳动
  ignoreMobileResize: true // 避免 iOS 键盘弹出时布局错乱
});

⚠️ 注意事项：

必须正确设置 HTML/CSS 结构 ：

css 复制代码

#smooth-wrapper {
  overflow: hidden;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

不适合所有网站：内容极少或需要快速滚动的页面（如文档、博客列表）可能反而降低效率。
性能敏感：确保内容不包含大量未优化的动画或重绘元素。
SEO 友好：因为只是视觉平滑，不影响 HTML 结构，对 SEO 无影响。

📚 官方文档：

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

✅ 总结：

ScrollSmoother 是 GSAP 打造高端网页体验的"秘密武器"------它用一行代码将生硬的页面滚动升级为丝滑流畅的交互动画，同时完美兼容 ScrollTrigger 和原生浏览器行为，是现代创意网站的标配工具。

gsap 配置解读 --4

morphSVG 是什么

📌 简单定义：

✅ 核心能力：

⚠️ 重要前提：

🌟 应用场景：

📚 官方文档：

✅ 总结：

什么是 Observer

📌 简单定义：

✅ 核心特性：

🌟 典型应用场景：

⚠️ 注意事项：

📚 官方文档：

✅ 总结：

什么是physics2D

📌 简单定义：

✅ 核心参数说明：

🔧 案例中发生了什么？

🌟 典型应用场景：

⚠️ 注意事项：

📚 官方文档：

✅ 总结：

PhysicsProps是什么

📌 简单定义：

✅ 核心特点：

🔧 在你的代码中：

🆚 PhysicsProps vs Physics2D

🌟 应用场景举例：

⚠️ 注意事项：

📚 官方文档：

✅ 总结：

什么是PixiPlugin

📌 简单定义：

✅ 为什么需要它？

🔧 核心功能：

PixiPlugin 做了什么？

🌟 典型可动画的 Pixi 属性（通过 pixi: {}）：

🆚 对比：不用插件 vs 用 PixiPlugin

⚠️ 使用前提：

📚 官方文档：

✅ 总结：

什么是ScrambleText

📌 简单定义：

✅ 核心特性：

1. 乱码字符可自定义

2. 控制揭示节奏

3. 保留原始样式

4. 支持中文、emoji 等 Unicode 字符

🌟 典型应用场景：

⚠️ 注意事项：

📚 官方文档：

✅ 总结：

什么是ScrollSmoother

📌 简单定义：

✅ 核心原理：

🌟 主要优势：

⚙️ 常用配置选项：

⚠️ 注意事项：

📚 官方文档：

✅ 总结：

🆚 `PhysicsProps` vs `Physics2D`

`PixiPlugin` 做了什么？

🌟 典型可动画的 Pixi 属性（通过 `pixi: {}`）：

🆚 对比：不用插件 vs 用 `PixiPlugin`