GSAP动画魔法：解锁网页设计的无限创意与动感

GSAP（GreenSock Animation Platform）是一个强大的JavaScript动画库，用于在Web应用程序中创建高性能和复杂的动画效果，其提供了一套丰富的API和工具，使开发者能够轻松地创建流畅、交互式的动画，涵盖了从简单的CSS属性动画到复杂的序列动画和时间轴控制等各种需求，超过1100万个网站中包括50%的获奖网站其主要品牌都使用GSAP。

初识GSAP

GSAP核心概念

GSAP常用方法

最后总结

初识GSAP

GSAP作为JS的专业动画库，自flash时代起就不断发展，至今已成为一个成熟且广泛应用的动画解决方案，因其具备以下优点而使其作为经典的动画库被大家广泛使用：

1）跨浏览器和跨平台：GSAP提供的动画效果能够兼容各种浏览器和设备，确保动画在不同环境下保持一致性。

2）高性能：GSAP以其快速和流畅的动画效果著称，避免了常见的卡顿和闪烁问题，为用户带来极佳的视觉体验。

3）丰富的属性和方法：GSAP提供了丰富的属性和方法，可用于创建复杂的动画效果，如位置移动、缩放、旋转、透明度变化等。

4）强大的可定制性：GSAP允许用户根据项目需求进行个性化的动画设计，包括动画时间、延迟、重复次数、缓动函数等。

在官方文档中详细记载了GSAP应用的基础示例，给开发者提供了很大的便利去理解使用GSAP：

对于GSAP中存在着常用的属性供我们进行选择，其本质上还是借助了css进行处理，这里简单说一下：

GSAP	CSS	解释
x: 100	transform: translateX(100px)	水平移动
y: 100	transform: translateY(100px)	垂直移动
xPercent: -50	transform: translateX(-50%)	水平移动(元素宽度的百分比)
yPercent: -50	transform: translateY(-50%)	垂直移动(元素宽度的百分比)
rotation: 360	transform: rotate(360deg)	旋转(度)
scale: 2	transform: scale(2, 2)	增大或减小大小
delay: 1		动画延迟时间单位是秒
duration: 3		动画持续时间单位是秒
repeat		动画重复多少次
yoyo	悠悠球	默认: false；true则表示补间每隔一次重复将朝相反方向运行。
ease		运动曲线
stagger		交错，每个目标的动画开始之间的时间(秒为单位)

终端执行如下命令进行安装即可：(目前博主安装的最新版本是：^3.12.5)

npm install gsap

因为GSAP并不是完全免费的，有部分功能需要收费才能使用，当然免费版本基本上也已经满足我们日常开发的动画需求了：、

GSAP核心概念

作为经典动画库，GSAP的核心概念主要有两种：Tween(补间动画) 和 Tmeline(时间轴)：

<1>Tween(补间动画)：Tween是GSAP的核心概念，指在一段时间内逐渐改变元素的属性值，从而实现平滑的动画效果，其主要分为下面四类：

gsap.to()：从元素的起始值开始，动画到我们指定的结束值

gsap.from()：反过来。我们指定起始值，动画到结束值

gsap.fromTo()：我们定义起始值和结束值。

sap.set()：立即设置属性（无动画）

ok，这里我们通过一段代码进行一个简单是示范：

<template><div class="box" ref="box"></div>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';let box = ref(null);
onMounted(() => {gsap.to(box.value, { x: 500, y: 500,  duration: 5, // 持续时间repeat: -1, // 如果是 -1，则无限循环yoyo: true, // 如果是 true，则来回循环delay: 1, // 延迟时间, 1s之后开始执行动画ease: 'power4.inOut', // 缓动方式opacity: 0, // 透明度})
})
</script><style>
* {margin: 0;padding: 0;
}
.box {width: 100px;height: 100px;background: #008c8c;border-radius: 50%;}
</style>

页面最终呈现的效果如下所示：

<2>Tmeline(时间线)：GSAP提供了Timeline功能，可以方便地控制多个动画的播放顺序和时间，使得动画序列的管理变得更加简单。那什么是时间线呢？时间线是创建易于调整、有弹性的动画序列的关键，将补间添加到时间线时，默认情况下，补间将按添加顺序依次播放。简单理解：时间线可以让多组动画编排动作，从而控制整个序列，这里通过一段代码进行简单的示例：

<template><div class="box1" ref="box1"></div><div class="box2" ref="box2"></div><div class="box3" ref="box3"></div>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';let box1 = ref(null);
let box2 = ref(null);
let box3 = ref(null);
onMounted(() => {// 创建时间线const timeline = gsap.timeline()timeline.to(box1.value, { x: 500, duration: 1 })timeline.to(box2.value, { y: 300, duration: 2 })timeline.to(box3.value, { y: 100, duration: 1 })
})
</script>

效果和我们设置的时间线一样，只有上一个动画执行完毕之后才会执行下面的动画：

<template><div class="box1" ref="box1"></div><div class="box2" ref="box2"></div><div class="box3" ref="box3"></div>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';let box1 = ref(null);
let box2 = ref(null);
let box3 = ref(null);
onMounted(() => {// 创建时间线const timeline = gsap.timeline()timeline.to(box1.value, { x: 500, duration: 1 })timeline.to(box2.value, { y: 300, duration: 2 })timeline.to(box3.value, { y: 100, duration: 1 })
})
</script>

当然我们也可以指定一个参数来构建动画时机时间的序列，简单的理解就是多组动画之间的执行时机，如下代码所示：

<template><div class="box1" ref="box1"></div><div class="box2" ref="box2"></div><div class="box3" ref="box3"></div>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';let box1 = ref(null);
let box2 = ref(null);
let box3 = ref(null);
onMounted(() => {// 创建时间线const timeline = gsap.timeline()// 第三个参数代表时间线的开始时间timeline.to(box1.value, { x: 500, duration: 1 }, 3)// 第三个参数代表是和上一条动画一起运动timeline.to(box2.value, { y: 300, duration: 2 }, "<")// 第三个参数代表是上一个动画执行完毕之后，延迟1秒后开始，如果是-=1，则是上一个动画结束前1秒开始执行timeline.to(box3.value, { y: 100, duration: 1 }, "+=1")
})
</script>

最终呈现的效果如下所示：

GSAP常用方法

GSAP有许多常用的方法及其插件，这里我就拿比较常见的滚动插件ScrollTrigger进行举例：

以下是 ScrollTrigger 常用的属性，这里做一个简单的介绍：

属性	取值	说明
start	数字 \| 方位名词	滚动触发器的起始滚动位置（数字，以像素为单位）
end	数字 \| 方位名词	滚动触发器的起始滚动位置（数字，以像素为单位）
trigger	Element \| undefined	触发器元素
animation	Tween \| Timeline \| undefined	与滚动触发器实例关联的补间或时间线
scrub	布尔值 \| 数字	true：动画的进度直接链接到滚动触发器进度
toggleClass	字符串 \| 对象	向一(多)个元素添加/删除类
markers	true	开启标注功能
scroller	Element \| window	与滚动触发器关联·的滚动器元素，默认就是窗口
pin	Element	是否是固定元素。pin: true自身元素；pin: 'xxx'指定元素

这里通过代码进行一个简单的示例，如下所示：

<template><div class="box" ref="box">小圆</div>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);let box = ref(null);
onMounted(() => {ScrollTrigger.create({// 触发元素 trigger: box.value,// 触发元素的位置开始start: 'top top',// 触发元素的位置结束end: '+=300',// 擦除 动画的进度和滚动条的进度链接到一起scrub: true,animation: gsap.to(box.value, {x: 200,y: 500,rotate: 180})})
})
</script>

最终呈现的效果如下所示：