GSAP 入门 - 学习中心 - 绿袜

本文由 简悦 SimpRead 转码， 原文地址 greensock.com

GreenSock Animation Platform（GSAP）对 JavaScript 可以触及的任何东西（CSS 属性，SVG，React，canvas，通用对象等）进行动画处理，并解决了无数浏览器的不一致，所有这些都以惊人的速度（比 jQuery 快 20 倍）。了解为什么 GSAP 被大约 10，000，000 个站点和许多主要品牌使用。

通过学习曲线坚持下去，你会发现使用代码制作动画是多么有趣。我们保证值得您花时间。

快速链接

• 什么是 GSAP？
• 加载 GSAP
• 补间基础知识
• CSSPlugin
• 2D 和 3D 转换
• 宽松
• 交错
• 回调
• 使用时间轴进行排序
• 时间轴控制
• Getter / Setter 方法
• 获取元素属性的当前值
• 绿袜俱乐部

我们将在此处介绍最受欢迎的功能，但请保留 GSAP 文档以获取所有详细信息。

首先，让我们谈谈 GSAP 的实际作用...

GSAP 是一个属性操纵者

动画最终归结为每秒多次更改属性值，使某些内容看起来移动，淡入淡出，旋转等。GSAP 会捕获一个起始值和一个结束值，然后在它们之间每秒插值 60 次。

例如，在 1 秒内将对象的坐标从 0 更改为 1000 会使其快速向右移动。从 1 逐渐变为 0 会使元素淡出。作为动画师，你的工作是决定要更改哪些属性、更改速度以及运动的样式（称为缓动 - 我们稍后会介绍）。x``opacity

从技术上讲，我们可以将 GSAP 命名为 "GreenSock Property Manipulator"（GSPM），但它没有相同的环。

DOM、SVG、<canvas> 等

GSAP 没有可以处理的预定义属性列表。它超级灵活，几乎可以适应你扔给它的任何东西。GSAP 可以对以下所有内容进行动画处理：

• CSS：2D 和 3D 转换、颜色、width、opacity、border-radius、margin 以及几乎所有 CSS 值。
• SVG 属性： viewBox，width，height，fill，stroke，cx，r，opacity 等像 MorphSVG 和 DrawSVG 这样的插件可用于高级效果。
• 任何数值例如，呈现为 . 对 3D 场景中的摄像机位置或滤镜值进行动画处理。GSAP 经常与 Three.js 和 Pixi.js 一起使用。<canvas>

一旦你学习了基本的语法，你将能够在 JavaScript 运行的任何地方使用 GSAP。本指南将重点介绍最流行的用例：对 DOM 元素的 CSS 属性进行动画处理。（注意：如果你使用的是 React，也请阅读这篇文章。

如果您使用的是以下任何框架，这些文章可能会有所帮助：

• React
• Vue
• Angular

GSAP 到底是什么？

GSAP 是一套用于脚本动画的工具。它包括：

• GSAP 核心 - 引擎的核心，用于对任何对象的任何属性进行动画处理。它利用补间，让您更好地控制动画。
• 额外的，如节省时间的插件，轻松的工具，实用程序方法，等等。

加载 GSAP

有很多方法可以获得 GSAP。从 CDN 加载它，从我们的网站下载它，通过 NPM / Yarn 安装它，或者从 Github 获取它。有关所有详细信息，请参阅安装页面。那里甚至还有一个交互式工具，可以向您显示加载各种插件的代码。将核心 GSAP 工具添加到网页的最简单方法是使用如下所示的脚本标记：

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

CodePen

如果您只想开始玩 GSAP，我们强烈建议您从众多 CodePen 演示之一开始，并在浏览器中进行实时编辑。乐趣！然后，您可以单击右下角的 "分叉" 按钮以保存您的版本。

补间基础知识

让我们开始使用基本补间。我们将使用 CodePen 演示，以便您可以在浏览器中轻松分叉和编辑每个示例。

gsap.to（）

要创建动画，gsap.to（）需要 2 个条件：

• 目标 - 您正在制作动画的对象。这可以是原始对象、对象数组或选择器文本（如 ）。".myClass"
• vars - 具有要动画化的属性 / 值对（如 等）和其他可选特殊属性（如 和 ）的对象。opacity:0.5``rotation:45``duration``onComplete

例如，要在 1 秒内将 ID 为 "logo" 的元素移动到 100（与 ）的位置：x``transform: translateX(100px)

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

注意：请记住，GSAP 不仅适用于 DOM 元素，因此您甚至可以对原始对象的自定义属性进行动画处理，如下所示：

var obj = {prop: 10};
gsap.to(obj, {
  duration: 1,
  prop: 200, 
  //onUpdate fires each time the tween updates; we'll explain callbacks later.
  onUpdate: function() {
    console.log(obj.prop); //logs the value on each update.
  }
});

演示：gsap.to（） 基本用法

如果要编辑代码并试验自己的属性和值，只需点击 " 在 CodePen 上编辑 " 按钮即可。

请注意，在上面的演示中，、 和值都以动画形式显示，但 DOM 元素实际上并不具有这些属性！换句话说，没有或 这样的东西。那怎么行呢？这就是 GSAP 的魔力。在我们讨论其背后的细节之前，让我们来看看 GSAP 的插件以及它们的工作原理，因为这将澄清一些重要的概念。opacity``scale``rotation``x``element.scale``element.opacity

插件

想想插件，比如添加特殊属性，这些属性会动态添加到 GSAP 中，以便注入额外的功能。这使得核心引擎保持小巧高效，但允许无限扩展。每个插件都与一个特定的属性名称相关联。

最受欢迎的插件包括：

• SplitText：将文本块拆分为行，单词和字符，并使您能够轻松地为每个部分添加动画效果。
• 可拖动：添加拖放任何元素的功能。
• MorphSVGPlugin：复杂 SVG 路径的平滑变形。
• DrawSVGPlugin：对 SVG 笔画的长度和位置进行动画处理。
• MotionPathPlugin：对路径上的任何元素进行动画处理。

CSSPlugin

在前面的示例中，GSAP 使用了一个名为 CSSPlugin _的核心_插件（包含在 GSAP 核心中的插件）。它自动注意到目标是一个 DOM 元素，因此它拦截了这些值，并在幕后做了一些额外的工作，将它们作为内联样式（在这种情况下）应用。请务必观看本文顶部的 "入门" 视频，了解其实际效果。element.style.transform``element.style.opacity

CSSPlugin 的特点：

• 跨浏览器规范化行为，并解决各种浏览器错误和不一致问题
• 通过自动分层、缓存转换组件、防止布局抖动等来优化性能。
• 独立控制 2D 和 3D 变换组件（、、、、、等）（消除操作顺序问题）x``y``rotation``scaleX``scaleY``skewX
• 读取计算值，因此您不必手动定义起始值
• 对复杂值进行动画处理，例如 和borderRadius:"50% 50%"``boxShadow:"0px 0px 20px 20px red"
• 必要时应用特定于供应商的前缀（、、、等）-moz-``-ms-``-webkit-
• 对 CSS 变量进行动画处理
• 规范化 SVG 和 DOM 元素之间的行为（对于转换特别有用）
• ... 以及更多

基本上，CSSPlugin 为您节省了大量的头痛。

由于对 CSS 属性进行动画处理非常普遍，因此 GSAP 会自动感知目标何时是 DOM 元素，并在内部将 CSS 值馈送到 CSSPlugin。无需将内容包装在对象中。减少您的打字次数。别客气。css:{}

要了解 CSSPlugin 的高级功能，请阅读完整的 CSSPlugin 文档。

2D 和 3D 转换

CSSPlugin 可识别许多与转换相关的属性的短代码：

GSAP 可以对任何值进行动画处理，但我们强烈建议使用上述快捷方式，因为它们更快、更准确（GSAP 可以跳过解析计算的矩阵值，这些值对于超过 180 度的旋转值本质上是模棱两可的）。GSAP 提供的另一个主要便利是独立控制每个组件，同时提供一致的操作顺序。transform

性能说明：浏览器更新和（转换）比影响文档流的更新和（转换）要容易得多。因此，要移动某些内容，我们建议使用动画和 .x``y``top``left``x``y

演示：多个 2D 和 3D 变换

要记住的事情：

• 请务必将所有带连字符的属性都加为驼峰。 应该是 ，应该是 。font-size``fontSize``background-color``backgroundColor
• 对位置属性（如 和 ）进行动画处理时，您尝试移动的元素也必须具有 CSS 值 、 或 。left``top``position``absolute``relative``fixed

from（） 补间

有时，将元素设置在它们应该结束的位置（例如，在介绍动画之后），然后从其他值进行动画处理是非常方便的。这正是目的所在。[gsap.from()](https://greensock.com/docs/v3/GSAP/gsap.from())

例如，也许您的 "#logo" 元素当前具有其自然位置，并且您创建了以下补间：x``0

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

将立即跳转到 of 并动画到一个 of（或补间开始时的任何内容）。换句话说，它是从您提供的值到当前状态的动画。#logo``x``100``x``0

演示：具有多个属性的 gsap.from（）

还有一种方法允许您定义起始值和结束值：[fromTo()](https://greensock.com/docs/v3/GSAP/gsap.fromTo())

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

set（）

如果要立即设置某些属性，请使用.set（）方法。它实质上是零持续时间补间，因此可以使用可在其他 GSAP 补间中使用的所有相同属性。

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

特殊性能

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

特殊属性的一个基本示例是（我们已经在使用它）：duration

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

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

• delay - 启动动画之前的延迟。
• onComplete - 动画完成时应调用的回调。
• onUpdate - 每次动画更新 / 呈现时应调用的回调。
• 易用性 - 应使用的易用性（如 ）。"power2.inOut"
• 交错 - 错开每个目标 / 元素动画的开始时间。

宽松

如果你的动画有声音，它听起来会是什么样子？它应该看起来很有趣吗？机器人？光滑？现实？要成为动画摇滚明星，你必须培养一种敏锐的放松感，因为它决定了 A 点和 B 点之间的运动_风格_。

"缓动" 控制补间期间的变化率。下面是一个交互式工具，可让您直观地探索各种便利。注意：您可以单击底部代码中带下划线的部分以更改值。

绿袜轻松展示台

提示

添加点：在线上按住 Alt 键单击

切换平滑 / 角：Alt-Click 锚点

从角锚点获取手柄：ALT-DRAG

切换选择：SHIFT-CLICK 锚点

删除锚点：按删除键

撤消：按 Ctrl-Z

gsap.to（图， { 持续时间：2.5,

});

使用易用性特殊属性：

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

演示：反弹轻松

为了获得前所未有的对缓动的控制，请务必查看 CustomEase，它允许您从字面上绘制任何可以想象的缓动曲线。CustomWiggle 和 CustomBounce 是高级缓动器，可创建极其复杂和逼真的效果。

交错

通过交错，可以轻松地对一组对象进行动画处理，每个对象的动画开始之间有一小段延迟。

您甚至可以通过添加一些配置选项来错开网格中布置的项目！

有关 GSAP 的高级交错功能的更多信息，请参阅此代码笔

回调

当发生与动画相关的特定事件时，回调会调用函数：

• onComplete：在动画完成时调用。
• onStart：在动画开始时调用
• onUpdate：每次动画更新时调用（在动画处于活动状态时的每一帧上）。
• onRepeat：每次动画重复时调用。
• onReverseComplete：当动画在反转时再次到达其开始时调用。

要在动画完成时触发函数，请执行以下操作：tweenComplete()

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

function tweenComplete() {
  console.log("the tween is complete");
}

回调参数

可以选择向每个回调函数传递任意数量的参数。由于可以有多个参数，因此必须将它们作为 Array 传递（即使只有一个）。

gsap.to("#logo", {duration: 1, x: 100, onComplete: tweenComplete, onCompleteParams: ["done!"]});

function tweenComplete(message) {
  console.log(message);
}

默认情况下，回调的范围（在该函数中引用的范围）是补间本身，但如果您愿意，可以将其定义为其他内容，例如 。this``callbackScope: yourScope

演示：基本回调和参数

有关所有特殊属性的详细列表，请参阅 API 文档。

控制动画

要控制动画，您需要一个实例来使用。、 和 方法都返回一个 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 exacty 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 的时间轴。

时间线是补间的容器，您可以在其中放置补间的时间（如计划）。它们可以重叠或之间有间隙; 你有完全的控制权。随着时间线的播放头移动，它会擦洗其子补间并相应地渲染它们！根据需要插入任意数量，并使用标准方法（、、、等）控制整个组。您甚至可以将时间轴嵌套在时间轴中！play()``reverse()``pause()

一旦你掌握了时间线的窍门，一个充满可能性的全新世界就会打开。它们提供了一种将动画代码模块化的绝佳方式。

何时使用时间轴

• 将一组动画作为一个整体进行控制。
• 在不弄乱大量值的情况下构建序列（逐步构建，以便对早期动画的时序调整自动影响后续动画，从而大大简化了实验和维护）。delay
• 模块化动画代码。
• 做任何复杂的编舞。
• 触发基于一组动画的回调（如 "在所有这些动画完成后，调用"）。myFunction()

如果您只是在这里或那里做补间，那么时间线可能有些过分。

基本测序

时间轴具有熟悉的 、和方法，这些方法提供了一种快速创建补间的方法，并将其发送到时间轴：[to()](https://greensock.com/docs/v3/GSAP/Timeline/to())``[from()](https://greensock.com/docs/v3/GSAP/Timeline/from())``[fromTo()](https://greensock.com/docs/v3/GSAP/Timeline/fromTo())``add()

//create a timeline instance
var tl = gsap.timeline();

//the following two lines do the SAME thing:
tl.add( gsap.to("#id", {duration: 2, x: 100}) );
tl.to("#id", {duration: 2, x: 100}); //shorter syntax!

默认情况下，动画是一个接一个地插入的，但是使用 position 参数可以轻松精确地控制事物的去向。

演示：基本测序

我们将重点介绍 to（）方法，但你可以以类似的方式将 from（）或 fromTo（）补间添加到时间轴。

方法链接

方法链接可以使您的代码非常简洁：

var tl = gsap.timeline();

//chain all to() methods together on one line
tl.to(".green", {duration: 1, x: 200}).to(".orange", {duration: 1, x: 200, scale: 0.2}).to(".grey", {duration: 1, x: 200, scale: 2, y: 20});

//we recommend breaking each to() onto its own line for legibility
tl.to(".green", {duration: 1, x: 200})
  .to(".orange", {duration: 1, x: 200, scale: 0.2})
  .to(".grey", {duration: 1, x: 200, scale: 2, y: 20});

时间线默认值

时间线还具有一个名为 "特殊属性" 的特殊属性，该属性可用于使所有子补间和时间线继承值。因此，与其在上面的示例中键入内容，不如将其放在时间轴中并节省一些键入内容！defaults``duration: 1``defaults

var tl = gsap.timeline({defaults: {duration: 1}});

//no more repitition of duration: 1!
tl.to(".green", {x: 200})
  .to(".orange", {x: 200, scale: 0.2})
  .to(".grey", {x: 200, scale: 2, y: 20});

只需为继承的属性包含新值，即可轻松覆盖从默认值继承的值。

var tl = gsap.timeline({defaults: {duration: 1}});

tl.to(".green", {x: 200})
  .to(".orange", {duration: 3, x: 200, scale: 0.2}) //inherited default is overwritten
  .to(".grey", {x: 200, scale: 2, y: 20});

使用位置参数控制放置

构建华丽，精确定时序列的秘诀是了解位置参数。这个超级灵活的参数控制补间、标签、回调、暂停甚至嵌套时间线的位置。

position 参数跟在 vars 对象后面，如下所示：

tl.to(element, {x: 200})
  .to(element, {y: 200}, "+=1") //1 second after end of timeline (gap)
  .to(element, {rotation:90}, "-=0.5") //0.5 seconds before end of timeline (overlap)
  .to(element, {scale: 4}, 6); //at exactly 6 seconds from the beginning of the timeline (absolute)

下面的演示显示了实际运行中的仓位参数。

时间轴控制

时间线和补间共享一组通用的控制方法。由于任何动画的播放头都由其父时间轴控制，这意味着暂停时间轴的播放头会自动影响其所有子级！跳转到时间轴上的其他时间（）或进度（），所有子级都将相应地呈现。

时间轴特殊属性

时间轴还具有特殊属性，您可以选择将这些属性传递到构造函数中以对其进行配置。最常用的时间线选项包括：

• 重复：动画将重复的次数。
• 重复延迟：重复之间的时间量（以秒为单位）。
• yoyo：如果 ，则在每次重复时将交替向前和向后播放。true
• delay：时间线开始前的时间（以秒为单位）。
• onComplete：时间轴播放完毕后调用的函数。

例：

var tl = gsap.timeline({
 repeat: 1, 
 yoyo: true, 
 onRepeat: onRepeatHandler,
 onComplete: onCompleteHandler
});

Getter/ Setter Methods

补间和时间线不仅共享类似的回调和控制方法，而且还具有用于获取和设置动画特定属性的常用方法。最常用的 getter/setter 方法是

• time（）：播放头的本地位置（当前时间，以秒为单位），不包括任何重复或重复延迟。
• progress（）：补间的进度值介于 0 和 1 之间，表示播放头的位置，其中 0 在开头，0.5 在中途完成，1 在末尾。
• duration（）：动画的持续时间（以秒为单位），不包括任何重复或重复延迟。
• delay（）：动画的初始延迟（动画开始前的时间长度（以秒为单位）。

这些方法可以用作 setter（通过传入值）或 getter（通过省略所有参数）。在下面的代码示例中，请注意，duration（）方法可以以完全相同的方式用于补间和时间线。

var tween = gsap.to(".orange", {duration: 1, x: 100});

console.log(tween.duration()); // 1

tween.duration(2); //sets the duration to 2 seconds

var tl = gsap.timeline();
tl.to(".green", {duration: 5, x: 200})
  .to(".orange", {duration: 5, x: 200});
  //the timeline contains 2 sequenced tweens that are both 5 seconds long

console.log(tl.duration()); // 10

//sets the duration to only 2 seconds. For timelines, that actually alters the timeScale to make it play within that duration
tl.duration(2);

演示：时间刻度（）

下面的演示演示了如何设置和获取时间线的 timeScale（）。

获取元素属性的当前值

在任何补间的回调函数中，都可以使用 this.targets（）获取补间影响的目标数组。这在箭头函数中不起作用，因为箭头函数的作用域是这样的，因此，如果您需要访问目标，请确保使用常规函数。

如果要获取特定元素的当前值，可以（在任何时候，任何元素，包括箭头函数内）的最佳方法是使用 GSAP 的.getProperty（）方法。

let w = gsap.getProperty("#id", "width"); //you can use selector text
let bgColor = gsap.getProperty(element, "backgroundColor"); // or a variable reference

// used in combination with this.targets()
gsap.to(".class", {x: 100, onUpdate: function() {
  let elem = this.targets()[0];
  
  console.log(gsap.getProperty(elem, "x");); // logs all values used for the first element tweened to the console
} });

绿袜俱乐部

加入绿袜俱乐部有三个主要原因：

• 获得会员专用奖励插件，可以将你的动画技能提升到一个新的水平（MorphSVGPlugin，SplitText，GSDevTools 等等）。
• 获得 "商业绿色" 级别附带的特殊商业许可证。详细了解许可。
• 支持 GreenSock 为维护和增强工具所做的持续努力。这是一种说_"谢谢"_并防止开源常见弱点的方式。

MorphsvGPlugin （bonus）

作为我们最受欢迎和最强大的工具之一，MorphSVG 可以轻松地将一个 SVG 形状转换为另一个 SVG 形状，而不管每个形状的点数是多少！

其他奖励插件

• drawSVG - 使您能够增强对 SVG 笔触显示方式的控制。
• physics2D & physicsProps - 用于根据速度、加速度、摩擦力等对物体进行动画处理。
• scrambleText - 用于文本的动画解码。
• GSDevTools - 添加用于控制 GSAP 动画的可视化 UI，这可以显着提高您的工作流程和生产力。
• 惯性 - 适用于轻拂、折腾和优雅滑动的动画。
• 拆分文本 - 用于拆分字符、单词或文本行，以便于制作动画。
• MotionPathHelper：在浏览器中轻松编辑任何路径。

在 CodePen 上免费试用所有奖励插件。立即注册绿色袜子俱乐部！

渴望更多？

现在你已经掌握了基础知识，对你萌芽的动画超能力有一种新的自由感和兴奋感是很常见的。这里有一些资源可以养活你的成瘾... 的。。。扩展您的技能组合：

• 文档
• 学习文章
• 最常见的 GSAP 错误
• GSAP 3 备忘单
• 社区论坛 - 这是一个学习和回答您的问题的绝佳场所！
• GSAP 3 Express - 我们推荐的付费视频课程，带您从 0 GSAP 经验到胜任。它有数小时的视频和大量的演示。
• 示例和展示
• 绿袜俱乐部
• CSS 技巧文章：编写更智能的动画代码
• 安装指南
• 为什么选择 GSAP？- 开发人员实用指南
• 使用 GSAP 对 SVG 进行动画处理