GSAP - 一款基于 JavaScript 的 web 动画库，简单几行代码就能写出丝滑流畅、高性能的动画效果

使用简单，但做出来的动画非常丝滑，也能实现很多专业的动画效果，推荐给大家。

关于 GSAP

GSAP

的全名是

GreenSock Animation Platform

，项目诞生非常早，远在

flash

繁荣的时代就存在，一直发展到今天已经是 3.x 版本，这是一个适用于

现代浏览器

的专业动画库，让开发者通过简单的调用，就能够做出看起来非常复杂而又丝滑高级动画效果。

GSAP JS 动画库的技术特性

• 经过多年的优化，

  动画效果

  丝般流畅，尤其是

  移动端

  表现，吊打很多知名的动画库，让我们的项目交互操作响应迅速、高效且流畅
• 专业级动画库，功能强大。

  GSAP

  是为专业动画构建的 JavaScript 动画库，支持

  动画颜色

  ，

  贝塞尔

  ，css 属性，数组、动态平滑反转，相对值，自动适应等动画参数，在它面前，其他动画引擎看起来像廉价玩具一样
• web 兼容性强。无论是新浏览器还是旧浏览器，甚至是手机浏览器，GSAP都能很好地运行。无论是纯 HTML，SVG 动画，React，Vue，Angular，jQuery，Canvas，

  CSS

  等，这些技术都可以随意搭配，不用再为选择什么开发框架而头痛
• 轻量无依赖。

  GSAP

  不是建立在譬如

  jQuery

  这样的第三方工具上的，因此可最大程度地减少加载时间并最大限度地提高性能，更重要的是几乎和你使用的其他 JS 工具库没有什么冲突

• 模块化

  的构建，灵活高效，可以通过插件添加几乎任何功能

GSAP JS 动画库开发上手体验和建议

前端如今发展非常火热，

JavaScript

能做的事情也越来越多了，我们开发的项目中对交互动效的要求也越来越高，对于一款起初用来强化 web 界面交互体验的脚本语言，随着浏览器内核越来越庞大，实现高性能、流畅的动画，一直以来都不是一件容易的事，特别是在移动端浏览器上，稍微复杂一点的动画，有时运行起来简直是灾难。

今天介绍的

GSAP

就是一个专业的

web 动画工具库

，访问 GSAP 的官网，映入眼帘的就是一组非常酷炫的动画效果，第一眼看到时，我一度以为这是一段使用 AE 做出来的视频，整个动画运行实在是太丝滑流畅，让人很难想到这是

JavaScript

做出来的。

下面来看看怎么 GSAP 的使用到底能多简单。

安装 GSAP

通过 CDN 引入

<script src="https://cdn.jsdelivr.net/npm/gsap@3.11/dist/gsap.min.js"&gt;&lt;/script&gt;

或者通过 NPM 安装

npm install gsap

快速开始

// 引入模块 import gsap from "gsap"; // 通过 css 选择器来确定执行动画的元素 gsap.to('.box', { x: 400, // 移动位置 y: 50, rotation: 180, // 旋转角度 duration: 3, // 持续时间 repeat: 2 // 重复次数 });

这样就是实现下图这样的动画效果：

GSAP 还可以通过序列、

补间动画

实现更高级的动画效果，详细的用法可以阅读官方的开发文档。

借助插件还能实现更多动画效果，引入插件的方式：

// 引入插件: import ScrollTrigger from "gsap/ScrollTrigger"; import Flip from "gsap/Flip"; import Draggable from "gsap/Draggable";

想要提前了解到底

GSAP

可以做成那些动画效果，可以在 GSAP 首页的底部查看使用 GSAP 构建动画的真实例子，连谷歌都推荐开发者使用 GSAP 来构建 web 应用的动画，如果对 web 动画感兴趣，或者工作中涉及，强烈推荐大家去研究尝试。

免费开源和商用说明

GSAP

是由

GreenSock

开发的 web 动画库项目，需要注意的是，该项目没有使用常见的

MIT

开源协议，而是使用自己的许可，同样也是完全免费的许可，除了非常特定的商业用途（比如转售给多个客户）之外，其他要求非常宽松，也可以

免费授权

用在商业用途中，想要进一步了解可以去阅读完整的许可说明。