【前端】GSAP动画插件-ScrollTrigger
CSDN 2024-07-22 12:03:02 阅读 85
动画领域有一个比较知名的CSS库：Animate.css，它提供了60多种动画，满足一般网页的需求，比如淡入淡出、闪现等等一系列日常动画，不过虽然它能满足日常需求
但是一些复杂的场景就需要靠JS手动去操作，比如界面滚动到某个元素才开始播放动画，比如拖拽、比如滚动界面时，动态调整元素。
想实现当页面滚动到该元素时，元素才开始播放动画的效果。
最终通过GSAP实现的效果：
https://cclliang.com/
其实也不难，只需要监听页面滚动，当要滚动到该元素时，动态添加已经设置好动画的CSS类名，或者直接使用JS动态添加动画。
但自己实现会存在一些响应式界面造成元素高度不一致带来的兼容性问题，所以这个时候使用已经成熟的第三方动画框架就是最好的选择。
单纯的CSS动画库是不可能完成我预想的功能，而JS库我考虑过使用 scrollreveal 和 WOWJS。
下面是我最后放弃这两个库的原因：
WOWJS：依赖Animate.css，可以配合使用Animate.css动画，但是很久没有进行过维护，并且不支持TypeScript。scrollreveal：不依赖任何第三方库，使用方便，但是商业使用需要购买凭证，同时支持的功能较少。
动画库（GSAP），其实我甚至觉得它可以称为一个动画框架，因为它的生态实在是太健全了，从简单动画，到拖拽，到滚动触发，应有尽有，几乎你能想象到的网页动画在它这里都可以实现，并且只需要使用它一个框架。
但是不知道为什么，这么厉害的东西，在国内很少有关于它的资料，并且GitHub上面的star也仅仅只有1万，同时它的官方还声明了大部分商业用途都可以免费使用。
GSAP官网网址：https://gsap.com/
GSAP 的全名是 GreenSock Animation Platform，项目诞生非常早，远在 flash 繁荣的时代就存在，一直发展到今天已经是 3.x 版本，这是一个适用于现代浏览器的专业动画库，让开发者通过简单的调用，就能够做出看起来非常复杂而又丝滑高级动画效果。
引入
官方介绍引入的方法非常有意思，直接到官方提供的网站。
这里列出了所有可用的插件，需要哪个插件，就勾选哪个插件，下面会列出引入插件的代码，相信既然已经开始学习动画编写，那么你一定对Web开发有一定了解，那么这里就不再细说引入步骤。
先使用GSAP创建一个简单的动画：
使用到的代码非常简单：
<code><!DOCTYPE html>
<html lang="zh">code>
<head>
<meta charset="UTF-8" />code>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />code>
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>code>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>code>
<style>
#logo {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div style="height: 100vh"></div>code>
<div id="logo">code>
<img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/logo-man.svg"code>
alt=""code>
/>
</div>
<div style="height: 100vh"></div>code>
<script>
gsap.from("#logo", { duration: 2, scale: 0.3 });
</script>
</body>
</html>
动画创建好了，但是这里存在一个问题，比如我们刷新界面。将屏幕滚动到这个图片所在的位置。
可以看到当屏幕滚动到该图片时，动画已经快要播放完毕了，这是因为动画是从刷新的那一刻，DOM加载完毕后就开始播放，也就是说你的电脑性能越好，网速越快那么动画的播放几乎就在你刷新界面的那一刻就开始了，如果你再晚一点拖动窗口，等你看到该图片的时候动画就已经播放完毕了，那么这个时候动画就没有任何意义。
所以我们需要想出一种办法，有没有一种等到屏幕滚动到该图片所在的区域，这个时候才开始播放动画？
ScrollTrigger这个插件就完美的解决了这个问题，操作也十分简单，我们只需要稍微修改一下上面的代码：
<code>gsap.from("#logo", {
scrollTrigger: "#logo", // 此行代码表示触发动画的元素，只需要增加该行代码，就可以实现想要的效果。
duration: 2,
scale: 0.3
});
当我刷新界面后，专门等了一会才开始滚动界面，可以看到在图片进入屏幕中时，才开始播放动画。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。