morphSVG 是什么
<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" —— 插件会自动转换为等效路径）
-
高性能 & 精确
基于数学算法优化，确保变形流畅且视觉准确。
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
<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: 最小拖拽距离
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
<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），就能自动计算并驱动元素沿真实的物理抛物线运动。
它把复杂的物理公式（如匀加速运动、矢量分解）封装成简单的配置项，无需手动编写运动方程。
✅ 核心参数说明：
physics2D: {
velocity: 420, // 初始速度（单位：像素/秒）
angle: 60, // 发射角度（单位：度，0°=向右，90°=向上）
gravity: 600 // 重力加速度（单位：像素/秒²，方向向下）
}
GSAP 会自动将速度分解为水平（x）和垂直（y）分量：
vx = velocity * cos(angle)vy = velocity * sin(angle)
然后根据物理公式逐帧更新位置：
x(t) = vx * ty(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是什么
<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 会根据物理公式自动计算其随时间变化的值。
它本质上实现了：
位移 = 初速度 × 时间 + ½ × 加速度 × 时间²
（即经典运动学公式 s=v0t+21at2）
✅ 核心特点：
-
按属性独立控制：可以只给
x 加速度，y 只有速度，rotation 单独减速等。
-
支持任意数值型属性：不仅限于位置，还可用于
opacity、scale、backgroundColor（需配合其他插件）等。
-
精确物理模拟：基于真实时间（秒）和像素/单位/秒² 的加速度模型。
🔧 在你的代码中：
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
<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 解决了这些问题！
🔧 核心功能：
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: {}）：
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
❌ 不用插件（繁琐且易错）：
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（简洁直观）：
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
<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 参数指定用于扰动的字符集：
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 字符，即可正常工作（如你的例子中使用中文）。
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
<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，使用其内部的虚拟滚动位置。
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 上自动降级为原生滚动（避免性能问题） |
⚙️ 常用配置选项：
ScrollSmoother.create({
wrapper: "#wrapper",
content: "#content",
smooth: 1, // 平滑系数
effects: true, // 启用高级效果（如视差需此开启）
smoothTouch: 0.1, // 移动端平滑度（0 = 关闭）
normalizeScroll: true, // 防止浏览器地址栏收起导致的跳动
ignoreMobileResize: true // 避免 iOS 键盘弹出时布局错乱
});
⚠️ 注意事项：
📚 官方文档：
👉 greensock.com/docs/v3/Plu…
✅ 总结：
ScrollSmoother 是 GSAP 打造高端网页体验的“秘密武器”——它用一行代码将生硬的页面滚动升级为丝滑流畅的交互动画，同时完美兼容 ScrollTrigger 和原生浏览器行为，是现代创意网站的标配工具。
登录
