當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/8/1 编程问答 55 豆豆

生活随笔收集整理的這篇文章主要介紹了 greensock下载_面向初学者的GreenSock（第2部分）：GSAP的时间表小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

greensock下載

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部分。

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 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進行動畫處理將介紹如何充分利用網絡上的動畫，以及何時可以考慮使用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的有趣動畫效果向您介紹KUTE.js，這是一個免費且功能豐富JavaScript動畫庫
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)向您展示了如何使用Velocity.js(一個開放源代碼，功能強大的免費動畫庫)來創建高效的網絡動畫。
GreenSock for Beginners: a Web Animation Tutorial (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部分)概述了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 by SitePoint (@SitePoint) on CodePen.

請參閱Pen GSAP教程第2部分：為什么在 CodePen上使用SitePoint ( @SitePoint ) 創建時間軸。

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 2TweenMax.to('.example__title', 0.5, {// rest of the code heredelay: 0.6 });

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

請參見Pen GSAP教程第2部分：在CodePen上按SitePoint( @SitePoint ) 延遲管理序列。

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, both included in TweenMax.

到那時，您將非常高興地知道GSAP已經為您提供了強大而靈活的TimelineLite和TimelineMax ，它們都包含在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 on the GSAP website.

首先， 實例化時間表。您可以選擇TimelineLite或TimelineMax ，具體取決于所需的功能。 TimelineMax具有TimelineLite的所有功能以及一些其他功能。您可以在GSAP網站的TimelineMax專用頁面上找到兩個模塊中可用內容的完整列表。

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, 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.

上面的代碼首先在任何動畫開始使用set()之前為元素調整一些值。就像將set()與TweenMax一起使用一樣，您可以在時間軸上使用相同的方法來實現相同的目標，即，設置元素屬性的值，以使更改立即生效，而無需隨著時間的推移而改變。動畫。您可以在專用文檔的頁面中閱讀有關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 by SitePoint (@SitePoint) on CodePen.

見筆GSAP教程：簡單的時間表由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 by SitePoint (@SitePoint) on CodePen.

請參閱Pen GSAP教程： CodePen上的SitePoint ( @SitePoint ) 的Position參數。

將標簽用作位置參數的值 (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 by SitePoint (@SitePoint) on CodePen.

請參閱Pen GSAP教程： CodePen上帶有 SitePoint( @SitePoint ) 標簽的Position參數。

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

您可以在GSAP網站的此專用頁面上的位置參數上了解更多信息。

掌握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 instanceconst tl = new TimelineMax();// add your tweens to the timeline as usualtl.to(myElement, 0.5, {rotation: 90,ease: Back.easeOut}).to(otherElement, 1, {// more code here});// return the timeline instancereturn 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 by SitePoint (@SitePoint) on CodePen.

請參見Pen GSAP教程： CodePen上的SitePoint ( @SitePoint ) 嵌套的時間軸。

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部分中，您學習了如何使用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 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()方法縮放動畫的時間。值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 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()方法和標簽的使用，您將能夠從時間軸上的任何點開始動畫。主時間軸內的嵌套時間線也是如此，這就是為什么我在上一部分中向主時間軸添加了一個名為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/