GSAP动画

<template>
  <div class="container">
    <div class="box"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);
export default defineComponent({
  setup() {
    onMounted(() => {
      gsap.to(".container", {
        scrollTrigger: {
          trigger: ".box",
          markers: true,
          scrub: true,
        },
        x: 500,
        y: 500,
        backgroundColor: "red",
        duration: 5,
      });
    });

    return {};
  },
});
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 1000px;
    margin-bottom: 1000px;
  }
}
</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
44
45
46
47
48
49
50
51

回调函数

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

var tween = gsap.from("#app", {
    duration: 5,
    x: 500,
    ease:"elastic.in(1,1)",
    onComplete:function () { // 动画播放完成时调用
        console.log("111");
    }
});
1
2
3
4
5
6
7
8

回调参数

var tween = gsap.to("#app", {
    duration: 1,
    x: 100,
    onComplete: tweenComplete,
    onCompleteParams: ["done!"]
});

function tweenComplete(message) {
    console.log(message);
}
1
2
3
4
5
6
7
8
9
10

使用上面这种方式调用回调函数时，如果需要传递参数，必须以数组方式传递，即使只有一个参数。

控制动画

tween.pause(); 暂停
tween.resume(); 恢复
tween.reverse(); 反向播放
tween.seek(0.5); 跳到0.5s
tween.progress(0.25); 跳到4分之1处
tween.timeScale(0.5); 速度减慢
tween.timeScale(2); 速度翻倍
tween.kill(); 删除动画
1
2
3
4
5
6
7
8

然后将需要依次触发的动画添加入时间线里即可，例如：

var tl = gsap.timeline();
tl.add(gsap.to("#app", {
    duration: 1,
    delay: 1,
    x: 500,
}));
tl.to("#app", {
    duration: 1,
    y: 500,
});
1
2
3
4
5
6
7
8
9
10

动图封面
时间轴的特殊属性：

repeat：动画重复的次数。
repeatDelay：两次重复之间的间隔时间（以秒为单位）。
yoyo：如果为true，则每次重复播放都会前后交替进行。
delay：时间轴开始之前的延迟（以秒为单位）。
onComplete：时间线播放完毕后调用的函数。
var tl = gsap.timeline({
  repeat: 1, 
  yoyo: true, 
  onRepeat: onRepeatHandler,
  onComplete: onCompleteHandler
});
1
2
3
4
5
6
7
8
9
10
11

Getter / Setter 方法

• time() 播放头的本地位置（当前时间，以秒为单位），不包括任何重复或repeatDelays。
• progress() 它是介于0和1之间的值，指示播放头的位置，其中0处在开始位置，0.5处在中途完成，1处在结束位置。
• duration() 动画的持续时间（以秒为单位），不包括任何重复或repeatDelays。
• delay() 动画的初始延迟（动画开始之前的时间长度，以秒为单位）。