greensock下載

My aim in this article is to give you a thorough introduction to GreenSock, also known as GSAP (GreenSock Animation Platform), a super performant, professional-grade HTML5 animation engine for the modern web.

我在本文中的目的是向您全面介紹GreenSock ，也稱為GSAP(GreenSock動畫平臺)，這是一種用于現代Web的超高性能專業級HTML5動畫引擎。

This is the fourth article in the series Beyond CSS: Dynamic DOM Animation Libraries.

這是“ 超越CSS：動態DOM動畫庫 ”系列中的第四篇文章。

Here’s what I covered in the past issues:

這是我過去所討論的內容：

• 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(一個開源的，功能強大的免費動畫庫)來創建高效的Web動畫。

GSAP has too many features to fit in one article. This is why I’ve opted for a multi-part article all dedicated to various areas of the GreenSock library.

GSAP的功能太多，無法寫在一篇文章中。 這就是為什么我選擇多篇文章，專門討論GreenSock庫的各個領域的原因。

In more detail:

更詳細地：

• By the end of this first part, you’ll have learned about GreenSock’s capabilities and features, licensing model, core components, and basic syntax to tween and stagger DOM elements
  在第一部分結束時，您將了解GreenSock的功能和特性，許可模型，核心組件以及補間和交錯DOM元素的基本語法。
• In part 2, I’ll introduce GreenSock’s native timeline functionality
  在第2部分中，我將介紹GreenSock的本機時間軸功能
• Finally, part 3 will focus on some powerful bonus plugins GreenSock makes available to accomplish complex animation tasks easily with a few lines of code.
  最后，第3部分將重點介紹一些功能強大的獎金插件，GreenSock可以使用幾行代碼輕松完成復雜的動畫任務。

If you’re already a GSAP Ninja, check out Animating Bootstrap Carousels with the GSAP Animation Library, where George Martsoukos illustrates an effective use of GreenSock for UI animation.

如果您已經是GSAP忍者，請查看帶有GSAP動畫庫的 Animating Bootstrap Carousels ，其中George Martsoukos說明了GreenSock用于UI動畫的有效用法。

Without further ado, brace yourself, the journey is about to begin!

事不宜遲，請振作精神，旅程即將開始！

什么是GreenSock，它有什么用？ (What is GreenSock and What Is It Good For?)

GreenSock is the de facto industry-standard JavaScript animation platform available today.

GreenSock是當今可用的事實上的行業標準JavaScript動畫平臺。

It’s a mature JavaScript library that has its roots in Flash-based animation. This means the guys behind GreenSock know web animation inside-out, the library has been around for a long time and is not going anywhere any time soon.

這是一個成熟JavaScript庫，其根源于基于Flash的動畫。 這意味著GreenSock背后的家伙從內到外都知道網絡動畫，該庫已經存在了很長時間，并且很快就不會出現。

GSAP includes a comprehensive suite of tools, utilities, and plugins you can leverage to handle any web animation challenge you happen to face, from animating SVGs consistently across multiple browsers to coding complex animation sequences, dragging elements across the screen, splitting and scrambling text, and so much more.

GSAP包括一整套完善的工具，實用程序和插件，您可以利用它們來應對遇到的任何網絡動畫挑戰，從跨多個瀏覽器一致地對SVG動畫化到編碼復雜的動畫序列，在屏幕上拖動元素，分割和加擾文本，還有更多。

To mention just three things I particularly love about GreenSock:

僅提及我特別喜歡GreenSock的三件事：

• Although the library is mega rich in terms of features, the learning curve is relatively shallow because it uses an intuitive and consistent syntax across all its various implementations and plugins. In addition, it offers awesome documentation, tutorials, and support via the GSAP Forums. Also, the library itself is continually updated and maintained. These are all crucial factors when building a project which relies on an external library for any of its key features and user experience

  盡管該庫具有豐富的功能，但是學習曲線相對較淺，因為它在所有各種實現和插件中使用了直觀且一致的語法。 此外，它還通過GSAP論壇提供了很棒的文檔，教程和支持。 同樣，庫本身也在不斷更新和維護。 在構建依賴于外部庫的任何關鍵功能和用戶體驗的項目時，這些都是至關重要的因素

• It’s modular and light-weight, which means it won’t add bloat to your web projects
  它是模塊化且重量輕的，這意味著它不會給您的Web項目增加膨脹
• Thanks to its powerful timeline functionality, GSAP affords precise control over the timings not only of single tweens, but also of multiple tweens as part of a whole animation flow.
  憑借其強大的時間軸功能，GSAP不僅可以對單個補間的時間進行精確控制，而且可以作為整個動畫流程的一部分對多個補間的時間進行精確控制。

核心GreenSock工具 (Core GreenSock Tools)

These are GreenSock’s core modules:

這些是GreenSock的核心模塊：

• TweenLite — the foundation of GSAP, a lightweight and fast HTML5 animation library

  TweenLite — GSAP的基礎，GSAP是一個輕量且快速HTML5動畫庫

• TweenMax — TweenLite’s extension, which besides comprising TweenLite itself, includes:

  TweenMax — TweenLite的擴展，除了包括TweenLite本身之外，還包括：

  • TimelineLite
    時間軸精簡版
  • TimelineMax
    時間軸最大值
  • CSSPlugin
    CSS插件
  • AttrPlugin
    AttrPlugin
  • RoundPropsPlugin
    RoundPropsPlugin
  • DirectionalRotationPlugin
    定向旋轉插件
  • BezierPlugin
    貝塞爾插件
  • EasePack
    易包裝

  TweenMax — TweenLite’s extension, which besides comprising TweenLite itself, includes:

  TweenMax — TweenLite的擴展，除了包括TweenLite本身之外，還包括：

• TimelineLite — a lightweight timeline to take control of multiple tweens and/or other timelines

  TimelineLite —一種輕量級的時間線，可以控制多個補間和/或其他時間線

• TimelineMax — an enhanced version of TimelineLite, which offers additional, non essential capabilities like repeat, repeatDelay, yoyo, and more.

  TimelineMax — TimelineLite的增強版本，它提供了其他非必需功能，例如repeat ， repeatDelay ， yoyo等。

You can choose to include TweenLite in your project and then add other modules separately as you need them. Alternatively, you can choose to include TweenMax (the approach I’m going to take in this multi-part series), which packages all the core modules in one optimized file.

您可以選擇在項目中包括TweenLite，然后根據需要單獨添加其他模塊。 另外，您可以選擇包括TweenMax(我將在此多部分系列文章中采用的方法)，它將所有核心模塊打包在一個優化的文件中。

It’s also worth noting that GSAP offers some paid extras like the DrawSVGPlugin to create animated line drawing effects with SVGs, the powerful MorphSVGPlugin to morph one SVG shape into another (even without requiring that the two shapes have the same number of points), and others. Although you need to be a paying member of the Club GreenSock to use these plugins, GSAP makes available to you for free a special CodePen-based version so that you can try them out. This is a cool offer I’m going to take full advantage of later on in part 3 (and you with me).

值得注意的是，GSAP還提供了諸如DrawSVGPlugin等付費功能，可使用SVG創建動畫線描效果，強大的MorphSVGPlugin可將一種SVG形狀變形為另一種形狀(即使不需要兩個形狀具有相同的點數)，而其他。 盡管您需要成為Club GreenSock的付費會員才能使用這些插件，但GSAP免費為您提供了一個特殊的基于CodePen的版本，以便您可以試用它們。 這是一個很酷的提議，我將在第3部分(以及您和我一起)中充分利用。

執照 (License)

GSAP hasn’t adopted a free open-source license like MIT largely for reasons that concern keeping the product’s quality high and its maintenance financially sustainable over the long term.

GSAP并未像MIT那樣采用免費的開源許可證，主要是出于長期保持產品高質量和財務維護可持續性的原因。

GreenSock makes available two licenses:

GreenSock提供了兩個許可證 ：

• Standard License — use of the library is totally free in digital products that are free to use (even if developers get paid to build them)

  標準許可 -在免費使用的數字產品中(即使開發人員獲得了建造它們的報酬)，完全免費使用該庫。

• Business Green — this license includes three tiers with the middle tier, Shockingly Green, being the most popular. As a Shockingly Green member you’ll gain access to all the bonus plugins and extras, but without the commercial license.

  商業綠色 -此許可證包括三個層，中間層“ Shockingly Green ”是最受歡迎的。 作為令人震驚的綠色會員，您將可以使用所有額外的插件和其他功能，但無需商業許可。

Despite the non-adherence to MIT and similar free use licenses, by letting you peek into its raw code both on the project’s GitHub repo and in your downloads, GreenSock encourages you to learn from its developers’ code and their mastery of JavaScript animation, which is one of the best features of the open source philosophy.

盡管未遵守MIT和類似的免費使用許可證，但通過在項目的GitHub存儲庫和下載中讓您查看其原始代碼，GreenSock鼓勵您學習其開發人員的代碼及其對JavaScript動畫的掌握，是開源哲學的最佳功能之一。

用GreenSock補間 (Tweening with GreenSock)

A simple animation consists of some kind of change that takes place over time from point A to point B. Animators have a special name for the states in between A and B, i.e., tween.

一個簡單的動畫包含從A點到B點隨時間變化的某種變化。動畫師在A和B之間的狀態(即tween)具有特殊的名稱。

TweenLite and TweenMax are the two powerful tweening tools GreenSock puts at your disposal. As I said above, I’m going to focus on TweenMax here, but remember that the basic syntax is the same in both libraries.

TweenLite和TweenMax是GreenSock可以使用的兩個強大的補間工具。 正如我上面所說的，我將在這里重點介紹TweenMax，但是請記住，兩個庫中的基本語法都相同。

To load GSAP in your project, add this <script> tag before the closing </body> tag of your HTML document:

要在您的項目中加載GSAP，請在HTML文檔的</body>標記之前添加以下<script>標記：

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

You can find the latest version available on the CDN here: cdnjs.com.

您可以在CDN上找到可用的最新版本： cdnjs.com 。

If you use npm, type this in your terminal:

如果使用npm ，請在終端中輸入以下內容：

npm install gsap

On CodePen, you’ll find the link to GSAP TweenMax in the Quick add box inside the JavaScript Settings:

在CodePen上，您可以在JavaScript設置內的快速添加框中找到指向GSAP TweenMax的鏈接：

GreenSock的基本補間：語法 (A Basic Tween with GreenSock: the Syntax)

A simple tween with GSAP looks like this:

使用GSAP的簡單補間如下所示：

TweenMax.to('.my-element', 1, {opacity: 0});

The snippet above animates a DOM element with the class of my-element from the current default opacity value to the opacity value of 0 over the course of 1 second. In other words, at the end of a 1-second long tween, the element will no longer be visible.

上面的代碼段在1秒鐘的過程中為my-element類的DOM元素設置了動畫，從當前的默認不透明度值到0的不透明度值。 換句話說，在1秒長的補間結束時，該元素將不再可見。

Let’s go into a bit more detail.

讓我們再詳細一點。

TweenMax.to() tells the browser you’re using the to() method of the TweenMax library (the syntax for TweenLite is the same, only replace TweenMax with TweenLite). This method needs a few comma-separated arguments:

TweenMax.to()告訴瀏覽器您正在使用TweenMax庫的to()方法(TweenLite的語法是相同的，僅將TweenMax替換為TweenLite)。 此方法需要一些逗號分隔的參數：

• The element you want to animate (‘.my-element’)

  動畫你想要的元素 (“我元件”)

• The duration of the tween (in this case is 1 second)

  補間的持續時間 (在這種情況下為1秒)

• The vars object {}, that is, the properties you want to tween (in this case the opacity property). This last part goes into curly braces and takes the form of key/value pairs. The value expresses the final state of the tween. There are also other properties you can use inside the vars object {} like callback functions, delays, etc.

  vars對象{} ，即您想要補間的屬性(在本例中為opacity屬性)。 最后一部分變成花括號，并采用鍵/值對的形式。 該值表示補間的最終狀態。 您還可以在vars object {}使用其他屬性，例如回調函數，延遲等。

As its name suggests, the to() method animates tweenable properties from their default values to what you want those values to be at the end of the animation.

顧名思義， to()方法將可補間屬性從其默認值設置為動畫， to()使您希望這些值位于動畫的末尾。

GSAP offers tons of methods, but the core ones besides to() are:

GSAP提供了大量方法，但是to()之外的核心方法是：

• from() — lets you decide the starting values in your tween. Therefore the element will animate starting from the values you specify inside from() towards its default values, which are usually those you set in your CSS rules. The syntax looks like this:

  from() —使您可以確定補間中的起始值。 因此，該元素將從您在from()內部指定的值開始向其默認值(通常是您在CSS規則中設置的默認值from()進行動畫處理。 語法如下所示：

  from() — lets you decide the starting values in your tween. Therefore the element will animate starting from the values you specify inside from() towards its default values, which are usually those you set in your CSS rules. The syntax looks like this:

  from() —使您可以確定補間中的起始值。 因此，該元素將從您在from()內部指定的值開始向其默認值(通常是您在CSS規則中設置的默認值from()進行動畫處理。 語法如下所示：

  TweenMax.from('.my-element', 1, {opacity: 0});

• fromTo() — with this method, you specify the values for both the starting point and end point in your tween, which affords closer precision. The syntax is similar to the previous methods, but it includes the vars object{} both for the from (opacity: 1) and to parts (opacity: 0):

  fromTo() -使用此方法，可以在補間中指定起點和終點的值，從而提供更高的精度。 語法與以前的方法相似，但是它包括from ( opacity: 1 )和to part( opacity: 0 )的vars object {}：

  fromTo() — with this method, you specify the values for both the starting point and end point in your tween, which affords closer precision. The syntax is similar to the previous methods, but it includes the vars object{} both for the from (opacity: 1) and to parts (opacity: 0):

  fromTo() -使用此方法，可以在補間中指定起點和終點的值，從而提供更高的精度。 語法與以前的方法相似，但是它包括from ( opacity: 1 )和to part( opacity: 0 )的vars object {}：

  TweenMax.fromTo('.my-element', 1, {opacity: 1 // from state }, {opacity: 0 // to end state });

Here are all three methods in action as they are applied on the rotation and translation properties:

這是所有在旋轉和平移屬性上應用的三種方法：

See the Pen Basic GreenSock Tweens by SitePoint (@SitePoint) on CodePen.

請參閱CodePen上的SitePoint( @SitePoint )的Pen Basic GreenSock 補間 。

GSAP breaks away from the CSS syntax by using rotation instead of rotate.

GSAP通過打破從CSS語法離開rotation而不是rotate 。

Also, notice that to translate an element along the X or Y axis, GreenSock doesn’t use transform: translateX() or transform: translateY(). Rather, it uses x (as in the live demo), y, xPercent, and yPercent.

另外，請注意，要沿X軸或Y軸平移元素，GreenSock不使用transform: translateX()或transform: translateY() 。 而是使用x (如現場演示中一樣)， y ， xPercent和yPercent 。

While the x and y properties are mostly pixel-based, xPercent and yPercent use percentage values to translate elements along the X and Y axis respectively (CSSPlugin docs).

盡管x和y屬性主要基于像素， xPercent和yPercent使用百分比值分別沿X和Y軸轉換元素( CSSPlugin docs )。

Finally, keep in mind that to translate the element on the X or Y coordinates, you need to set the element’s CSS position property either to relative or absolute.

最后，請記住，要在X或Y坐標上平移元素，需要將元素CSS position屬性設置為relative或absolute 。

GSAP可以激活哪些CSS屬性？ (Which CSS Properties Does GSAP Animate?)

With GreenSock all CSS animatable properties are at your fingertips. You can animate CSS transforms, as discussed above, but also other complex properties such as box-shadow: 1px 1px 1px rgba(0,0,0,0.5) and border: 1px solid red. Just remember to use camelCase wherever the standard CSS property name uses a dash (-), e.g., backgroundColor instead of background-color.

使用GreenSock，所有CSS動畫屬性都唾手可得。 您可以為CSS轉換設置動畫，如上所述，還可以為其他復雜屬性設置動畫，例如box-shadow: 1px 1px 1px rgba(0,0,0,0.5)和border: 1px solid red 。 只要記住在標準CSS屬性名稱使用破折號(-)的任何地方都使用camelCase，例如， backgroundColor而不是background-color 。

使用GreenSock的set()方法 (Using GreenSock’s set() Method)

If you need to set some properties with specific values before animating them, you can do so either in your CSS or using GreenSock’s set() method. This last option offers the advantage of keeping all your animation-related code in one place, i.e., the JavaScript document.

如果您需要在設置特定值的動畫之前設置一些屬性，則可以在CSS中使用GreenSock的set()方法進行set() 。 最后一個選項的優點是將所有與動畫相關的代碼都放在一個位置，即JavaScript文檔。

For instance, the first example in the live demo above starts with the image set in a slightly slanted position. This initial choice is not specified in the CSS document but in the JavaScript document using GSAP’s set() method, like this:

例如，上面的實時演示中的第一個示例從圖像設置在稍微傾斜的位置開始。 最初的選擇不是在CSS文檔中指定的，而是在JavaScript文檔中使用GSAP的set()方法指定的，如下所示：

TweenMax.set(toElement, {rotation: -45});

The syntax is the same as a regular tween, but without the duration parameter. This ensures that the change takes place immediately.

語法與常規補間相同，但沒有duration參數。 這樣可以確保立即進行更改。

使用GreenSock創建補間序列 (Creating Sequences of Tweens with GreenSock)

You can create sequences of tweens with GreenSock and coordinate their interaction by adjusting each tween’s duration and delay properties.

您可以使用GreenSock創建補間序列，并通過調整每個補間的duration和delay屬性來協調它們的交互。

For instance, in the code sample below, clicking the Notify Me button triggers the following animation sequence:

例如，在下面的代碼示例中，單擊“ 通知我”按鈕將觸發以下動畫序列：

• An input box appears
  出現輸入框

• As the input box gets longer, the Notify Me button disappears

  當輸入框變長時，“ 通知我”按鈕將消失

• Finally, a smaller Send button pops into view inside the input box.

  最后，在輸入框內會彈出一個較小的“ 發送”按鈕。

Here’s the GSAP code for the sequence (the code goes inside a click handler for the button):

這是序列的GSAP代碼(該代碼位于按鈕的點擊處理程序中)：

// input box appears and gets bigger TweenMax.to(emailInput, 0.5, {autoAlpha: 1,scale: 1 });// the button being clicked disappears TweenMax.to(this, 1, {autoAlpha: 0 });// the send button appears and gets bigger TweenMax.to(sendButton, 0.5, {autoAlpha: 1,scale: 1,delay: 0.5,ease: Back.easeOut.config(3) });

In the snippet you can see two new properties — autoAlpha and ease.

在該代碼段中，您可以看到兩個新屬性autoAlpha和ease 。

You can use autoAlpha instead of opacity when you need to make sure the element not only disappears from view, but users can’t interact with it. In fact, autoAlpha adds visibility: hidden to opacity: 0.

當您需要確保該元素不僅從視圖中消失，而且用戶無法與其交互時，可以使用autoAlpha而不是opacity 。 實際上， autoAlpha增加了visibility: hidden到opacity: 0 。

The ease property lets you choose easings for your animations, which control the rate of change throughout the duration of a tween. This is a crucial ingredient for natural, realistic and smooth animations, and GreenSock offers the Ease Visualizer to give you huge control on the kind of ease that best fits your animation.

ease屬性使您可以為動畫選擇ease動，該ease動可控制補間期間的變化率。 這是自然，逼真的和平滑動畫的關鍵要素，GreenSock提供了“ 緩和可視化器”，可以讓您對最適合您的動畫的輕松程度進行大量控制。

After a few tries, I chose the Back.easeOut ease for this particular tween, but you can have a play and come up with something different.

經過幾次嘗試，我為這個特定的補間選擇了Back.easeOut緩動，但是您可以玩一下，并提出一些不同的東西。

Here’s the full demo on CodePen:

這是CodePen的完整演示：

See the Pen Sequences of Tweening with GreenSock by SitePoint (@SitePoint) on CodePen.

見筆補間與使用GreenSock的序列由SitePoint( @SitePoint上) CodePen 。

GreenSock驚人的動畫 (Staggering Animations with GreenSock)

The staggering effect consists in applying the same animation to a group of elements. However, the animation affects each element in succession, that is, one element at a time rather than all elements at once.

交錯效果在于將相同的動畫應用于一組元素。 但是，動畫會連續影響每個元素，即一次影響一個元素，而不是一次影響所有元素。

GSAP TweenMax offers the staggerTo(), staggerFrom(), and staggerFromTo() methods, which work similarly to the methods discussed above. Only the staggering effect is different, and it requires an extra argument just after the vars object {} to indicate the amount of time you want to elapse between each stagger.

GSAP TweenMax提供了staggerTo() ， staggerFrom()和staggerFromTo()方法，它們的工作方式與上述方法相似。 只有交錯效果有所不同，并且在vars對象{}之后需要一個額外的參數，以指示您希望在每個交錯之間經過的時間。

Here’s an example:

這是一個例子：

TweenMax.staggerFrom(alice, 0.5 {rotation: 0,delay: 1.5,ease: Power4.easeIn }, 0.5);

In the snippet above, each instance of Alice will rotate from 0 degrees to the values I have set in my CSS with half a second between each rotation:

在上面的代碼段中，每個Alice實例將從0度旋轉到我在CSS中設置的值，每次旋轉之間相隔半秒：

And here’s the demo using the full code:

這是使用完整代碼的演示：

See the Pen Simple GSAP stagger method by SitePoint (@SitePoint) on CodePen.

請參閱CodePen上SitePoint ( @SitePoint )的Pen Simple GSAP交錯方法 。

控制您的GSAP補間 (Taking Control of Your GSAP Tweens)

GreenSock has a few methods up its sleeve to let you take full control of your tweens.

GreenSock有幾種方法可以讓您完全控制補間。

The ones I’m going to consider here are:

我要在這里考慮的是：

• play() — plays the animation from wherever the playhead is or from a specific time:

  play() —從播放頭所在的位置或從特定時間播放動畫：

  play() — plays the animation from wherever the playhead is or from a specific time:

  play() —從播放頭所在的位置或從特定時間播放動畫：

  // plays from the playhead's current location myAnimation.play();// starts playing from 2 seconds into myAnimation // (all events and callbacks before then don't get fired) myAnimation.play(2);// starts playing from 2 seconds into myAnimation but // doesn't suppress events or callbacks in the initial // part of myAnimation (earlier than 2 seconds) myAnimation.play(2, false);

• pause() — pauses your tween, either completely or starting from a specific point:

  pause() —完全或從特定點開始暫停補間：

  pause() — pauses your tween, either completely or starting from a specific point:

  pause() —完全或從特定點開始暫停補間：

  // pauses myAnimation in all its entirety myAnimation.pause();// jumps 2 seconds into myAnimation and then pauses myAnimation.pause(2);// jumps 2 seconds into myAnimation then pauses but // doesn't suppress events/callbacks during the // initial phase of the tween (earlier than 2 seconds) myAnimation.pause(2, false);

• reverse() — moves your tween backwards to the initial frame, but you can choose to set a specific time to start from before reversing

  reverse() —將補間向后移動到初始幀，但是您可以選擇設置一個特定的開始時間，然后反轉

  reverse() — moves your tween backwards to the initial frame, but you can choose to set a specific time to start from before reversing

  reverse() —將補間向后移動到初始幀，但是您可以選擇設置一個特定的開始時間，然后反轉

  // moves backwards from wherever the playhead currently ismyAnimation.reverse();// moves backwards from exactly 2 seconds into myAnimation myAnimation.reverse(2);// moves backwards from exactly 2 seconds into myAnimation // but doesn't suppress events/callbacks before then myAnimation.reverse(2, false);

• restart() — restarts your tween and plays it from the beginning:

  restart() —重新啟動補間并從頭開始播放：

  restart() — restarts your tween and plays it from the beginning:

  restart() —重新啟動補間并從頭開始播放：

  // restarts myAnimation, bypassing any predefined delay myAnimation.restart();// restarts myAnimation, including any predefined delay, // and doesn't suppress events/callbacks during // the initial move back to time:0 myAnimation.restart(true, false);

• resume() — resumes playing, either forwards or backwards depending on the current direction of the animation. You can also set the animation to jump to a specific time before resuming it:

  resume() —根據動畫的當前方向向前或向后繼續播放。 您還可以將動畫設置為在恢復之前跳到特定時間：

  resume() — resumes playing, either forwards or backwards depending on the current direction of the animation. You can also set the animation to jump to a specific time before resuming it:

  resume() —根據動畫的當前方向向前或向后繼續播放。 您還可以將動畫設置為在恢復之前跳到特定時間：

  // resumes myAnimation from the playhead's current position myAnimation.resume();// jumps to exactly 2 seconds into myAnimation // and then resumes playback: myAnimation.resume(2);// jumps to exactly 2 seconds into myAnimation // and resumes playback but doesn't suppress // events/callbacks during the initial move: myAnimation.resume(2, false);

See the Pen Controlling GSAP Tweens by SitePoint (@SitePoint) on CodePen.

見筆控制GSAP吐溫由SitePoint( @SitePoint上) CodePen 。

It’s impossible to list all methods GSAP’s TweenLite and TweenMax make available to you. Therefore, I encourage you to check out the docs — they’re super friendly.

不可能列出GSAP的TweenLite和TweenMax提供給您的所有方法。 因此，我建議您檢查一下文檔-它們非常友好。

TweenMax yoyo，repeat和repeatDelay (TweenMax yoyo, repeat, and repeatDelay)

I’d like to close this first article dedicated to GreenSock with three useful features you can use in your TweenMax-powered animations:

我想在第一篇專門針對GreenSock的文章中閉幕，您可以在TweenMax驅動的動畫中使用三個有用的功能：

• repeat — use this if you want your tween to play a set number of times or indefinitely. In this last case, set repeat to the value of -1:

  repeat -如果您希望補間播放設定次數或無限次播放，請使用此功能。 在這最后一種情況下，將repeat設置為-1的值：

  repeat — use this if you want your tween to play a set number of times or indefinitely. In this last case, set repeat to the value of -1:

  repeat -如果您希望補間播放設定次數或無限次播放，請使用此功能。 在這最后一種情況下，將repeat設置為-1的值：

  // the tween repeats 3 times on top of the default // time (4 times overall): TweenMax.to(element, 1, { opacity: 0,repeat: 3 });

• repeatDelay — you can use this property to set a specific delay between each of your animation’s repetitions:

  repeatDelay —您可以使用此屬性來設置每個動畫重復之間的特定延遲：

  repeatDelay — you can use this property to set a specific delay between each of your animation’s repetitions:

  repeatDelay —您可以使用此屬性來設置每個動畫重復之間的特定延遲：

  // the tween repeats 3 times on top of the default // time (4 times overall) with one a second delay // between each repetition: TweenMax.to(element, 1, { opacity: 0,repeat: 3,repeatDelay: 1 });

• yoyo — is very handy when you want your animation to go back and forth a set number of times, or indefinitely. Use it in conjunction with repeat to create movements that alternate between two states:

  yoyo當您希望動畫來回移動一定次數或無限次來回時非常方便。 結合repeat可創建在兩種狀態之間交替的移動：

  yoyo — is very handy when you want your animation to go back and forth a set number of times, or indefinitely. Use it in conjunction with repeat to create movements that alternate between two states:

  yoyo當您希望動畫來回移動一定次數或無限次來回時非常方便。 結合repeat可創建在兩種狀態之間交替的移動：

  // the tween repeats indefinitely with one second's delay // between each repetition. The element alternates // between being fully opaque and fully transparent: TweenMax.to(element, 1, { opacity: 0,repeat: -1,repeatDelay: 1 });

See the Pen Yoyo, repeat, and repeatDelay in GSAP TweenMax by SitePoint (@SitePoint) on CodePen.

請參見CodePen上的SitePoint ( @SitePoint ) 在GSAP TweenMax中進行Pen Yoyo，repeat和repeatDelay 。

結論 (Conclusion)

In this first part dedicated to the GreenSock library, I’ve discussed what GreenSock excels at, its capabilities, core components, and licensing model.

在致力于GreenSock庫的第一部分中，我討論了GreenSock擅長的方面，其功能，核心組件和許可模型。

I’ve also introduced you to GSAP’s basic syntax for tweening DOM elements with TweenMax using a number of live demos.

我還向您介紹了GSAP的基本語法，該語法用于使用許多現場演示來使用TweenMax補間DOM元素。

However, although you can create some cool animations just sequencing GSAP tweens, there are a couple of shortcomings to this approach:

但是，盡管您可以僅對GSAP補間進行排序就可以創建一些很酷的動畫，但是這種方法有兩個缺點：

• If you change a tween’s duration or delay in a sequence of tweens, it’s likely most of the overall animation will be messed up and in need of further adjustments

  如果您更改補間的duration或一系列補間的delay ，則整個動畫的大部分可能會被弄亂，需要進一步調整

• A sequence of tweens is made up of independent tweens, therefore you can’t pause, resume, reverse, etc. the entire sequence as a whole.
  補間序列由獨立的補間組成，因此您不能暫停，恢復，反向等整個序列。

To give you extra control, GSAP offers robust and flexible timeline functionality, which I discuss in the second instalment dedicated to this awesome library.

為了給您額外的控制權，GSAP提供了強大而靈活的時間軸功能 ，我將在第二部分中專門討論這個出色的庫。

Have you used GreenSock in your web animation work? I’d love to see what you’ve created with it.

您在網絡動畫工作中使用過GreenSock嗎？ 我很想看看您用它創造了什么。

If you’re curious about JavaScript-based animation and performance, the JS with Performance: requestAnimationFrame screencast is available to all SitePoint Premium members.

如果您對基于JavaScript的動畫和性能感到好奇，則具有Performance：requestAnimationFrame的JS截屏視頻可用于所有SitePoint Premium成員。

Ready for more GreenSock power? Then, head over to Part 2 and learn all about using GSAP Timeline.

準備更多的GreenSock功能嗎？ 然后，轉到第2部分 ，了解有關使用GSAP時間軸的所有信息。

翻譯自: https://www.sitepoint.com/web-animation-tutorial-part-1/

greensock下載

總結

以上是生活随笔為你收集整理的greensock下载_GreenSock面向初学者：Web动画教程（第1部分）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。