不要在手写过度动画了，用上GSAP! （二） GSAP 基础属性内容详解

此文应该包含了大部分GSAP基础属性说明，运用好这些应该可以让你的GSAP技能上一台阶

CSS属性映射表

gsap.to(target, {
  x: 200,
  rotation: 360,
  duration: 2,
})

GSAP	Description or Equivalent CSS
x: 100	transform: translateX(100px)
y: 100	transform: translateY(100px)
xPercent: 50	transform: translateX(50%)
yPercent: 50	transform: translateY(50%)
scale: 2	transform: scale(2)
scaleX: 2	transform: scaleX(2)
scaleY: 2	transform: scaleY(2)
rotation: 90	transform: rotate(90deg)
rotation: "1.25rad"	Using Radians - no CSS alternative
skew: 30	transform: skew(30deg)
skewX: 30	transform: skewX(30deg)
skewY: "1.23rad"	Using Radians - no CSS alternative
transformOrigin: "center 40%"	transform-origin: center 40%
opacity: 0	adjust the element's opacity
autoAlpha: 0	shorthand for opacity & visibility
duration: 1	animation-duration: 1s
repeat: -1	animation-iteration-count: infinite
repeat: 2	animation-iteration-count: 2
delay: 2	animation-delay: 2
yoyo: true	animation-direction: alternate

---

特殊属性

gsap.to(target, {
  x: 200,
  duration： 1.4,
  rotation: 360,
  duration: 2,
  repeat: -1，
  yoyo: true         
})

Property	Description
duration	动画持续时间（秒），默认值：0.5
delay	动画开始前的延迟时间（秒）
repeat	动画重复的次数。
repeatDelay	重复迭代的开始添加延迟。
yoyo	如果为 true，则每隔一次重复，补间动画将以相反方向运行（类似于溜溜球效果），默认值：false
stagger	每个目标动画开始之间的时间间隔（秒，如果提供了多个目标）。
ease	控制动画变化的速率，例如运动的"个性"或感觉，默认值："power1.out"
onComplete	动画完成时运行的函数。

想让动画无限重复吗？没问题！使用repeat: -1

关于stagger的复杂属性

当stagger值为0.1时，每个补间的开始时间之间间隔 0.1 秒。负值的作用相同，但顺序相反，最后一个元素首先开始。所有补间动画都可以使用stagger属性，该属性可以是数字，对象或函数：

gsap.to('.box', {
    y: 100,
    stagger: {
        // 将高级选项封装在一个对象中
        each: 0.1,         // 每个目标之间的时间间隔为 0.1 秒
        from: 'center',    // 动画从中心开始向外扩散
        grid: 'auto',      // 自动计算网格布局
        ease: 'power2.inOut', // 使用 "power2.inOut" 作为缓动效果
        repeat: -1         // 动画立即重复，不等待其他分步动画完成
    }
});

Property	Description
amount	[Number] ：总的时间量（以秒为单位），会被分配到所有的动画间隔中。例如，如果 amount 为 1 且有 100 个元素以线性方式间隔，那么每个子动画的开始时间之间会有 0.01 秒。如果你更倾向于指定每个动画之间的具体时间，请使用 each 属性。
each	[Number] ：每个子动画之间的时间间隔（以秒为单位）。例如，如果 each 为 1（无论元素数量多少），每个子动画的开始时间之间都会有 1 秒。如果你更倾向于指定一个总时间来分配动画间隔，请使用 amount 属性。
from	[String , Integer , Array] ：动画开始时的数组中的位置。例如，如果要从特定的元素开始动画，可以使用目标数组中该元素索引所代表的数字。例如，from:4 会从数组中的第 5 个元素开始（因为数组使用从 0 开始的索引）。动画的开始时间基于元素与 from 值的接近程度。还可以使用以下字符串值："start"（开始）、"center"（中心）、"edges"（边缘）、"random"（随机）、或 "end"（结束）。在 v3.1.0 中添加了 "random"。如果定义了网格，还可以使用小数值来指示各轴上的进度，例如 [0.5, 0.5] 表示中心，[1, 0] 表示右上角等。默认值：0。
grid	[Array , "auto"] ：如果元素在视觉上以网格显示，可以指明有多少行和列（例如 grid:[9,15]），以便 GSAP 能够相应地计算距离。或者，使用 grid:"auto" 让 GSAP 自动计算行列数（基于 element.getBoundingClientRect()，非常适合响应式布局）。网格假设以从左上到右下的布局排列（类似于文本换行到右边界）。如果元素未以均匀网格排列，可以参考我们创建的 distributeByPosition() 辅助函数。
axis	[string] ：如果定义了网格，动画间隔基于每个元素到 from 值的 x 和 y 轴的总距离。但如果你只希望关注一个轴，可以选择 "x" 或 "y"。通过上述演示可以更直观地理解这个效果。
ease	[String , Function]：用于分配动画开始时间的缓动效果。例如，"power2" 会以较大的间隔开始动画，然后间隔逐渐变小并集中在最后。默认值："none"。

stagger使用函数

gsap.to('.box', {
    y: 100,
    stagger: function (index, target, list) {
        // your custom logic here. Return the delay from the start (not between each)
        return index * 0.1;
    }
});

仅当需要运行自定义逻辑来分配动画间隔时才使用此功能。函数会针对数组中的每个目标/元素调用一次，并应返回从起始位置开始的总延迟时间（而不是从前一个动画开始时间的延迟量）。函数会接收以下参数：

• index [整数]：列表中目标的索引值。
• target [对象]：在该索引位置的目标。
• list [数组 | NodeList]：目标数组（或 NodeList）。

提示

如果你将 repeat 放在 tween 的顶层 vars 对象中，它会等待所有子动画完成后再重复整个序列。

gsap.to(... {repeat: -1, stagger: {...}})

如果你希望每个子动画独立重复（即每个子动画完成后立即重复），只需将 repeat（以及必要时的 yoyo）嵌套在高级动画间隔对象内。

gsap.to(... {stagger: {repeat: -1, ...}});

对于回调函数（例如 onUpdate、onComplete、onStart）也是如此------将它们包含在动画间隔对象内会使它们针对每个元素触发。可以把高级动画间隔对象看作是子动画的 vars 对象。

---

时间线的间隙值

let tl = gsap.timeline()

// 从时间线的1秒处开始（绝对位置）
tl.to(".green", { x: 600, duration: 2 }, 1);

// 在前一个动画开始的位置插入
tl.to(".purple", { x: 600, duration: 1 }, "<");

// 在时间线结束后1秒插入（有间隔）
tl.to(".orange", { x: 600, duration: 1 }, "+=1");

此处的参数非常灵活，

• 绝对时间（以秒为单位），从时间线开始计算，例如 3

// 从时间线开始后的3秒插入
tl.to(".class", { x: 100 }, 3);

• 标签，如 "someLabel"。如果该标签不存在，它将被添加到时间线的末尾。

// 在 "someLabel" 标签处插入
tl.to(".class", { x: 100 }, "someLabel");

• "<" - 上一个动画的开始位置。可以把 < 看作指向前一个动画开始位置的指针。

// 在前一个动画的开始处插入
tl.to(".class", { x: 100 }, "<");

• ">" - 上一个动画的结束位置。可以把 > 看作指向前一个动画结束位置的指针。

// 在前一个动画的结束处插入
tl.to(".class", { x: 100 }, ">");

• 一个复杂的字符串，其中 "+=" 和 "-=" 前缀表示相对值。当数字跟随 "<" 或 ">" 时，它会被解释为相对值，所以 "<2" 等同于 "<+=2"。示例如下：
  • "+=1" - 在时间线结束后的 1 秒处（创建一个间隔）
  • "-=1" - 在时间线结束前 1 秒处（重叠）
  • "myLabel+=2" - 在标签 "myLabel" 之后的 2 秒
  • "<+=3" - 在前一个动画开始后 3 秒
  • "< 3" - 与 <+=3 相同（见上文）（"+=" 在 < 或 > 后面时隐式使用）
  • ">-0.5" - 在前一个动画结束前 0.5 秒。就像说"前一个动画结束加上 -0.5"
• 基于百分比的复杂字符串。当紧跟在 "+=" 或 "-=" 前缀后时，百分比是基于被插入动画的总持续时间。当紧跟在 < 或 > 后时，它是基于前一个动画的总持续时间。注意：总持续时间包括重复和溜溜球效果。示例：
  • "-=25%" - 与时间线结束重叠，重叠部分为插入动画总持续时间的 25%
  • "+=50%" - 超过时间线结束，超出部分为插入动画总持续时间的 50%，创建一个间隔
  • "<25%" - 前一个动画开始后的 25% 位置。与 ">-75%" 相同，表示从前一个动画结束的 75% 位置
  • "<+=25%" - 前一个动画开始后 25%，相对于插入动画总持续时间的百分比。与 "<25%" 不同，后者的百分比基于前一个动画的总持续时间，而紧跟在 "+=" 或 "-=" 后的百分比则基于插入动画的总持续时间
  • "myLabel+=30%" - 从标签 "myLabel" 开始后，插入动画总持续时间的 30%

---

控制与回调

到目前为止，介绍的所有属性都是在页面加载时或之后播放的delay。但是，如果你想对动画有更多的控制权怎么办？一个常见的用例是在某个交互（如按钮单击或悬停）上播放动画。

控制方法可用于补间和时间轴，并允许您播放 、暂停 、倒退 甚至加速动画！

// 将动画或时间线存储在变量中
let tween = gsap.to("#logo", {duration: 1, x: 100});

// 暂停
tween.pause();

// 恢复（遵循方向 - 是否反转）
tween.resume();

// 反转（始终回到动画的起始位置）
tween.reverse();

// 跳转到动画的精确 0.5 秒处
tween.seek(0.5);

// 跳转到动画进度的 1/4 处
tween.progress(0.25);

// 使动画速度减半
tween.timeScale(0.5);

// 使动画速度加倍
tween.timeScale(2);

// 立即结束动画，并使其可以进行垃圾回收
tween.kill();

// 你甚至可以链式调用控制方法
// 以双倍速度播放时间线 - 反转播放。
tween.timeScale(2).reverse();

回调事件

• onComplete：动画完成时调用。
• onStart：动画开始时调用
• onUpdate：每次动画更新时调用（动画处于活动状态时的每一帧）。
• onRepeat：每次动画重复时调用。
• onReverseComplete：当动画反转并再次到达其开始时调用。

gsap.to(".class", {
  duration: 1, 
  x: 100, 
  // 箭头函数方便简洁地写回调
  onComplete: () => console.log("动画完成")
});

// 如果你的函数无法简洁地写在一行，也不用担心。
// 你可以写常规函数并引用它
gsap.timeline({onComplete: tlComplete}); // <- 引用时不要加括号！

function tlComplete() {
  console.log("时间线完成");
  // 更多代码
}

这次先记录到这里