greensock下载_面向初学者的GreenSock（第2部分）：GSAP的时间表

向右看齐 2022-12-03 09:15 195阅读 0赞

greensock下载

![Animating the DOM with GreenSock (GSAP) Part 2][Animating the DOM with GreenSock _GSAP_ Part 2]

The aim of this second part of GreenSock for Beginners is to introduce you to GreenSock’s [TimelineMax][]. You’ll be learning:

GreenSock初学者第二部分的目的是向您介绍GreenSock的[TimelineMax][] 。 您将学习：

*  Why you need a timeline
    
    为什么需要时间表
 *  How to include multiple tweens in a timeline
    
    如何在时间轴中包括多个补间
 *  How to package multiple timelines into functions and nest them inside a master timeline for greater flexibility.
    
    如何将多个时间轴打包为函数并将其嵌套在主时间轴中以提高灵活性。

By the end of this tutorial, you’ll be comfortable working with GreenSock’s timeline to manipulate and fully control multiple tweens.

在本教程结束时，您将轻松使用GreenSock的时间轴来操纵和完全控制多个补间。

For an introduction to the basics of GreenSock, including how to work with TweenMax for sequencing and staggering simple animations, head over to [part 1][] of this multi-part article.

有关GreenSock基础知识的介绍，包括如何与TweenMax一起使用以对简单动画进行排序和交错，请继续阅读本多篇文章的第[1][part 1]部分。

The GreenSock articles are part of the series *Beyond CSS: Dynamic DOM Animation Libraries*. Here’s what I covered in the past instalments:

GreenSock文章是*Beyond CSS：动态DOM动画库*系列文章的一部分。 这是我过去分期介绍的内容：

*  [*Animating the DOM with Anime.js*][Animating the DOM with Anime.js] touches on how to make the best use of animation on the web and when you could consider using a JavaScript animation library instead of CSS-only animation. It then focuses on Anime.js, a free and lightweight JavaScript animation library
    
    [*使用Anime.js对DOM进行动画处理将*][Animating the DOM with Anime.js]介绍如何充分利用网络上的动画，以及何时可以考虑使用JavaScript动画库而不是仅CSS动画。 然后重点介绍Anime.js，这是一个免费的轻量级JavaScript动画库
 *  [Fun Animation Effects with KUTE.js][] introduces you to KUTE.js, a free and feature-rich JavaScript animation library
    
    [带有KUTE.js的有趣动画效果][Fun Animation Effects with KUTE.js]向您介绍KUTE.js，这是一个免费且功能丰富JavaScript动画库
 *  [Make Your Website Interactive and Fun with Velocity.js (No jQuery)][Make Your Website Interactive and Fun with Velocity.js _No jQuery] shows you how to use Velocity.js, an open source, robust free animation library, to create performant web animations
    
    [使用Velocity.js(无jQuery)使您的网站具有互动性和乐趣(无jQuery)][Make Your Website Interactive and Fun with Velocity.js _No jQuery]向您展示了如何使用Velocity.js(一个开放源代码，功能强大的免费动画库)来创建高效的网络动画。
 *  [GreenSock for Beginners: a Web Animation Tutorial (Part 1)][part 1] is an overview of GreenSock, also known as GSAP (GreenSock Animation Platform), where I discuss the library’s modules and licensing model. I also show you how to code a simple tween, sequences of tweens, and staggering animations using GSAP TweenMax.
    
    [GreenSock面向初学者：Web动画教程(第1部分)][part 1]概述了GreenSock，也称为GSAP(GreenSock动画平台)，在此我讨论库的模块和许可模型。 我还将向您展示如何使用GSAP TweenMax编写简单的补间，补间序列和交错动画。

## 为什么需要GreenSock的时间表来编写Web动画代码？ **(**Why Would You Need GreenSock’s Timeline to Code Your Web Animations?**)** ##

In Part 1, you learned how to add different animations to an element or multiple elements by creating a number of independent tweens and coordinating their timings with each tween’s `delay` property.

在第1部分中，您学习了如何通过创建多个独立的补间并将它们的定时与每个补间的`delay`属性协调来将不同的动画添加到一个或多个元素。

By default, stacking one tween after another results in all tweens happening at once.

默认情况下，一个接一个的补间堆叠会导致所有补间同时发生。

What would be more helpful, however, is to be able to control when a tween is triggered with respect to other tweens, e.g., at the same time, 1 second or half a second before or after, etc.

然而，更有利的是能够控制何时相对于其他补间触发补间，例如，同时，之前或之后的1秒或半秒等。

Take this basic example with just two tweens. Here’s what happens:

以这个只有两个补间的基本示例为例。 这是发生了什么：

*  Tween 1: a circle shape grows and shrinks as it rotates on its X and Y axes
    
    补间1：圆形随着其X和Y轴旋转而增长和收缩
 *  Tween 2: some text pops up.
    
    补间2：弹出一些文本。

The GSAP snippet that makes it work looks like this:

使它起作用的GSAP代码段如下所示：

// scale down the text 
    // and hide it before the animation begins 
    TweenMax.set('.example__title', { 
      scale: 0.2, 
      autoAlpha: 0
    });
    
    // scale the circle shape down before 
    // the animation begins
    TweenMax.set('.example__ball', {
      scale: 0.2
    });
    
    // tween 1
    TweenMax.to('.example__ball', 0.5, {
      rotationX: 360,
      rotationY: 180,
      scale: 1,
      ease: Elastic.easeIn.config(2, 1)
    });
    
    // tween 2
    TweenMax.to('.example__title', 0.5, {
      autoAlpha: 1,
      scale: 1,
      ease: Back.easeOut.config(4)
    });

As you can see, both tweens happen at the same time, which is not the desired effect:

如您所见，两个补间是同时发生的，这不是理想的效果：

See the Pen [GSAP Tutorial Part 2: Why the Timeline][GSAP Tutorial Part 2_ Why the Timeline] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅Pen [GSAP教程第2部分：为什么在][GSAP Tutorial Part 2_ Why the Timeline] [CodePen][SitePoint]上使用[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [创建时间轴][CodePen] 。

If you want the text to appear just when the shape has stopped rotating, you’ll need to add an appropriate delay to tween2, like this:

如果要使文本仅在形状停止旋转时显示，则需要向tween2添加适当的延迟，如下所示：

// tween 2
      TweenMax.to('.example__title', 0.5, {
      // rest of the code here
      delay: 0.6
    });

See the Pen [GSAP Tutorial Part 2: Managing Sequences with Delay][GSAP Tutorial Part 2_ Managing Sequences with Delay] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见Pen [GSAP教程第2部分：][GSAP Tutorial Part 2_ Managing Sequences with Delay]在[CodePen][]上按SitePoint( [@SitePoint][SitePoint] ) [延迟管理序列][GSAP Tutorial Part 2_ Managing Sequences with Delay] 。

This works, but imagine you want to change the duration of the first tween, or the number of times it repeats. You’ll soon realize that the second tween doesn’t automatically wait for the first one to come to a close before starting. Therefore, you’ll need to adjust the `delay`‘s value on the second tween. With just two tweens and such a simple animation this won’t be much of a problem. Not so when your animations are more ambitious and the number of tweens grows.

这可以起作用，但是假设您要更改第一个补间的持续时间或重复的次数。 您很快就会意识到，第二个补间不会在开始前自动等待第一个补间结束。 因此，您需要在第二个补间中调整`delay`的值。 只有两个补间和如此简单的动画，这将不是什么大问题。 当您的动画更加雄心勃勃且补间数量增加时，情况并非如此。

That’s when you’ll be super happy to know that GSAP has you covered with its robust and flexible [TimelineLite][] and [TimelineMax][TimelineMax 1], both included in TweenMax.

到那时，您将非常高兴地知道GSAP已经为您提供了强大而灵活的[TimelineLite][]和[TimelineMax][TimelineMax 1] ，它们都包含在TweenMax中。

## 与GSAP的时间轴协调多个补间 **(**Coordinating Multiple Tweens with GSAP’s Timeline**)** ##

Think of a timeline as a container for a number of tweens, or even other timelines. Inside a timeline, tweens lose their independence and become interconnected with one another. By default, each tween fires after the previous one has completed, it doesn’t matter if you change duration to any of your tweens or how many times they repeat.

可以将时间轴视为多个补间甚至其他时间轴的容器。 在时间轴内，补间失去了独立性，并相互连接。 默认情况下，每个补间会在上一个补间完成后触发，无论您将持续时间更改为任何补间还是重复多少次都没有关系。

As a first step into GreenSock’s timeline, try placing the tweens in the snippets above inside a timeline.

作为进入GreenSock时间轴的第一步，请尝试将补间放置在时间轴上方的摘要中。

Here’s what the code looks like:

代码如下所示：

// instantiate TimelineMax
    const tl = new TimelineMax();
    
    // scale down the text 
    // and hide it before the animation begins
    tl.set('.example__title', { 
      scale: 0.2, 
      autoAlpha: 0
    })
     // scale the circle shape down before 
     // the animation begins
     .set('.example__ball', {
      scale: 0.2
    })
     // tween 1: rotate shape on X and Y axis
     // scale it up to its regular dimensions
     // add a fun ease
    .to('.example__ball', 0.5, {
      rotationX: 360,
      rotationY: 180,
      scale: 1,
      ease: Elastic.easeIn.config(2, 1)
    })
     // tween 2: make text appear and 
     // scale it up to its regular size
     // add a fun ta-da ease
    .to('.example__title', 0.5, {
      autoAlpha: 1,
      scale: 1,
      ease: Back.easeOut.config(4)
    });

Firstly, **instantiate** the timeline. You can opt for either **TimelineLite** or **TimelineMax**, depending on the features you need. TimelineMax has all TimelineLite’s features plus a few extras. You can find a complete list of what’s available in both modules in the [TimelineMax dedicated page][TimelineMax 1] on the GSAP website.

首先， **实例化**时间表。 您可以选择**TimelineLite**或**TimelineMax** ，具体取决于所需的功能。 TimelineMax具有TimelineLite的所有功能以及一些其他功能。 您可以在GSAP网站的[TimelineMax专用页面][TimelineMax 1]上找到两个模块中可用内容的完整列表。

The snippet above creates an instance of TimelineMax called *tl*. You can choose any name you like, it won’t affect the validity of your code.

上面的代码段创建了一个名为*tl*的TimelineMax实例。 您可以选择任何喜欢的名称，它不会影响代码的有效性。

Once you’ve got your instance, you can use most of the methods you’re already familiar with from Part 1 like `to()`, `from()`, `fromTo()`, etc.

一旦有了实例，就可以使用第1部分已经熟悉的大多数方法，例如`to()` ， `from()` ， `fromTo()`等。

The code above starts with adjusting a few values for your elements before any animation begins using `set()`. Just like you used [`set()` with TweenMax][set_ with TweenMax], you can use the same method with the timeline to accomplish the same goals, i.e., setting the values of your elements’ properties so that change takes effect immediately, without the change over time which is typical of animation. You can read more about the use of `set()` in the [dedicated docs’ page][dedicated docs_ page].

上面的代码首先在任何动画开始使用`set()`之前为元素调整一些值。 就像将[`set()`与TweenMax一起][set_ with TweenMax]使用一样，您可以在时间轴上使用相同的方法来实现相同的目标，即，设置元素属性的值，以使更改立即生效，而无需随着时间的推移而改变。动画。 您可以在[专用文档的页面中][dedicated docs_ page]阅读有关`set()`使用的更多信息。

The rest of the code is not different from what you previously wrote using TweenMax, the only difference is that you’re now chaining TimelineMax methods. As you can see, GSAP’s syntax remains consistent throughout its implementations, which certainly helps the learning process.

其余代码与您之前使用TweenMax编写的代码没有什么不同，唯一的区别是您现在正在链接TimelineMax方法。 如您所见，GSAP的语法在整个实现过程中保持一致，这无疑有助于学习过程。

The most important thing to notice is that now the text appears just after the shape has finished animating. But look at the code a bit closer, you didn’t need to use any `delay` property to accomplish this. As a matter of fact, **you don’t need delays to coordinate your tweens** any more, no matter how many other tweens you keep adding to your timeline.

最重要的是要注意的是，现在文本在动画制作完成后立即显示。 但是，再仔细看一下代码，就不需要使用任何`delay`属性来完成此任务。 事实上，无论您继续向时间轴添加多少其他补间， **都不再需要延迟来协调补间** 。

See the Pen [GSAP Tutorial: Simple Timeline][GSAP Tutorial_ Simple Timeline] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

见笔[GSAP教程：简单的时间表][GSAP Tutorial_ Simple Timeline]由SitePoint( [@SitePoint][SitePoint] )上[CodePen][] 。

### GreenSock的时间轴最大位置参数 **(**GreenSock’s TimelineMax Position Parameter**)** ###

Having your tweens run in quick succession automatically is all well and good. However, what if you’d like to have one element animate just half a second before, or a couple of seconds after, the previous animation completes? All this without having to readjust other values in the overall animation.

让您的补间自动快速连续运行非常好。 但是，如果您希望在上一个动画完成前半秒或几秒钟后让一个元素动画，该怎么办？ 所有这些都无需重新调整整个动画中的其他值。

That’s where the **position parameter** comes in. You add this parameter after the *vars \{\} object* using **relative incrementation** (`-=0.5`, `+=2`).

这就是**位置参数的**来源。您可以使用**相对增量** ( `-=0.5` ， `+=2` )在*vars \{\}对象*之后添加此参数。

Adding `-=1` triggers a tween 1 second **before** the end of the previous tween in the timeline, while `+=1` will trigger a tween 1 second **after** the end of the previous tween in the timeline.

添加`-=1`会在时间轴中的上一个补间结束**之前** 1秒钟触发补间，而`+=1`会在时间轴中的前一个补间结束**之后** 1秒钟触发补间。

You can also use an absolute number, e.g., `1`, as value for the position parameter. In this case, the value specifies the precise time in seconds you’d like your tween to start.

您还可以使用绝对数字(例如`1` )作为位置参数的值。 在这种情况下，该值指定您希望补间开始的精确时间(以秒为单位)。

Here’s a simple example:

这是一个简单的例子：

.to(box1, 1, {
      rotation: 45,
      transformOrigin: 'center bottom',
      ease: Elastic.easeOut
    })
    .to(box2, 1, {
      rotation: -45,
      transformOrigin: 'center bottom',
      ease: Elastic.easeOut
    })

The snippet above shows two elements rotating in opposite directions inside a timeline.

上方的代码段显示了两个元素在时间轴内沿相反的方向旋转。

Without a position parameter, `box2` would start animating as soon as `box1` completes its animation.

如果没有位置参数，则`box2`将在`box1`完成动画后立即开始制作动画。

To make both tweens fire at once, add a comma after the closing curly brace in the second tween and a position parameter of `'-=1'`, like so:

要使两个补间同时触发，请在第二个补间的右花括号后添加一个逗号，并使用`'-=1'`的位置参数，如下所示：

.to(box1, 1, {
      // code here
    })
    .to(box2, 1, {
      // code here
    }, '-=1') //position parameter

Because the first tween lasts 1 second, a position parameter of `'-=1'` will anticipate the animation by 1 second, which will cause both tweens to fire at the same time.

由于第一个补间持续1秒钟，因此位置参数`'-=1'`将在1秒钟之前预见动画，这将导致两个补间同时触发。

Here’s the code above in the context of a longer animation using the position parameter.

这是上面使用位置参数进行较长动画处理时的代码。

See the Pen [GSAP Tutorial: The Position Parameter][GSAP Tutorial_ The Position Parameter] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅Pen [GSAP教程：][GSAP Tutorial_ The Position Parameter] [CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [的Position参数][GSAP Tutorial_ The Position Parameter] 。

### 将标签用作位置参数的值 **(**Using Labels as Value for the Position Parameter**)** ###

There is a more flexible and intuitive way of working with the position parameter: instead of just numbers, you can use labels, which you can add to the timeline and refer back to in your tweens.

有一种使用position参数的更灵活，直观的方法：您可以使用标签，而不是仅数字，可以将标签添加到时间轴并在补间中返回引用。

The use of labels makes your code much more readable, something you’ll be thankful for in more involved animations.

标签的使用使您的代码更具可读性，在涉及更多动画方面，您将感激不尽。

Whenever you need a reference point for timing your tweens in a timeline, just add a label with some meaningful text using the `.add()` method of both TimelineLite and TimelineMax:

每当需要参考点来在时间轴中为补间计时时，只需使用TimelineLite和TimelineMax的`.add()`方法添加带有一些有意义的文本的标签：

tl.add('nameoflabel');

Then, use the label as position parameter:

然后，将标签用作位置参数：

// move element horizontally 100px
    tl.to(element, 0.5, {
      x: 100
    })
    .add('go') // add a label
    // move element vertically 100px
    // with reference to the 'go' label
    .to(element, 1, {
      y: 100
    }, 'go');
    // rotate otherElement 
    // with reference to the 'go' label
    .to(otherElement, 0.5, {
      rotation: 360
    }, 'go');

In the snippet above, *element* moves 100px to the right. As soon as this animation ends, both *element* and *anotherElement* animate at the same time, because they both fire with reference to the *go* label (just give labels a name that makes sense in the context of your animation).

在上面的代码段中， *元素*向右移动100px。 该动画结束后， *element*和*anotherElement都会同时进行*动画处理，因为它们都将参照*go*标签触发(只需给标签起一个在动画上下文中有意义的名称即可)。

You can also use labels with relative values. For example, if you want *otherElement* to fire 2 seconds after *element*, use this as position parameter instead: `'go+=2'`.

您也可以使用带有相对值的标签。 例如，如果您希望*otherElement*在*element*之后2秒触发，请使用this作为位置参数： `'go+=2'` 。

In the following demo, notice how some of the animations, for example those relating to the robot’s hand-waving, mouth movement and speech bubble, are all coordinated using labels as position parameter:

在下面的演示中，请注意如何使用标签作为位置参数来协调某些动画，例如与机器人的挥手，嘴巴运动和讲话泡泡有关的那些动画：

See the Pen [GSAP Tutorial: The Position Parameter with Labels][GSAP Tutorial_ The Position Parameter with Labels] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅Pen [GSAP教程：][GSAP Tutorial_ The Position Parameter with Labels] [CodePen][SitePoint]上[带有][CodePen] SitePoint( [@SitePoint][SitePoint] ) [标签的Position参数][GSAP Tutorial_ The Position Parameter with Labels] 。

You can learn tons more on the position parameter in this [dedicated page on the GSAP website][].

您可以[在GSAP网站的][dedicated page on the GSAP website]此[专用页面上的][dedicated page on the GSAP website]位置参数上了解更多[信息][dedicated page on the GSAP website] 。

## 掌握GreenSock的时间表并保持代码井井有条 **(**Master Timelines with GreenSock and Keeping Your Code Organized**)** ##

Although the demos you’ve seen so far work fine for demonstration purposes, writing your code in the global scope is not best practice.

尽管到目前为止您看到的演示都可以很好地用于演示目的，但是在全局范围内编写代码并不是最佳实践。

If your animation is quite simple, just package your timeline inside a function and call it at the appropriate time.

如果您的动画非常简单，只需将时间轴打包在一个函数中，然后在适当的时间调用它即可。

For more complex scenarios, GSAP’s super powers include a **master timeline**, that is, a regular timeline where you can nest other timelines. This setup works wonders in terms of keeping your code organized, maintainable, and flexible.

对于更复杂的方案，GSAP的超级功能包括一个**主时间轴** ，即一个常规时间轴，您可以在其中嵌套其他时间轴。 在保持代码的组织性，可维护性和灵活性方面，此设置可产生奇迹。

Here’s what a nested timeline looks like:

嵌套时间轴如下所示：

// timeline-based animation inside a function
    function partOne() {
      // timeline instance
      const tl = new TimelineMax();
      
      // add your tweens to the timeline as usual
      tl.to(myElement, 0.5, {
        rotation: 90,
        ease: Back.easeOut
      })
        .to(otherElement, 1, {
        // more code here
      });
      
      // return the timeline instance
      return tl;
    }
    
    // create a new timeline instance 
    const master = new TimelineMax();
    
    // add your function and a label to it
    master.add(partOne(), 'part1');

The snippet above shows a timeline-based animation tucked away in its own function. You can name the function in a way that describes that chunk of animation or simply *partOne*, *sceneOne*, etc., whatever makes more sense to you. You then instantiate GSAP TimelineLite or TimelineMax, add your tweens as you’ve done so far, and **return the timeline instance**: `return tl`.

上面的代码片段显示了一个基于时间轴的动画，该动画具有其自身的功能。 您可以通过描述动画片段的方式来命名函数，也可以仅描述*partOne* ， *sceneOne*等，这对您来说更有意义。 然后，您实例化GSAP TimelineLite或TimelineMax，按照目前为止的步骤添加补间，并**返回时间轴实例** ： `return tl` 。

Finally, you create your master timeline instance and use `.add()` to include your function **making sure the function gets called (notice the brackets in the function name)**.

最后，创建主时间轴实例，并使用`.add()`包括函数**以确保调用了该函数(请注意函数名称中的方括号)** 。

In the snippet I also added a label. This will come in handy when you want to control the master timeline as a whole. I’ll show you what I mean in the next section.

在代码段中，我还添加了一个标签。 当您要整体控制主时间轴时，这将派上用场。 在下一节中，我将向您展示我的意思。

The cool thing is that now you can create more timelines inside functions and add them to the master timeline. So modularized, your code is a lot easier to understand and more flexible: you can change the order in which the timelines are called as well as their timing relationships in a snap.

很棒的事情是，现在您可以在函数内部创建更多时间线，并将其添加到主时间线。 如此模块化，您的代码更容易理解和更加灵活：您可以快速更改时间线的调用顺序及其时序关系。

Have a look at the demo below, which uses a master timeline to host an animation broken into four timelines, each in its own function:

看看下面的演示，该演示使用主时间轴来承载分为四个时间轴的动画，每个时间轴都有自己的功能：

See the Pen [GSAP Tutorial: Nested Timelines][GSAP Tutorial_ Nested Timelines] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见Pen [GSAP教程：][GSAP Tutorial_ Nested Timelines] [CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [嵌套的时间轴][GSAP Tutorial_ Nested Timelines] 。

## GreenSock的时间轴动画技巧 **(**GreenSock’s Timeline Animation Tricks**)** ##

GreenSock has some neat tricks up its timeline’s sleeve that will make your life as a web animator easier.

GreenSock在时间轴上有一些巧妙的窍门，这将使您作为网络动画师的生活更加轻松。

Here’s how.

这是如何做。

### 如何在页面加载时暂停所有GSAP补间 **(**How to Pause All Your GSAP Tweens on Page Load**)** ###

A timeline puts your tweens in relation with each other, therefore it lets you control them as a whole.

时间线使补间彼此相关，因此可以整体控制它们。

Let’s say you’d like to pause all your tweens on page load because you’d like to start your animation on button click. GSAP’s timeline lets you do this in one line of code when you instantiate it:

假设您想在页面加载时暂停所有补间，因为您想在单击按钮时开始动画。 实例化GSAP的时间轴后，您可以在一行代码中完成此操作：

const tl = new TimelineMax({ paused: true });

Similarly, you can pause nested timelines in one blow by pausing the master timeline:

同样，您可以通过暂停主时间轴来一击暂停嵌套的时间轴：

const master = new TimelineMax({ paused: true });

### 如何整体播放，暂停，重新启动和反转多个GSAP补间 **(**How to Play, Pause, Restart, and Reverse Multiple GSAP Tweens as a Whole**)** ###

In [Part 1][], you learned how to control individual tweens using `play()`, `pause()`, `reverse()`, `restart()`, and `resume()`.

在[第1部分中][Part 1] ，您学习了如何使用`play()` ， `pause()` ， `reverse()` ， `restart()`和`resume()`来控制各个补间。

You can use the same methods to control an entire timeline as well as nested timelines (via the master timeline).

您可以使用相同的方法来控制整个时间线和嵌套时间线(通过主时间线)。

For example, to play the entire sequence of tweens inside a timeline, write:

例如，要播放时间轴内的所有补间序列，请编写：

tl.play();

You can see `restart()` at work with the timeline to implement the functionality of the *Replay* button in some of the live CodePen demos above.

您可以在时间轴上看到`restart()` ，可以在上面的一些实时CodePen演示中实现“ *重播”*按钮的功能。

### 如何一次放慢/加速多个GSAP补间 **(**How to Slow Down/Speed Up Multiple GSAP Tweens At Once**)** ###

Wrapping your tweens inside a timeline will let you change the speed of your entire animation with only a tiny bit of code. For instance, to slow down your animation, you can write:

在时间轴中包裹补间将使您仅需少量代码即可更改整个动画的速度。 例如，要减慢动画速度，可以编写：

tl.timeScale(0.3);

or, if you have nested timelines:

或者，如果您有嵌套的时间表：

master.timeScale(0.3);

The [`.timeScale()` method][.timeScale_ method] scales the time of the animation. A value of 1 sets the time to the normal speed (default), 0.5 to half the normal speed, 2 to double the normal speed, etc.

[`.timeScale()`方法][.timeScale_ method]缩放动画的时间。 值1会将时间设置为正常速度(默认值)，将时间设置为正常速度的0.5倍，将时间设置为正常速度的两倍，依此类推。

Why is this useful? Because there will be times when you need to check what your animation looks like when played a bit faster, or you just want to check specific tweens closely in super slow motion. With GreenSock’s `.timeScale()` you’ll be able to do so without fiddling with the timings in each timeline.

为什么这有用？ 因为有时您需要检查动画播放得更快时的外观，或者只是想以超级慢动作仔细检查特定补间。 使用GreenSock的`.timeScale()`您可以做到这一点，而不必`.timeScale()`每个时间轴中的时间。

### 如何使用GSAP在时间轴上的指定位置播放动画 **(**How to Play Your Animation from a Specified Place in the Timeline with GSAP**)** ###

Creating animations for the web means adjusting the same tween tons of times until it feels just right. However, if your tween is somewhere in the middle of a complex animation, or even worse, right at the end, replaying the entire animation over and over will soon wear you out.

为网络创建动画意味着调整相同的补间次数，直到感觉恰到好处。 但是，如果补间位于复杂动画的中间，甚至更糟，恰好在最后，一遍又一遍地重播整个动画将很快使您疲惫。

Enters `.seek()`, your best friend. With GSAP’s [`.seek()` method][.seek_ method] and the use of labels, you’ll be able to start your animation from any point in the timeline. The same goes for nested timelines inside a master timeline, which is why I added a label named *part1* to the master timeline in the previous section above.

输入您最好的朋友`.seek()` 。 使用GSAP的[`.seek()`方法][.seek_ method]和标签的使用，您将能够从时间轴上的任何点开始动画。 主时间轴内的嵌套时间线也是如此，这就是为什么我在上一部分中向主时间轴添加了一个名为*part1*的标签的原因。

In particular, here’s a master timeline with 3 nested timelines:

特别是，这是一个包含3个嵌套时间轴的主时间轴：

const master = new TimelineMax();
    
    master.add(partOne(), 'part1')
          .add(partTwo(), 'part2')
          .add(partThree(), 'part3');

Let’s say, there are some adjustments you’d like to make to the middle part of the animation, and to do so you need to test your changes quite a few times. Instead of playing the entire sequence of animations over and over, which could be a tedious job, write the snippet below and your animation will start exactly at ‘part2’:

假设您要对动画的中间部分进行一些调整，因此您需要多次测试更改。 而不是一遍又一遍地播放整个动画序列，这可能是一件乏味的工作，而是在下面编写代码段，动画将完全从“ part2”开始：

master.seek('part2');

If, on the other hand, you’d like to start your animation 3 seconds after ‘part2’, use the label with a relative position parameter:

另一方面，如果您想在“ part2”之后3秒钟开始播放动画，请使用带有相对位置参数的标签：

master.seek('part2+=3');

Awesome, you’re animation starts at the exact point where you want to make your adjustments and you can make any number of tests without pulling your hair out.

太棒了，您的动画就从您要进行调整的确切点开始，您可以进行任何数量的测试而不会费力。

## 结论 **(**Conclusion**)** ##

This article has shown you how to work with GreenSock’s TimelineMax() and with nested timelines. It should be clear the huge control this flexible and robust timeline library can give you when creating web animations, and how quick it can be to put together a sophisticated animation sequence with its help.

本文向您展示了如何使用GreenSock的TimelineMax()和嵌套的时间线。 应该清楚的是，此灵活而强大的时间轴库在创建Web动画时可以为您提供巨大的控制，并且可以借助其帮助将复杂的动画序列组合在一起有多快。

Stay tuned for Part 3 of this mini-series dedicated to GreenSock, where you’ll be experimenting with some awesome GSAP premium plugins on CodePen.

请继续关注这个专门针对GreenSock的微型系列文章的第3部分，您将在CodePen上尝试一些很棒的GSAP高级插件。

In the meantime, to familiarize yourself with the timeline, just fork one of the demos and tweak the position parameter values, add more tweens to the existing timlines, reverse their order, etc.

同时，要熟悉时间线，只需派生一个演示并调整位置参数值，向现有的基准线添加更多补间，颠倒其顺序，等等。

**Then, why not create your own animations and share them with all of us in the comments?**

**然后，为什么不创建自己的动画并在评论中与我们所有人共享呢？**

> 翻译自: [https://www.sitepoint.com/greensock-beginners-part-2-gsaps-timeline/][https_www.sitepoint.com_greensock-beginners-part-2-gsaps-timeline]

greensock下载

[Animating the DOM with GreenSock _GSAP_ Part 2]: /images/20221123/e86d32517e684d87b350a95423e29b04.png
[TimelineMax]: https://greensock.com/docs/TimelineMax
[part 1]: https://www.sitepoint.com/web-animation-tutorial-part-1
[Animating the DOM with Anime.js]: https://www.sitepoint.com/animating-the-dom-with-anime-js/
[Fun Animation Effects with KUTE.js]: https://www.sitepoint.com/fun-web-animation-effects-with-kute-js/
[Make Your Website Interactive and Fun with Velocity.js _No jQuery]: https://www.sitepoint.com/how-to-use-velocity-js-without-jquery/
[GSAP Tutorial Part 2_ Why the Timeline]: https://codepen.io/SitePoint/pen/qjzyqB/
[SitePoint]: https://codepen.io/SitePoint
[CodePen]: https://codepen.io
[GSAP Tutorial Part 2_ Managing Sequences with Delay]: https://codepen.io/SitePoint/pen/Ogewpj/
[TimelineLite]: https://greensock.com/timelinelite
[TimelineMax 1]: https://greensock.com/timelinemax
[set_ with TweenMax]: https://www.sitepoint.com/web-animation-tutorial-part-1/#usinggreensocksetmethod
[dedicated docs_ page]: https://greensock.com/docs/TimelineMax/set%28%29
[GSAP Tutorial_ Simple Timeline]: https://codepen.io/SitePoint/pen/dRBjdX/
[GSAP Tutorial_ The Position Parameter]: https://codepen.io/SitePoint/pen/QgXBxV/
[GSAP Tutorial_ The Position Parameter with Labels]: https://codepen.io/SitePoint/pen/jwgwev/
[dedicated page on the GSAP website]: https://greensock.com/position-parameter
[GSAP Tutorial_ Nested Timelines]: https://codepen.io/SitePoint/pen/rwEZWx/
[Part 1]: https://www.sitepoint.com/web-animation-tutorial-part-1/#takingcontrolofyourgsaptweens
[.timeScale_ method]: https://greensock.com/docs/TimelineMax/timeScale%28%29
[.seek_ method]: https://greensock.com/docs/TimelineMax/seek%28%29
[https_www.sitepoint.com_greensock-beginners-part-2-gsaps-timeline]: https://www.sitepoint.com/greensock-beginners-part-2-gsaps-timeline/