GSAP 入门 - 学习中心 - 绿袜

> 本文由 [简悦 SimpRead](http://ksria.com/simpread/) 转码， 原文地址 [greensock.com](https://greensock.com/get-started/)

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

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

### 快速链接

*   [什么是 GSAP？](#what-is-gsap)
*   [加载 GSAP](#loading-gsap)
*   [补间基础知识](#tweening-basics)
*   [CSSPlugin](#CSSPlugin)
*   [2D 和 3D 转换](#2d-and-3d-transforms)
*   [宽松](#easing)
*   [交错](#staggers)
*   [回调](#callbacks)
*   [使用时间轴进行排序](#sequencing-with-timelines)
*   [时间轴控制](#timeline-control)
*   [Getter / Setter 方法](#getter-setter-methods)
*   [获取元素属性的当前值](#get-property)
*   [绿袜俱乐部](#club-greensock)

我们将在此处介绍最受欢迎的功能，但请保留 [GSAP 文档](https://greensock.com/docs)以获取所有详细信息。

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

GSAP 是一个属性操纵者
-------------

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

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

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

![](https://greensock.com/uploads/emoticons/default_wink.png)

DOM、SVG、`<canvas>` 等
------------------

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

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

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

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

*   [React](https://greensock.com/react)
*   [Vue](https://blog.logrocket.com/animating-vue-with-greensock/)
*   [Angular](https://medium.com/@philipf5/patterns-for-using-greensock-in-angular-9ec5edf713fb?__s=mv58da3twqgr1th3ssjj)

GSAP 到底是什么？
-----------

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

*   [GSAP 核心](https://greensock.com/docs/v3/GSAP) - 引擎的核心，用于对任何对象的任何属性进行动画处理。它利用[补](https://greensock.com/docs/v3/GSAP/Tween)间[，让您更好地控制动画。](https://greensock.com/docs/v3/GSAP/Timeline)
*   额外的，如节省时间[的插件](https://greensock.com/plugins)，[轻松](https://greensock.com/ease-visualizer)的工具，[实用程序方法](https://greensock.com/docs/v3/GSAP/UtilityMethods)，等等。

加载 GSAP
-------

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

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

### CodePen

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

补间基础知识
------

让我们开始使用基本补间。我们将使用 [CodePen](https://codepen.io/GreenSock/pen/aYYOdN) 演示，以便您可以在浏览器中轻松分叉和编辑每个示例。

### gsap.to（）

要创建动画[，gsap.to（）](https://greensock.com/docs/v3/GSAP/gsap.to())需要 2 个条件：

*   **目标** - 您正在制作动画的对象。这可以是原始对象、对象数组或选择器文本（如 ）。`".myClass"`
*   **vars** - 具有要动画化的属性 / 值对（如 等）和其他可选[特殊属性](https://greensock.com/docs/v3/GSAP/Tween/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`

插件
--

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

最受欢迎的[插件](https://greensock.com/plugins/)包括：

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

### CSSPlugin

在前面的示例中，GSAP 使用了一个名为 [CSSPlugin](https://greensock.com/docs/v3/GSAP/InternalPlugins/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 文档](https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin)。

### 2D 和 3D 转换

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

<table><colgroup><col> <col> </colgroup><tbody><tr><th>GSAP</th><th>CSS</th></tr><tr><td>x: 100</td><td>transform: translateX(100px)</td></tr><tr><td>y: 100</td><td>transform: translateY(100px)</td></tr><tr><td>rotation: 360</td><td>transform: rotate(360deg)</td></tr><tr><td>rotationX: 360</td><td>transform: rotateX(360deg)</td></tr><tr><td>rotationY: 360</td><td>transform: rotateY(360deg)</td></tr><tr><td>skewX: 45</td><td>transform: skewX(45deg)</td></tr><tr><td>skewY: 45</td><td>transform: skewY(45deg)</td></tr><tr><td>scale: 2</td><td>transform: scale(2, 2)</td></tr><tr><td>scaleX: 2</td><td>transform: scaleX(2)</td></tr><tr><td>scaleY: 2</td><td>transform: scaleY(2)</td></tr><tr><td>xPercent: -50</td><td>transform: translateX(-50%)</td></tr><tr><td>yPercent: -50</td><td>transform: translateY(-50%)</td></tr></tbody></table>

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（）](https://greensock.com/docs/v3/GSAP/gsap.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，](https://greensock.com/docs/v3/Eases/CustomEase)它允许您从字面上绘制任何可以想象的缓动曲线。[CustomWiggle 和 CustomBounce](https://greensock.com/wiggle-bounce) 是高级缓动器，可创建极其复杂和逼真的效果。

交错
--

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

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

有关 GSAP 的高级交错功能的更多信息，请参阅[此代码笔](https://codepen.io/GreenSock/full/938f5cd34818443c43af9ba2692137a5)

回调
--

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

*   **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 文档](https://greensock.com/docs/v3/GSAP/Tween#h3-special-properties-callbacks-and-eases)。

控制动画
----

要控制动画，您需要一个实例来使用。、 和 方法都返回一个 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 [的时间轴](https://greensock.com/docs/v3/GSAP/Timeline)。

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

一旦你掌握了时间线的窍门，一个充满可能性的全新世界就会打开。它们提供了一种[将动画代码模块化](https://css-tricks.com/writing-smarter-animation-code/)的绝佳方式。

何时使用时间轴
-------

*   将一组动画作为一个整体进行控制。
*   在不弄乱大量值的情况下构建序列（逐步构建，以便对早期动画的时序调整自动影响后续动画，从而大大简化了实验和维护）。`delay`
*   模块化[动画代码](https://css-tricks.com/writing-smarter-animation-code/)。
*   做任何复杂的编舞。
*   触发基于一组动画的回调（如 "在所有这些动画完成后，调用"）。`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 参数](https://greensock.com/position-parameter)可以轻松精确地控制事物的去向。

### 演示：基本测序

我们将重点介绍 [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())补间添加到时间轴。

方法链接
----

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

```
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});
```

### 使用[位置参数](https://greensock.com/position-parameter)控制放置

构建华丽，精确定时序列的秘诀是了解[位置参数](https://greensock.com/position-parameter)。这个超级灵活的参数控制补间、标签、回调、暂停甚至嵌套时间线的位置。

[position 参数](https://greensock.com/position-parameter)跟在 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)
```

下面的演示显示了[实际运行中的仓位参数](https://greensock.com/position-parameter)。

时间轴控制
-----

时间线和补间共享一组通用的控制方法。由于任何动画的播放头都由其父时间轴控制，这意味着暂停时间轴的播放头会自动影响其所有子级！跳转到时间轴上的其他[时间（）](https://greensock.com/docs/v3/GSAP/Timeline/time())或[进度（），](https://greensock.com/get-started/h/docs/v3/GSAP/Timeline/progress())所有子级都将相应地呈现。

### 时间轴特殊属性

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

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

例：

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

Getter/ Setter Methods
----------------------

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

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

这些方法可以用作 setter（通过传入值）或 getter（通过省略所有参数）。在下面的代码示例中，请注意[，duration（）](https://greensock.com/docs/v3/GSAP/Timeline/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（）。](https://greensock.com/docs/v3/GSAP/Timeline/timeScale())

获取元素属性的当前值
----------

在任何补间的回调函数中，都可以使用 [`this.targets（）`](https://greensock.com/docs/v3/GSAP/Tween/targets())获取补间影响的目标数组。这在箭头函数中不起作用，因为箭头函数的作用域是这样的，因此，如果您需要访问目标，请确保使用常规函数。

如果要获取特定元素的当前值，可以（在任何时候，任何元素，包括箭头函数内）的最佳方法是使用 GSAP 的[`.getProperty（）`](https://greensock.com/docs/v3/GSAP/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
} });
```

[绿袜俱乐部](https://greensock.com/club)
-----------------------------------

加入[绿袜俱乐部](https://greensock.com/club)有三个主要原因：

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

### MorphsvGPlugin （bonus）

作为我们最受欢迎和最强大的工具之一[，MorphSVG](https://greensock.com/morphSVG) 可以轻松地将一个 SVG 形状转换为另一个 SVG 形状，而不管每个形状的点数是多少！

### 其他奖励插件

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

在 [CodePen 上](https://codepen.io/GreenSock/full/OPqpRJ/)**免费**试用所有奖励插件。[立即注册](https://greensock.com/club/)[绿色袜子俱乐部](https://greensock.com/club)！

渴望更多？
-----

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

*   [文档](https://greensock.com/docs)
*   [学习文章](https://greensock.com/learning)
*   [最常见的 GSAP 错误](https://greensock.com/mistakes)
*   [GSAP 3 备忘单](https://greensock.com/cheatsheet/)
*   [社区论坛](https://greensock.com/forums) - 这是一个学习和回答您的问题的绝佳场所！
*   [GSAP 3 Express](https://courses.snorkl.tv/courses/gsap-3-express?ref=44f484) - 我们推荐的付费视频课程，带您从 0 GSAP 经验到胜任。它有数小时的视频和大量的演示。
*   [示例和展示](https://greensock.com/showcase)
*   [绿袜俱乐部](https://greensock.com/club)
*   CSS 技巧文章：[编写更智能的动画代码](https://css-tricks.com/writing-smarter-animation-code/)
*   [安装指南](https://greensock.com/docs/v3/Installation)
*   [为什么选择 GSAP？](https://greensock.com/why-gsap/)- 开发人员实用指南
*   [使用 GSAP 对 SVG 进行动画处理](https://greensock.com/svg-tips/)