gsap动画库学习笔记 - 持续~

# 基本使用

  // 注册ScrollTrigger插件，即可以根据滚动条的滚动改变dom的位置/形象。
  gsap.registerPlugin(ScrollTrigger);

1
2

# gsap.to/from/fromTo方法

gsap.to("选择器", 动画执行时间（单位s）, {CSS属性名称:属性值,CSS属性名称:"属性值"}); 其属性内配有相关参数，以满足动画需要：

方法	描述	例子
scrollTrigger	使用了scrollTrigger插件后，可配置scrollTrigger参数
ease	动画效果	expo-out、elastic
duration	持续时间（单位：秒）
delay	延迟时间（单位：秒）
repeat	执行次数
repeatDelay	延迟时间（单位：秒）
startAt	初始位置

gsap.to(".demo", {
    x: 500,
    duration: 3
});

1
2
3
4

将类名为demo的元素从原有的位置移动到x轴为500px的位置，时间为3秒

gsap.from(".demo", {
    x: 800,
    duration: 3
});

1
2
3
4

将类名为demo的元素的初始位置设置为x轴为800px的位置，需要通过to方法告诉其要移动的最终位置

gsap.fromTo(".demo", {
    x: 500,
}, {
    x: 300,
    duration: 3
});

1
2
3
4
5
6

将类名为demo的元素的从500px的位置匀速移动到300px的位置，该方法是上两种方法的结合。第一个参数也可以是数组，传入多个类名可以实现多个类名绑定动画的效果。

在调用 gsap 的 to、from 和 fromTo 方法之后，将返回一个 Tween 实例，我们获取到该实例之后，可以通过调用实例上的方法来控制动画的执行。例如：

方法	描述
pause	暂停
play	播放
restart	重播
paused	暂停/继续
resume	恢复
reverse	反向播放
progress(0.25)	跳到4分之1处
timeScale(0.5)	速度减慢 - 或是加快
kill	删除动画

# 回调函数

在有些情况下，我们需要对动画的开始、过程、结束的某个时间点进行回调操作，gsap提供了以下回调函数：

onComplete：动画完成时。
onStart：动画开始时
onUpdate：动画更新时。
onRepeat：动画重复时。
onReverseComplete：当动画在反转到达开始时。

gsap.to('.xx', {
    onComplete: () => {xxxx}
})

1
2
3

# timeline时间线

我们在动画过程中总会有着操控多个dom的情况，如何让某个动画能够按序执行呢？这里引入了时间线的概念。通过gsap.timeline()创建一个时间线，然后通过时间线控制每一个动画顺序执行；这样即使我们修改中间某个动画的duration，也不会影响后续时间线。

我们可以通过先执行timeline方法来配置scrollTrigger类以控制动画的执行及方法调用, 例如：

let demo = gsap.timeline({
                scrollTrigger: {
                    trigger: ".demo",
                    /*
                     * ⚠ start: 表示动画开始执行节点
                     * ⚠ end: 表示动画执行结束
                     * 参数1: 表示当前这个元素的开始执行动画的起点
                     *      【0：就是当前这个元素的顶端位置】
                     *      【正数：当前这个元素根据顶端位置进行向下偏移】
                     *      【负数：当前这个元素根据顶端位置进行向上偏移】
                     * 
                     * 参数2: 表示当前滚动条的起点执行位置
                     *      【0：浏览器最顶端】
                     *      【正数：向下偏移】
                     *      【负数：向上偏移】
                     * 当两个位置重合时，动画开始执行/结束
                     * 此处的位置可以使用像素单位，完全可以自定义
                     */
                    start: '0% 60%', 
                    end: '100% 10%',  // end 默认是 trigger 离开视口
                    // markers: true,   //绘制开始位置和结束位置的线条
                    scrub: true,       //表示动画可以重复执行改成false表示只执行一次
                    pin: true           //动画执行期间，动画元素不跟随页面进行滚动，动画执行结束后，恢复滚动
                }
            })
            // 时间点触发之后的操作
            demo.from(".demo", 2, {
                x: 800,
                backgroundColor: "#dd6942",
                opacity: 1
            });
            demo.to(".demo", 2, {
                x: 400,
                opacity: 1
            });

            // 通过 add 实例方法添加若干动画，所有动画都默认将以添加的序列依次执行
            // 也就是先执行上面的from-to，在执行add的动画内容
            demo.add([
              gsap.to(".demo", {
                  x: 500,
                  duration: 3
              }),
              gsap.to(".demo", {
                  y: 300,
                  duration: 2
              }),
              gsap.to(".demo", {
                  x: 800,
                  duration: 5
              })
          ]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

对于时间线而言，其会根据填入顺序按序执行。除此之外，如果我们想要在一个动画开始的同时，执行另一个动画，除了再额外创建一条时间线，我们可以在to函数后面加一些小参数来进行精确的控制，例如：

const demo = gsap.timeline();
demo.to(".a", { x: 400,duration: 1 });
// 在1秒开始插入动画（绝对值）
demo.to(".b", { x: 400, duration: 1 }, 1);
// 在上个动画的开始插入动画
demo.to(".c", { x: 400, duration: 1 }, "<");
// 在上个动画的开始的2秒后开始插入动画
demo.to(".c", { x: 400, duration: 1 }, "<2").add('customLabel', 2);
// 在上个动画结束后两秒开始插入动画
demo.to(".c", { x: 400, duration: 1 }, ">2");
// 在最后一个动画结束后一秒插入动画
demo.to(".d", { x: 400, duration: 1 }, "+=1");
// 在customLabel这个label标识的最后动画结束前插入动画
demo.to(".e", { x: 400, duration: 1 }, "customLabel-=1");

1
2
3
4
5
6
7
8
9
10
11
12
13
14

可以划分为以下几种类型：

绝对值：在某个绝对秒数来执行动画。
<符和>符：”<”在上个动画开始，”>”在上个动画结束。
相对符：+=在最后一个动画结束后，-=在最后一个动画结束前。
label值：直接用某个时间点的label名。

# 批量动画执行

gsap的动画是根据类名决定的，相同类名的dom会按序执行对应的动画，下面留个例子，自行编码体会

<div class="sand-box flex around align-center">
<div class="box green" ></div>
<div class="box purple" ></div>
<div class="box orange" ></div>
<div class="box purple" ></div>
<div class="box green" ></div>
</div>

<script>
gsap.to('.box', {
    duration: 2,
    y: -100,
    opacity: 0,
    stagger: 0.1,
    ease: "back.in",
})
</script>

<style>
.box {
    display: block;
    width: 70px;
    height: 70px;
    margin: 10px;
    border-radius: 12px;
    line-height: 70px;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

.green {
    background-color: green;
}

.purple {
    background-color: purple;
}

.orange {
    background-color: orange;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

上面这个例子中的五个方块会按顺序向上滑动至透明。

# 交错动画执行

对于有让多个div交错消失的场景；或者交错动画一个阵列，只需要告诉GSAP有多少行列

gsap.to(".box", {
  scale: 0.1,
  y: 30,
  yoyo: true,
  repeat: -1,
  ease: "power1.inOut",
  delay: 1,
  stagger: {
    amount: 1.5,
    grid: "auto",
    from: "center",
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13

# scrollTrigger插件

gsap-scrolltrigger

补充下图内没加到的：

toggleClass: 为执行动画的trigger dom上添加类, 当我们想自己通过类来进行动画把控的时候，可以采用该属性.

编辑

#CSS

上次更新: 2023/06/05, 20:49:24

← CSS的数据类型