2024年05月28日 建站教程
GSAP 的全名是 GreenSock Animation Platform，是一个适用于现代浏览器的专业动画库，让开发者通过简单的调用，就能够做出看起来非常复杂而又丝滑高级动画效果。
免费开源和商用说明：
GSAP是由 GreenSock 开发的 web 动画库项目，需要注意的是，该项目没有使用常见的 MIT 开源协议，而是使用自己的许可，同样也是完全免费的许可，除了非常特定的商业用途（比如转售给多个客户）之外，其他要求非常宽松，也可以免费授权用在商业用途中，想要进一步了解可以去阅读完整的许可说明。
GSAP JS 动画库的技术特性：
1、经过多年的优化，动画效果丝般流畅，尤其是移动端表现，吊打很多知名的动画库，让我们的项目交互操作响应迅速、高效且流畅
2、专业级动画库，功能强大。GSAP 是为专业动画构建的 JavaScript 动画库，支持动画颜色，贝塞尔，css 属性，数组、动态平滑反转，相对值，自动适应等动画参数，在它面前，其他动画引擎看起来像廉价玩具一样
3、web 兼容性强。无论是新浏览器还是旧浏览器，甚至是手机浏览器，GSAP都能很好地运行。无论是纯 HTML，SVG 动画，React，Vue，Angular，jQuery，Canvas，CSS 等，这些技术都可以随意搭配，不用再为选择什么开发框架而头痛
4、轻量无依赖。GSAP 不是建立在譬如 jQuery 这样的第三方工具上的，因此可最大程度地减少加载时间并最大限度地提高性能，更重要的是几乎和你使用的其他 JS 工具库没有什么冲突
5、模块化的构建，灵活高效，可以通过插件添加几乎任何功能
GSAP JS 动画库轻松上手：
通过 CDN 引入
<script src="/statichttps://cdn.jsdelivr.net/npm/gsap@3.11/dist/gsap.min.js"></script>
或者通过 NPM 安装
npm install gsap
快速开始
// 引入模块
import gsap from "gsap";
// 通过 css 选择器来确定执行动画的元素
gsap.to('.box', {
x: 400, // 移动位置
y: 50,
rotation: 180, // 旋转角度
duration: 3, // 持续时间
repeat: 2 // 重复次数
});
借助插件还能实现更多动画效果，引入插件的方式：
// 引入插件: import ScrollTrigger from "gsap/ScrollTrigger"; import Flip from "gsap/Flip"; import Draggable from "gsap/Draggable";
本文链接：http://so.lmcjl.com/news/5487/