使用 GSAP 实现 Web 动画指南（只需一行 JavaScript 代码） - 第一部分

本文将教你如何仅用一行 JavaScript 代码，就能让网站上的元素轻松移动。🦹‍♀️

GSAP 代表 GreenSock 动画平台，它能为任何 JavaScript 可以操作的对象（CSS 属性、SVG、React、canvas、通用对象等等）添加动画效果，并能解决无数浏览器兼容性问题，而且速度极快（比jQuery快 20 倍）。它已被大约1000 万个网站和众多知名品牌使用。您可以在这里了解更多关于 GSAP 的信息。

几周前我写了一篇关于如何使用 JavaScript 和 CSS 为网页内容添加动画的文章，但我一直在寻找更好、更简单、更便捷的网页动画方法，直到我在 Twitter 上发现了 GSAP。我决定仔细阅读它的文档，结果就爱上了 GSAP。

开始之前

动画的本质就是每秒多次改变属性值，从而使物体看起来移动、淡入淡出、旋转等等。🦸‍♀️

动画的一个完美例子是：x在一秒钟内将物体的坐标从 0 变为 1000，它就会快速向右移动。opacity而从 1 逐渐变为 0，则会使元素淡出。

作为动画师，你的工作是决定要改变哪些属性、改变的速度以及运动的风格（称为缓动——我们稍后会讲到）。

我可以用GSAP制作哪些动画？

GreenSock 动画平台 (GSAP) 可以为任何 JavaScript 可以操作的对象添加动画，例如 CSS 属性、SVG、React、canvas、通用对象等等。

入门

获得GSAP的方法有很多种。你可以

• 从CDN加载，
• 请从我们的网站下载，
• 通过 NPM/Yarn 安装，或者
• 请从GitHub获取。更多详情请参阅安装页面。

将核心 GSAP 工具添加到页面的最简单方法是使用类似这样的脚本标签😁：

<script  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>

搞定了？那你就可以走了！😘

注意：请务必查看安装指南，了解获取 GSAP 的其他方法。

还记得我说过我们只需要一行 JavaScript 代码吗！这可是真的🥴……

我们可以将 JavaScript 代码写在单独的 js 文件中，也可以放在 HTML 文件的 script 标签内。但请务必确保 JavaScript 文件位于 GSAP 链接之后。以下示例中，我的 js 文件是：app.js

<script  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script  src="app.js"></script>

在本文中，我们将使用 4 种基本方法/补间动画，我将使用 CodePen 中的示例来正确地说明它们的工作原理：

• gsap.to()
• gsap.from()
• gsap.fromTo()
• gsap.set()

gsap.to()

要创建动画，gsap.to() 需要 2 个东西：

• 目标 - 你要设置动画的对象。它可以是一个原始对象、一个对象数组，或者像“.myClass”这样的选择器文本。
• vars - 一个包含属性/值对的对象，用于设置动画效果（例如 opacity:0.5、rotation:45 等），以及其他可选的特殊属性，例如 duration 和 onComplete。

例如，要在 1 秒内将类名为“box”的元素移动到 x 坐标 100（等同于 transform: translateX(100px)）：

gsap.to(".box", {duration: 1, x: 100});

这是一个利用gsap.to()🤯的完美例子

• 标题的不透明度在动画播放 1 秒后变为 0.3。
• 盒子在 x 方向上移动了 300 像素。
• 最后，绿色方框在动画过程中旋转，并且由于添加了缩放值，其尺寸也减小了。

gsap.from()

这主要用于网页内容动画，它会将元素从指定位置动画到元素实际所在的位置……

例如，假设您的“.box”元素当前的自然x位置为，0并且您创建了以下补间动画：

gsap.from(".box", {duration: 1, x: 50});

它.box会立即跳到 x 值为 50，然后动画过渡到 x 值为 0（或者动画开始时的值）。
换句话说，它是从你提供的值开始，动画过渡到当前值。

以下是一个完美的例子：

这就引出了另一种方法……🤓

gsap.fromTo()

这种方法允许你定义动画对象的起始值和结束值。

例子

//tweens from width 0 to 50 and height 0 to 100
gsap.fromTo(".box", {width: 0, height: 0}, {duration: 1.5, width: 50, height: 100});

最后，我要解释的最后一种方法是集合方法。

gsap.set()

它用于立即设置一些属性。它本质上是一个零持续时间的补间动画，因此您可以使用与其他 GSAP 补间动画相同的所有属性。

例如

gsap.set(".boxTitle", {fontSize: 20, x: 10});

至此，我们已经介绍了一些基本的补间动画或方法，但相信我，还有很多重要的内容我无法在本文中一一提及，所以我强烈建议您在阅读完本文后查阅相关文档，以便更好地理解。

本文最后要解释的几点是：

• 特殊属性
• 缓解
• 踉跄

最后，我将解释一些关于如何管教青少年的事情。

特殊属性

特殊属性类似于保留关键字，GSAP 对其的处理方式与普通（动画）属性不同。特殊属性用于定义回调、延迟、缓动、交错等效果。

特殊属性的一个基本例子是持续时间（我们已经用到过它了）：

gsap.to("#logo", {duration: 1, x: 100});

其他常见的特殊性质包括：

• 延迟 - 动画开始前的延迟时间。
• onComplete - 动画完成后应调用的回调函数。
• onUpdate - 每次动画更新/渲染时都应该调用的回调函数。
• ease - 应该使用的 ease 类型（例如“power2.inOut”）。
• 错开 - 错开每个目标/元素动画的开始时间。

缓解

这决定了补间动画的运动风格，也是动画流畅美观的关键。它ease控制着补间动画期间的变化速率。文档中提供了一个交互式工具，可以让你直观地探索各种缓动效果。🧐

例如，

gsap.to("#logo", {duration: 1, x: 300, ease: "bounce"});

在上面的例子中，我们使用了…… bounce，但我们还有其他例子，例如：

• 松紧带
• 粗糙的
• 慢的
• 后退
• 正弦等等🤗

踉跄

我觉得这很有意思。交错动画可以轻松地为一组物体添加动画效果，每个物体的动画开始时间之间可以设置一个很小的延迟。

例如，

别被上面的代码搞糊涂了，我只是为了方便理解才把代码拆分成几行来解释的。🤔

GSAP 还有其他一些很棒的功能，我建议你查阅他们的文档，因为这里使用的大部分示例都来自他们的文档。但在教程结束之前，我将解释一下。

控制动画

虽然这可能对网页内容没什么实际用处，但我们有了这个想法，挺酷的。

要控制动画，你需要一个 Tween 实例。`setTween()` 、`
setTween ()` 和 `setTween() ` 方法都会返回一个 Tween 实例，因此你可以将其存储为变量，然后轻松地对其进行控制：to()from()fromTo()

//create a reference to the animation
var tween = gsap.to("#logo", {duration: 1, x: 100});

//pause
tween.pause();

//resume (honors direction - reversed or not)
tween.resume();

//reverse (always goes back towards the beginning)
tween.reverse();

//jump to exactly 0.5 seconds into the tween
tween.seek(0.5);

//jump to exactly 1/4th into the tween's progress:
tween.progress(0.25);

//make the tween go half-speed
tween.timeScale(0.5);

//make the tween go double-speed
tween.timeScale(2);

//immediately kill the tween and make it eligible for garbage collection
tween.kill();

这里有一个完美的例子来解释如何控制缓动动画。

就是这样

我们已经了解了创建动画并将其应用到元素的基础知识。虽然还有很多其他内容我们没有解释，但我相信这些对你有所帮助。🤗

请务必查看GSAP 文档以获取更多信息。

和往常一样，有任何问题或建议，欢迎留言或在推特上联系我🤭！记得在社交媒体上关注我哦！😎

点击此处阅读第二部分