详细讲解
获取文件
ZIP 下载包里有什么?
ZIP 文件包含以下目录:
- /minified/- 这很可能就是你需要的。将这些文件用 script 标签加载到网页中,具有广泛兼容性且高度压缩以实现最快的加载速度。
- /UMD/- 压缩文件的未压缩版本,采用 UMD 格式(高度兼容)。通常这些文件用于较旧的构建工具或调试(因为源代码可读性强)
- /ESM- ES 模块文件,向下转译以兼容现代构建工具(不包含高级的 ES6 特性)
- /src/- 原始的源代码文件,属于现代 ES6 模块
安装助手
在找额外的插件吗?
npm install gsap
导入并包含插件
插件
缓动效果
React
常见问题
我是否需要对每个插件调用 gsap.registerPlugin()?
通常是的。如果你是通过<script>
标签(即不是通过构建工具)加载 GSAP 的,只要核心库已经加载,GSAP 将尝试自动注册插件,但我们仍建议手动注册插件,以防止构建工具在进行 tree shaking 时将其删除。你可以一次注册所有插件,例如:
gsap.registerPlugin(MotionPathPlugin, ScrollToPlugin, TextPlugin);
多次注册一个插件是否有坏处?
没有,完全没有问题。这样做既没有好处,也不会造成伤害。
如果你在模块环境中使用,并想避免重复注册插件,可以将 GSAP 和所有需要用到的插件导入一个 gsap.js 文件,然后从该文件再导入所需内容到其他模块中。例如,使用 GSAP 核心和 DrawSVG 插件,gsap.js 可以这样写:
export * from "gsap";
export * from "gsap/DrawSVGPlugin";
import { gsap } from "gsap";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";
gsap.registerPlugin(DrawSVGPlugin);
然后在另一个文件中:
import { gsap, DrawSVGPlugin } from "../gsap.js"
我遇到了 TypeScript 错误,该怎么办?
首先,请确认你使用的是主GitHub 仓库中提供的官方 TypeScript 定义文件。如果问题依旧,请随时在我们的论坛中发帖,或者在GSAP GitHub 仓库上创建一个新问题。
{
"compilerOptions": {
...
},
"files": [
"node_modules/gsap/types/index.d.ts"
]
}
如何使用构建工具加载非 ES 模块版本的 GSAP?
有些构建工具可能无法理解 ES 模块,此时你可以改用 UMD(通用模块定义)格式。为此,只需在上面安装助手中点击 "NPM" 和 "UMD",然后复制生成的代码。例如:import { gsap } from "gsap/dist/gsap";
(请注意所有的文件都在/dist/
子目录中)
为什么我的生产环境构建失败?(可能在 webpack、vue-cli 或 create-react-app 中)
现代构建工具常常使用一种称为 tree shaking 的机制来移除未使用的代码。有时它们会过于激进地把插件代码删除,因为你没有在自己的代码中引用它们。为避免这种情况,你必须显式地使用gsap.registerPlugin
gsap.registerPlugin(MotionPathPlugin, ScrollToPlugin, TextPlugin);
我能使用 GSAP 的旧版本吗?
当然可以!你可以前往 GitHub 的发布页面查看和下载 GSAP 的旧版本。不过我们推荐你使用最新版本。