gsap 配置解读 --1

大时光
19 阅读9分钟

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 实现高级交互动效（如列表加载、菜单展开、数据可视化入场）的核心技巧之一。你的代码就是一个典型的“优雅批量入场”动画！

avatar
文章
阅读
粉丝