insideBa11个人空间

# 1.gsap

向右移动100像素 x: 100 transform: translateX(100px)
向下移动100像素 y: 100 transform: translateY(100px)
将元素沿水平方向向右移动到其父容器宽度的50%位置 xPercent: 50 transform: translateX(50%)
将元素沿垂直方向向下移动到其父容器高度的50%位置 yPercent: 50 transform: translateY(50%)
将元素放大两倍 scale: 2 transform: scale(2)
将元素在水平方向上放大两倍 scaleX: 2 transform: scaleX(2)
将元素在竖直方向上放大两倍 scaleY: 2 transform: scaleY(2)
将元素顺时针旋转90度 rotation: 90 transform: rotate(90deg)
顺时针旋转1.25弧度（1弧度==57.3度==360/2π） rotation: "1.25rad" 没有对应的CSS
水平方向扭转30度（也可以写弧度） skewX: 30 transform: skewX(30deg)
竖直方向扭转30度（也可以写弧度） skewY: 30 没有对应的css
将元素垂直中心向下偏移40%的高度设为运动中心点 transformOrigin: "center 40%" transform-origin: center 40%
透明度 opacity: 0 adjust the elements opacity
同时设置元素的透明度为 0 并将其设置为不可见 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
每个元素间隔0.5秒运动 stagger:0.5
控制动画的速度变化 ease https://gsap.com/docs/v3/Eases/
动画完成时运行的函数 onComplete:fun
设置动画重复时的暂停时间 repeatDelay

# stagger

可配置5个参数：

  • amount
    • 类型: [数字]
    • 描述: 分配给所有 stagger 的总时间量（以秒为单位）。例如，如果 amount 为 1，有 100 个元素按线性方式 stagger，那么每个子补间的启动时间之间将有 0.01 秒。如果您更愿意指定每个补间之间的特定时间，请改用 each 属性。
  • each
    • 类型: [数字]
    • 描述: 每个子补间启动时间之间的时间量（以秒为单位）。例如，如果 each 为 1（不考虑有多少元素），那么每个子补间的启动时间之间将有 1 秒的间隔。如果您更愿意指定要在 stagger 之间分配的总时间，请改用 amount 属性。
  • from
    • 类型: [字符串 | 整数 | 数组]
    • 描述: stagger 将从数组中的哪个位置开始。例如，要从特定元素开始，可以使用表示该元素在目标数组中索引的数字。因此，from:4 将从数组的第 5 个元素开始 stagger（因为数组使用零为基础的索引）。每个元素的动画将基于该元素与数组中 "from" 值的接近程度开始（越接近，越早开始）。您还可以使用以下字符串值："start"、"center"、"edges"、"random" 或 "end"（"random" 在版本 3.1.0 中添加）。如果定义了网格，还可以指定十进制值，表示在每个轴上的进度，例如 [0.5,0.5] 将是中心，[1,0] 将是右上角等。默认值: 0。
  • grid
    • 类型: [数组 | "auto"]
    • 描述: 如果元素在视觉上以网格形式显示，请指定有多少行和列（例如 grid:[9,15]），以便 GSAP 可以相应地计算相邻关系。或者使用 grid:"auto"，让 GSAP 使用 element.getBoundingClientRect() 自动计算行和列（适用于响应式布局）。默认情况下，假定网格从左上到右下流动（类似于文本在右边换行）。如果您的元素没有以均匀网格排列，请查看我们创建的 distributeByPosition() 辅助函数。
  • axis
    • 类型: [字符串]
    • 描述: x，y，null，表示沿着水平方向运动、沿着竖直方向运动和both
  • ease
    • 类型: [字符串 | 函数]
    • 描述: 分配动画启动时间的缓动。例如，"power2" 将从较大的间隔开始，然后在结束时紧密聚集。默认值: "none"。

当给stagger赋值为纯数字时：

gsap.to('el', {
  stagger:1,
})
// 等同于:
gsap.to('el', {
  stagger:{
    amount:1
  }
})

# repeatDelay和amount的区别

repeatDelay 和 stagger 中的 amount 在 GSAP 中用于不同的目的，它们分别控制着时间轴的整体重复延迟和动画元素之间的时间错开。

  1. repeatDelay:

    • repeatDelay 是设置整个时间轴重复的延迟时间。当时间轴完成一次完整的动画序列后，会等待指定的时间再次开始。这个延迟是应用于整个时间轴的，而不是单个动画元素。

    • 例子：

      gsap.timeline({ repeat: 2, repeatDelay: 1 });

      上述代码表示时间轴将在完成一次完整的动画序列后等待 1 秒，然后再次开始。这种延迟是应用于整个时间轴的重复过程。

  2. stagger 中的 amount:

    • stagger 中的 amount 用于设置动画元素之间的时间错开。它控制了每个动画元素的启动时间相对于前一个元素的时间差。这个错开时间是相对于单个动画元素的。

    • 例子：

      gsap.to(".box", {
  duration: 1,
  stagger: { amount: 0.5 },
});

      上述代码表示每个 .box元素之间的启动时间将相差 0.5 秒，从而创建一个错开的动画效果。

总的来说，repeatDelay 是时间轴整体的重复延迟，而 stagger 中的 amount 是用于设置动画元素之间的时间错开。在某些情况下，你可能会同时使用它们来实现一些复杂的动画效果。

# 整体循环和单元素循环

repaet / yoyo / callbadck

如果将 repeat 放在 tween 的配置对象的顶层，它将等待所有子 tween 完成后再重复整个序列。整体循环

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

如果希望每个子 tween 独立重复（即每个 tween 完成后立即重复自身），只需将 repeat（ yoyo或者callback）嵌套在高级 stagger 对象中。单元素循环

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

# Timeline

https://codepen.io/GreenSock/pen/PopXddg

  1. 纯数字：例如3，表示时间线开始后的第三秒
  • = 表示结束：
    • +=3：上个时间线结束后的第三秒
    • -=3： 上个时间线结束前3秒

<3：上个动画开始的第三秒

>3：上个动画结束的第三秒

  1. 百分比
  • 事件总线的百分比：
    • -=25%：时间线最后25%开始
    • +=50%：时间线结束之后开始，时间占时间线的50%
    • <25%：前一个动画25%时开始。
    • <+=25%：