gsap 配置解读 --1

toggleActions: "play none none reverse" 是什么意思

gsap.to(panel, {
y: 0,
opacity: 1,
duration: 0.8,
ease: "power2.out", 
scrollTrigger: {
trigger: panel, 
start: "top 80%", // 当 panel 的顶部到达 viewport 的 80% 位置时，进入触发区
end: "top 40%", // 当 panel 的顶部到达 viewport 的 40% 位置时，离开触发区 
toggleActions: "play none none reverse"
} 
});

位置	触发时机	说明
1. onEnter	元素从上往下滚动进入触发区间（比如进入 start 到 end 区域）	此处是 "play" → 播放动画
2. onLeave	元素继续向下滚动，离开触发区间（滚出 end 之后）	此处是 "none" → 什么都不做
3. onEnterBack	元素从下往上滚动，重新进入触发区间（反向滚动进入）	此处是 "none" → 什么都不做
4. onLeaveBack	元素继续向上滚动，离开触发区间（反向滚出 start 之前）	此处是 "reverse" → 反向播放动画（即倒放）

toggleActions

动作值	效果
"play"	播放动画（从当前进度开始）
"pause"	暂停动画
"resume"	恢复播放（如果已暂停）
"reverse"	反向播放（倒放）
"restart"	从头开始播放
"reset"	重置到初始状态
"none"	无操作（保持当前状态）

典型使用场景对比：

需求	推荐 toggleActions
进入播放，离开重置	"play none none reset"
进入播放，反向离开时倒放	"play none none reverse" ← 你的情况
只播放一次，之后不再动	"play pause pause pause"
来回都播放	"play play play play"（不推荐，会闪烁）

paused: true是什么意思

{
x: 280, 
scale: 0.5,
opacity: 0,
duration: 1,
ease: "power2.out",
paused: true 
});

在 GSAP（GreenSock Animation Platform）中，paused: true 是一个动画配置选项，它的作用是：

创建动画时立即暂停（不自动播放），等待后续手动控制播放。

• gsap.from(...) 表示：从指定的起始状态（x=280, scale=0.5, opacity=0）动画到元素当前的 CSS 状态。
• 但由于设置了 paused: true，这个动画不会立刻执行，而是被"冻结"在初始状态（即元素保持原样，不会动）。
• 你需要手动调用 tween.play() 才会开始播放动画。

✅ 为什么需要 paused: true？

通常用于以下场景：

1. 延迟触发动画

比如点击按钮、滚动到某位置、或满足某个条件后再播放：

document.querySelector('#btn').addEventListener('click', () => { 
tween.play(); // 点击时才播放
});

2. 配合 ScrollTrigger 或其他交互逻辑

你可能先定义好动画，等 ScrollTrigger 初始化完成后再关联：

ScrollTrigger.create({
trigger: ".section",
start: "top center",
onEnter: () => tween.play()
});

3. 复用动画

同一个 tween 可以多次 play()、reverse()、restart()，而不会重复创建。

方法	作用
tween.play()	播放动画
tween.pause()	暂停动画
tween.reverse()	反向播放（从当前进度倒放回起点）
tween.restart()	从头开始播放
tween.seek(0.5)	跳转到动画 50% 进度
tween.progress(1)	瞬间跳到结束状态

配置	含义
paused: true	创建动画但不自动播放，需手动调用 .play() 等方法控制
默认（不写）	动画创建后立即自动播放

gsap.set() set 是什么意思

在 GSAP（GreenSock Animation Platform）中，gsap.set() 是一个立即设置元素属性 的方法，不会产生动画过渡 ，而是瞬间应用指定的样式或属性值。

方法	是否动画	用途
gsap.set(target, vars)	❌ 否	立即设置属性（相当于"初始化状态"）
gsap.to(target, vars)	✅ 是	从当前状态 动画到 指定状态
gsap.from(target, vars)	✅ 是	从指定状态 动画到 当前状态
gsap.fromTo(target, fromVars, toVars)	✅ 是	自定义起始和结束状态

clearProps: "all"是什么意思

gsap.set(boxA, boxB, { clearProps: "all" }); 这行代码的作用是：

立即清除 boxA 和 boxB 元素上由 GSAP 设置的所有内联样式属性（比如 transform, opacity, backgroundColor 等），让它们恢复到 GSAP 干预之前的状态（即仅受 CSS 类或原始 HTML 样式控制）。

---

✅ clearProps 的作用详解

• GSAP 在执行动画（如 gsap.to()、gsap.from()）或 gsap.set() 时，会直接写入元素的 style 属性 （例如：<div style="transform: translateX(100px); opacity: 0.5;">）。
• 这些内联样式优先级很高，会覆盖你写的 CSS 类。
• 使用 clearProps 可以清理这些"残留"的内联样式，避免干扰后续布局或样式。

值	说明
"all"	清除 所有 GSAP 设置过的内联样式（最常用）✅
"transform"	仅清除 transform 相关属性（如 x, y, scale, rotation 等）
"opacity,backgroundColor"	清除指定的多个属性（用逗号分隔）
"x,y"	仅清除 x 和 y（即 transform: translateX/Y）

💡 注意：clearProps 只清除 GSAP 显式设置过 的属性，不会影响其他 JavaScript 或 HTML 中原本就有的 style。

🎯 使用场景举例

场景 1：重置动画状态

js

// 先执行一个动画
gsap.to(boxA, { x: 100, backgroundColor: "red", duration: 1 });

// 后来想让它完全回到原始 CSS 样式
gsap.set(boxA, { clearProps: "all" });
// 效果相当于：boxA.style.cssText = ""; （但更安全，只清 GSAP 设置的）

场景 2：避免 transform 冲突

css

.my-box {
  transform: rotate(10deg); /* 原始 CSS transform */
}

js

gsap.to(".my-box", { x: 50 }); // GSAP 会合并 transform，变成 rotate + translate
gsap.set(".my-box", { clearProps: "transform" }); // 清除后，只剩 rotate(10deg)

场景 3：组件销毁前清理

在 React/Vue 组件卸载时，清除 GSAP 添加的样式，防止内存泄漏或样式残留。

---

⚠️ 注意事项

1. clearProps: "all" 不会删除非 GSAP 设置的内联样式
   比如你手动写了 <div style="color: blue">，GSAP 不会动它。
2. transform 是一个整体
   即使你只设置了 x: 100，clearProps: "transform" 也会清除整个 transform 字符串。
3. autoAlpha 会同时影响 opacity 和 visibility
   如果你用了 autoAlpha，需要同时清除这两个属性。

代码	作用
gsap.set(el, { clearProps: "all" })	彻底清除 GSAP 对该元素设置的所有内联样式，恢复"干净"状态

keyframes是什么意思

const tween = gsap.to(shape, {
        keyframes: [
          { x: -160, rotation: -15, duration: 0.4 },
          { x: 0, scale: 1.2, duration: 0.4 },
          { x: 160, rotation: 20, duration: 0.4 },
          { x: 0, scale: 1, rotation: 0, duration: 0.4 }
        ],
        ease: "power1.inOut",
        paused: true
      });

在 GSAP（GreenSock Animation Platform）中，keyframes 是一种将多个动画步骤串联起来 的方式，类似于 CSS 的 @keyframes，但功能更强大、更灵活。

这段代码的意思是：

对 shape 元素执行一个由 4 个关键帧组成的复合动画，每个关键帧持续 0.4 秒，总共 1.6 秒。动画被暂停（paused: true），需手动调用 .play() 才会运行。

---

✅ keyframes 的工作原理

• 每个对象代表一个动画阶段（关键帧） 。
• GSAP 会按顺序依次播放这些关键帧。
• 每一帧的属性是从上一帧的结束状态过渡到当前帧的目标值。
• 每帧可以有自己的 duration、ease（如果未指定，则继承外层的 ease）。

动画流程分解：

阶段	起始状态 → 目标状态	效果
第1帧	当前状态 → {x: -160, rotation: -15}	向左飞 + 左转
第2帧	上一帧结束 → {x: 0, scale: 1.2}	回到中心 + 放大
第3帧	上一帧结束 → {x: 160, rotation: 20}	向右飞 + 右转
第4帧	上一帧结束 → {x: 0, scale: 1, rotation: 0}	回到原位 + 还原大小和角度

🔧 keyframes 的高级用法

1. 每帧可单独设置缓动（ease）

js

keyframes: [
  { x: 100, duration: 0.3, ease: "back.out" },
  { x: 0, duration: 0.3, ease: "elastic.out" }
]

2. 支持回调函数

js

keyframes: [
  { x: 100, duration: 0.5 },
  { 
    x: 0, 
    duration: 0.5,
    onComplete: () => console.log("第二帧完成") 
  }
]

3. 与 ScrollTrigger、Timeline 结合

js

gsap.timeline({
  scrollTrigger: { trigger: ".section", start: "top center" }
}).to(shape, {
  keyframes: [ /* ... */ ]
});

---

⚠️ 注意事项

• keyframes 是 GSAP 3.0+ 引入的功能，在旧版本中不可用。
• 外层的 ease（如你的 "power1.inOut"）会作为默认缓动 应用到每一帧（除非某帧自己指定了 ease）。
• 如果某帧没有指定 duration，它会继承前一帧的 duration 或使用默认值（通常为 0.3 秒）。

---

✅ 为什么用 keyframes 而不用多个 gsap.to()？

表格

方式	优点
keyframes	代码更紧凑，自动串联，易于管理单个动画序列
多个 gsap.to()	更灵活（可插入延迟、回调等），适合复杂编排（推荐用 gsap.timeline()）

对于简单的线性多步动画，keyframes 非常简洁；对于复杂时间轴，建议用 gsap.timeline()。

---

keyframes = 把多个动画步骤写在一个数组里，GSAP 自动按顺序播放它们。

你的代码创建了一个"左右晃动 + 缩放"的弹性动画，常用于：

• 按钮点击反馈
• 错误提示抖动
• 卡片翻转/弹跳效果

配合 paused: true，你可以在需要时（如点击、滚动）通过 tween.play() 触发动画，非常高效！

stagger 是什么意思

在 GSAP（GreenSock Animation Platform）中，stagger 是一个非常强大的功能，用于对多个目标元素（如数组、NodeList）依次错开播放动画，从而创建出"波浪式"、"逐个入场"等流畅的序列动画效果。

 const tween = gsap.from(cells, {
        opacity: 0,
        scale: 0.4,
        y: 20,
        duration: 0.6,
        ease: "power2.out",
       stagger: { 
           each: 0.04, // 每个元素之间的延迟时间（秒）
           from: "center" // 动画从中间的元素开始，向两边扩散
       },
        paused: true
      });

这段代码的作用是：

对 cells（一组 DOM 元素）执行"从透明、缩小、下移"状态淡入放大的动画，但不是同时播放，而是：

• 从中间的元素开始
• 相邻元素之间间隔 0.04 秒依次播放
• 整体形成一种"由中心向外扩散"的入场效果 ✨

---

✅ stagger 的核心概念

当你对多个元素 （如 document.querySelectorAll('.cell')）使用 GSAP 动画时：

• 不加 stagger → 所有元素同时动画。
• 加上 stagger → 元素依次错开动画，产生节奏感。

---

🔧 stagger 的常见写法

1. 最简形式：只指定间隔时间

js

stagger: 0.1  // 等价于 { each: 0.1 }

→ 从第一个元素开始，每个间隔 0.1 秒。

2. 对象形式（你用的方式）：更精细控制

js

stagger: {
  each: 0.04,     // 每个元素间隔 0.04 秒
  from: "center", // 起始位置：可选 "start"（默认）、"center"、"end" 或具体索引（如 3）
  grid: "auto",   // 如果是网格布局，可设为 [rows, cols] 来按行/列交错
  axis: "x"       // 在网格中限制交错方向（"x"、"y" 或 "xy"）
}

---

🎯 from 的取值说明

值	效果
"start"（默认）	从第一个元素开始，依次到最后一个
"center"	从中间元素开始，向左右（或上下）同时扩散
"end"	从最后一个元素开始，倒序播放
数字（如 2）	从索引为 2 的元素开始

✅ from: "center" 非常适合居中对齐的列表、图标阵列、卡片网格等场景，视觉上更平衡。

---

💡 实际效果示例

假设 cells 有 5 个元素：[A, B, C, D, E]

• from: "center" → 播放顺序：C → B & D → A & E
• 每个间隔 0.04s，所以整个动画在约 0.04 × 2 = 0.08s 内完成扩散（因为两边并行）

这比线性播放（A→B→C→D→E）更生动！

---

⚠️ 注意事项

• stagger 只在目标是多个元素时生效 。如果 cells 只有一个元素，stagger 会被忽略。
• stagger 的延迟是叠加在 duration 之上的，不影响单个动画的时长。
• 可与 paused: true 完美配合，实现"按需触发动画序列"。

---

配置	含义
stagger: { each: 0.04, from: "center" }	从中间元素开始，以 0.04 秒的间隔向两侧依次播放动画

这是 GSAP 实现高级交互动效（如列表加载、菜单展开、数据可视化入场）的核心技巧之一。你的代码就是一个典型的"优雅批量入场"动画！