as3 greensock

On November 1st 2019, GreenSock Animation Platform (GSAP) released version 3, which is its most significant upgrade to date.

在2019年11月1日， GreenSock動畫平臺(GSAP)發布了版本3，這是迄今為止最重要的升級。

GSAP is a powerful, backward-compatible, performant, and mature JavaScript animation library that allows you to animate pretty much anything on the web — such as DOM elements, JS objects, SVGs, CSS properties, etc. We’ve covered GSAP before, for example in our beginner’s series and plugin guide, and we’re big fans.

GSAP是一個功能強大，向后兼容，性能良好且成熟JavaScript動畫庫，可讓您為網絡上的幾乎所有內容設置動畫，例如DOM元素，JS對象，SVG，CSS屬性等。我們之前已經介紹過GSAP，例如在我們的初學者系列和插件指南中 ，我們是忠實擁護者。

Its intuitive syntax empowers developers with the ability to create some mind blowing animation effects in a relatively short amount of time and with the minimum amount of code.

其直觀的語法使開發人員能夠在相對較短的時間內，用最少的代碼創建令人震撼的動畫效果。

In this article, I’m going to highlight some great new features of GreenSock 3 and get you started on how to use them to get things moving on web in no time.

在本文中，我將重點介紹GreenSock 3的一些重要新功能，并讓您開始了解如何使用它們來使事情立即在網絡上運行。

GreenSock 3的新增功能 (What’s New in GreenSock 3)

功能更多，文件更小 (More Features and Smaller File Sizes)

GreenSock has been rebuilt from the ground up using ES6 modules. It’s still feature-packed, with more than 50 new library features, but it’s only half the size!

GreenSock已使用ES6模塊從頭開始重建。 它仍然是功能豐富的，具有50多種新的庫功能，但只有一半大小！

快速編碼的簡明語法 (Condensed Syntax for Fast Coding)

If you’ve ever used GSAP before, you’re already familiar with its intuitive, beginner-friendly syntax. The new API is even more simplified and quick to learn and use.

如果您曾經使用過GSAP，那么您已經熟悉其直觀，對初學者友好的語法。 新的API更加簡化，并且易于學習和使用。

For example, now you don’t need to decide whether you want to use TweenLite or TweenMax, TimelineLite or TimelineMax. There’s just one object, the gsap object:

例如，現在您無需決定是否要使用TweenLite或TweenMax，TimelineLite或TimelineMax。 只有一個對象，即gsap對象：

// tween gsap.to(selector, {})// timeline const tl = gsap.timeline()

Also, duration is no longer a parameter of the to(), from(), or fromTo() methods, but it’s set inside the vars object. In particular, the old

而且， duration不再是to() ， from()或fromTo()方法的參數，而是在vars對象內部設置的。 特別是老

TweenMax.to(selector, 1, {})

becomes

變成

gsap.to(selector, {duration: 1 })

Much more readable and also flexible. In fact, you can now set the duration using a function, for example.

更具可讀性和靈活性。 實際上，您現在可以使用例如功能來設置duration 。

Another plus of this new, simplified API is that staggering animations are a breeze to code. No need to use the old staggerTo(), staggerFrom(), and staggerFromTo() methods because you can add staggers directly into the vars object of regular tweens:

這種新的簡化API的另一個優點是，交錯的動畫易于編寫代碼。 無需使用舊的staggerTo() ， staggerFrom()和staggerFromTo()方法，因為您可以將staggers直接添加到常規補間的vars對象中：

gsap.to(selector, {x: 50,duration: 1,stagger: 0.5 })

For more flexibility, you can use a stagger object like this:

為了獲得更大的靈活性，可以使用以下交錯對象：

gsap.to(selector, {x: 50,duration: 1,stagger: {amount: 2,from: 'center'} })

Finally, GSAP’s eases have always been awesome, but a bit verbose. Not now. GreenSock 3 comes with a more concise and readable syntax for setting eases. For example, instead of:

最后，GSAP的便利性一直很棒，但是有點冗長。 現在不要。 GreenSock 3帶有更簡潔易讀的語法，可簡化設置過程。 例如，代替：

Elastic.easeOut Elastic.easeIn Elastic.easeInOut

you simply write:

您只需寫：

'elastic' // same as 'elastic.out' 'elastic.in' 'elastic.inOut'

Another simplification consists in the possibility of replacing labels with the < symbol to indicate the most recently added animation’s start time and the > symbol to indicate the most recently added animation’s end time. Below is an example of how you could use labels in a timeline:

另一個簡化方式是可以用<符號代替標簽來表示最近添加的動畫的開始時間，而用>符號代替標簽來表示最近添加的動畫的結束時間。 以下是如何在時間軸中使用標簽的示例：

gsap.timeline().add('start')// this tween starts at the beginning of the// entire animation.to(selector, {}, 'start')// this tween starts 0.5 seconds after// the previous tween.to(selector, {}, 'start+=0.5')

You can now rewrite the code above as follows:

現在，您可以按以下方式重寫上面的代碼：

gsap.timeline().to(selector, {}, '<').to(selector, {}, '<0.5')

時間軸的可繼承默認值 (Inheritable Default Values for the Timeline)

If the values for some of the settings in your timeline remain the same throughout the child tweens, gone are the days of having to write those values over and over again. GreenSock 3 lets you set those properties once in the parent timeline and they will be inherited by the child tweens.

如果您的時間軸中某些設置的值在整個子補間中都保持不變，那么那些不得不一遍又一遍地寫入這些值的日子就不復存在了。 GreenSock 3允許您在父時間軸中設置一次這些屬性，它們將被子補間繼承。

For example, instead of writing:

例如，代替編寫：

const tl = new TimelineMax() tl.to(selector, 2, {ease: Power2.easeInOut,rotation: -180 }).to(selector, 2, {ease: Power2.easeInOut,rotation: -360 })

Now, you can simply write:

現在，您可以簡單地編寫：

const tl = gsap.timeline({defaults: {duration: 2,ease: 'power2.inOut' }} )tl.to(selector, {rotation: -180 }) .to(selector, {rotation: -360 })

關鍵幀 (Keyframes)

Your GreenSock 3 code gets even more concise and readable with keyframes. Keyframes, a concept that is quite familiar to CSS developers, are great in those cases when you want to animate the same element in different ways. Instead of creating a separate tween for each stage of the animation, you can now pass an array of keyframes to the {} vars object and all the steps of the animation will be perfectly sequenced inside the same tween. Here’s an example of how this works:

您的GreenSock 3代碼通過關鍵幀變得更加簡潔和可讀。 關鍵幀是CSS開發人員非常熟悉的概念，在您希望以不同方式為同一個元素設置動畫的情況下，它們非常有用。 現在，您無需為動畫的每個階段創建單獨的補間，而是可以將關鍵{} vars組傳遞給{} vars對象，并且動畫的所有步驟將在同一補間內完美排序。 這是一個如何工作的示例：

gsap.to(selector, {keyframes: {{x: 250, duration: 1},{y: 100, duration: 1, delay: 0.5} }})

更多實用程序功能 (More Utility Functions)

This latest release of the GreenSock library comes packed with a bunch of new utility methods like snap(), which lets you snap a value to an increment or to the closest value in an array, and random(), which makes it a breeze to generate a random number based on parameters or randomly select an element in an array, and tons more.

GreenSock庫的最新版本附帶了許多新的實用程序方法，例如snap() ，它使您可以將值捕捉到數組中的增量或最接近的值，以及random() ，可以輕松地將其捕捉到根據參數生成隨機數或隨機選擇數組中的元素，甚至更多。

簡單動畫 (Simple Animations)

Here’s an example of using the three basic GSAP methods: to(), from(), and fromTo():

這是使用三種基本GSAP方法的示例： to() ， from()和fromTo() ：

See the Pen GSAP3-to-from-fromTo-examples by SitePoint (@SitePoint) on CodePen.

參見筆GSAP3到從-的FromTo-例子由SitePoint( @SitePoint上) CodePen 。

GSAP簡化了逼真的動畫 (GSAP Eases for Life-like Animations)

Eases are foundational components of animation. They embody the timing of tweens and thereby add interest and naturalness to the motion you create on screen.

輕松是動畫的基本組成部分。 它們體現了補間的時間安排，從而為您在屏幕上創建的動作增添了趣味和自然感。

GSAP lets you add tons of eases by means of the GreenSock Ease Equalizer, a handy tool that offers a visual representation of GSAP easing options as you select and tweak the best fit for the particular effect you’re after.

GSAP可讓您借助GreenSock緩和均衡器來增加許多輕松度 ，這是一種便捷的工具，可以在您選擇并調整最適合所需特效的情況下直觀地呈現GSAP緩動選項。

Let’s try some eases for our musical bird:

讓我們為音樂鳥嘗試一些輕松的事情：

See the Pen GSAP3-eases-example by SitePoint (@SitePoint) on CodePen.

見鋼筆GSAP3-EASES-例如通過SitePoint( @SitePoint上) CodePen 。

GSAP關鍵幀動畫的示例 (An Example of Keyframe Animation with GSAP)

As I pointed out above, GreenSock 3 gives you the option of implementing a number of tweens on the same element in a more efficient and readable way using keyframes.

正如我在上面指出的那樣，GreenSock 3使您可以選擇使用關鍵幀以更有效和可讀的方式在同一元素上實現多個補間。

Here’s an example:

這是一個例子：

See the Pen GSAP3-keyframes-example by SitePoint (@SitePoint) on CodePen.

見鋼筆GSAP3關鍵幀-例如通過SitePoint( @SitePoint上) CodePen 。

Using GSAP keyframes on the SVG bird element lets me apply a number of tweens without having to write each tween separately. The advantage is that I don’t need to repeat some of the code — for example, the selector code ('.bird') or any of the settings that remain the same throughout the animation.

在SVG鳥元素上使用GSAP關鍵幀，使我可以應用多個補間，而不必分別編寫每個補間。 優點是我不需要重復某些代碼-例如，選擇器代碼( '.bird' )或在整個動畫中保持不變的任何設置。

使用GSAP時間軸控制復雜的動畫 (Taking Control of Complex Animations with the GSAP Timeline)

GreenSock tweens are powerful and you can do a lot with them. However, to make sure one tween moves after the other, you’ll need to set the delay property of the second tween by an amount that takes into account the duration of the first tween. However, doing so could make your animation code hard to maintain, especially in more complex animations. What if you need to add more tweens or change the duration property in one of the delays in one of the tweens? Then you’ll have to modify the values of all or most of the delay property on the other tweens. Not practical at all.

GreenSock補間非常強大，您可以使用它們做很多事情。 但是，要確保一個補間在另一個補間之間移動，您需要將第二個補間的delay屬性設置為一個數量，該數量應考慮到第一個補間的持續時間。 但是，這樣做可能會使您的動畫代碼難以維護，尤其是在更復雜的動畫中。 如果您需要添加更多補間或在其中一個補間中的延遲之一中更改duration屬性，該怎么辦？ 然后，您必須修改其他補間上所有或大多數delay屬性的值。 根本不實用。

An easier, more stable and maintainable approach would be to use the GSAP timeline. With a timeline, all the tweens inside it are executed by default one after the other, with no need to use delays.

一個簡單，穩定和可維護的方法是使用GSAP時間軸 。 對于時間軸，默認情況下將依次執行其中的所有補間，而無需使用延遲。

Again, if you observe how natural motion of different parts occurs, you’ll soon realize how those parts don’t all move in mechanical succession with relation to each other. Most likely, some parts start moving while some others are already in motion. Or, some parts stop a bit before or a bit after some other parts do. The GSAP timeline makes available a few handy options to let you fine tune the start and end of tweens in relation to each other. Here they are:

同樣，如果您觀察到不同零件的自然運動是如何發生的，那么您很快就會意識到這些零件不會如何彼此機械地連續運動。 最有可能的是，某些零件開始運動，而另一些零件已經運動。 或者，某些部分在其他部分停止之前或之后停止。 GSAP時間軸提供了一些方便的選項，使您可以微調補間的開始和結束之間的關系。 他們來了：

• Absolute time, like a number. For example, 2 means that the next tween animates two seconds after the start of the timeline.

  絕對的時間，就像一個數字。 例如， 2表示下一個補間動畫在時間線開始后的兩秒鐘進行動畫處理。

• Relative time with respect to the end of the entire timeline: '+=2' or '-=2'. This means that the tween animates two seconds after the end of the timeline or overlaps the end of the timeline by two seconds respectively.

  相對于整個時間軸末尾的相對時間： '+=2'或'-=2' 。 這意味著補間動畫會在時間線結束后兩秒進行動畫處理，或者分別與時間線結束處重疊兩秒。

• Label: 'myLabel'. The tween animates at the point of insertion of a specific label. If you haven’t created that label, GSAP adds it to the end of the timeline.

  標簽： 'myLabel' 。 補間動畫在插入特定標簽的位置進行動畫處理。 如果您尚未創建該標簽，則GSAP會將其添加到時間軸的末尾。

• Relative to a label: 'myLabel+=2' or 'myLabel-=2'. The tween animates two seconds after or two seconds before the end of the 'myLabel' label respectively.

  相對于標簽： 'myLabel+=2'或'myLabel-=2' 。 補間動畫分別在'myLabel'標簽的結尾之后兩秒鐘或之前兩秒鐘進行動畫處理。

• At the start of the most recently added animation (new to GSAP 3): '<'.

  在最近添加的動畫(GSAP 3的新功能)的開始處： '<' 。

• At the end of the most recently added animation (new to GSAP 3): '>'.

  在最新添加的動畫(GSAP 3的新功能) 的末尾 ： '>' 。

• Relative to the start of the most recently added animation (new to GSAP 3): '<2' or '<-2'. The tween animates two seconds after the start of the most recently added animation or two seconds before the start of the most recently added animation respectively.

  相對于最近添加的動畫(GSAP 3中的新動畫)的開始： '<2'或'<-2' 。 補間動畫分別在最近添加的動畫開始后兩秒或最近添加的動畫開始前兩秒進行動畫處理。

• Relative to the end of the most recently added animation (new to GSAP 3): '>2' or '>-2'. The tween animates two seconds after the end of the most recently added animation or two seconds before the end of the most recently added animation respectively.

  相對于最近添加的動畫(GSAP 3中的新動畫) 的結尾 ： '>2'或'>-2' 。 補間動畫分別在最近添加的動畫結束后兩秒或最近添加的動畫結束前兩秒進行動畫處理。

One final advantage of using a timeline is nesting. You can build timelines that focus on specific parts of the animation and nest them inside a master timeline. This technique is really helpful when you need to coordinate the various parts of the animation into a harmonious and well-timed whole. It’s also a way of making your code more readable and maintainable.

使用時間軸的最后一個優勢是嵌套 。 您可以構建專注于動畫特定部分的時間軸，并將其嵌套在主時間軸中。 當您需要將動畫的各個部分協調成一個和諧且適時的整體時，此技術非常有用。 這也是使代碼更具可讀性和可維護性的一種方式。

Have a look at the demo below for an example of how you would go about using nested timelines:

請看下面的演示，以獲取有關如何使用嵌套時間軸的示例：

See the Pen GSAP3-timeline-example by SitePoint (@SitePoint) on CodePen.

見鋼筆GSAP3-時間軸的例子由SitePoint( @SitePoint上) CodePen 。

To fine tune your animation, slowing it down while developing can be useful. To do so, use:

要微調動畫，在開發時將其放慢會很有用。 為此，請使用：

master.timeScale(0.2)

Now it’s much easier to take control of the relative timings and other small details. Don’t forget to remove this line of code on production, though!

現在，控制相對時間和其他小細節要容易得多。 不過，不要忘記在生產中刪除此行代碼！

MotionPath插件 (The MotionPath Plugin)

GSAP makes available a bunch of amazing plugins that allow you to create some complicated and fun effects in a few lines of intuitive code.

GSAP提供了許多驚人的插件，使您可以用幾行直觀的代碼創建一些復雜而有趣的效果。

One of the coolest types of animation you can achieve is to represent an object as it smoothly moves along a path. Not easy to achieve, at least without GSAP.

可以實現的最酷的動畫類型之一是在對象沿著路徑平滑移動時對其進行表示。 至少沒有GSAP很難實現。

The new MotionPath plugin makes it quick and straightforward to make any element move along an SVG path. The simplest implementation of the plugin looks like this:

新的MotionPath插件可以快速，直接地使任何元素沿SVG路徑移動。 插件的最簡單實現如下所示：

// register the plugin (just once) gsap.registerPlugin(MotionPathPlugin)gsap.to('.bird', {x: 20,y: 50,motionPath: '#path'} )

As long as you have an SVG path with the id of path, you’re good to go. You can also enter the path values directly instead of the id and it’ll work.

只要你有一個對SVG路徑id的路徑 ，你是好去。 您也可以直接輸入路徑值而不是id ，這樣就可以了。

You can fine tune the effect by using different properties that you can set inside a motionPath object, as you can see in the demo below:

您可以使用可以在motionPath對象中設置的不同屬性來微調效果，如下面的演示所示：

See the Pen GSAP3-motion-path-example by SitePoint (@SitePoint) on CodePen.

請參閱CodePen上SitePoint ( @SitePoint )的Pen GSAP3-motion-path-example示例 。

To find out more about the awesome features that this plugin puts at your fingertips, head over to the docs.

要了解有關此插件提供的強大功能的更多信息，請轉到docs 。

ScrollTrigger插件 (ScrollTrigger plugin)

ScrollTrigger is the latest plugin GreenSock has launched and it’s got some amazing capabilities that let you take full control of scrolling animations efficiently and intuitively. For example:

ScrollTrigger是GreenSock推出的最新插件，它具有一些驚人的功能，可讓您高效，直觀地完全控制滾動動畫。 例如：

• you can animate pretty much anything on scroll with this plugin — such as DOM elements, CSS, SVG, WebGL, Canvas
  您可以使用此插件在滾動狀態下進行幾乎所有動畫處理，例如DOM元素，CSS，SVG，WebGL，Canvas
• you can easily scrub through animations
  您可以輕松瀏覽動畫
• you can pin elements in place
  您可以將元素固定到位
• you can create directionally smart animations
  您可以創建定向智能動畫

And adjustments to screen resizing and great performance are taken care of.

并調整屏幕大小和出色的性能。

After importing the plugin into your project, which you can conveniently do via the CDN on the GSAP website, and registering it so that it seamlessly integrates with the core library, the simplest way to start using it is as follows:

將插件導入您的項目后，您可以通過GSAP網站上的CDN方便地進行該插件的注冊，并使其與核心庫無縫集成，開始使用該插件的最簡單方法如下：

// register ScrollTrigger gsap.registerPlugin(ScrollTrigger)/* implement the plugin to animate an element300 px to the right when the element is in view */ gsap.to(element, {x: 300,duration: 2,scrollTrigger: element })

When the element indicated in the scrollTrigger property is inside the viewport, the animation takes place.

當scrollTrigger屬性中指示的元素位于視口內時，將進行動畫處理。

To implement the myriad of settings this plugin makes available, just use a scrollTrigger object literal. For example:

要實現此插件提供的多種設置，只需使用scrollTrigger對象文字即可。 例如：

See the Pen GSAP3-ScrollTriggerExample by SitePoint (@SitePoint) on CodePen.

請參閱CodePen上的SitePoint( @SitePoint )的Pen GSAP3- ScrollTriggerExample 。

The scrollTrigger object in the above demo includes the trigger, which is the element you want to animate as it appears in the viewport.

上面的演示中的scrollTrigger對象包含trigger ，這是您要在視口中顯示時要進行動畫處理的元素。

It also includes the start property, that you can use to instruct the plugin about the position the element needs to be at during scrolling for the animation to begin. In the case at hand, the element will begin moving as soon as its top part hits the center of the viewport.

它還包括start屬性，您可以使用該屬性來指示插件有關在滾動動畫開始時元素需要位于的位置。 在當前情況下，元素將在其頂部到達視口中心時立即開始移動。

You can specify what you want your trigger element to do as users scroll past it or as they scroll back to its position by setting the toggleActions property of the scrollTrigger object. GSAP makes available different options for maximum control, which you can set as the following events fire: onEnter, onLeave, onEnterBack, and onLeaveBack. By default, these options are set as follows: 'play none none none'. In the above demo, I adjusted my animation so that the image is revealed each time it’s in the desired position in the viewport and it’s obscured when it’s no longer in view, by using the following line of code: toggleActions: 'play reverse restart reverse'.

您可以通過設置scrollTrigger對象的toggleActions屬性來指定觸發元素在用戶滾動過去或回滾到其位置時要執行的scrollTrigger 。 GSAP提供了用于最大控制的不同選項，您可以將其設置為觸發以下事件： onEnter ， onLeave ， onEnterBack和onLeaveBack 。 默認情況下，這些選項設置如下： 'play none none none' 。 在上面的演示中，我調整了動畫，以使圖像每次在視口中的所需位置時都顯示出來，并且當不再處于視口中時，使用以下代碼toggleActions: 'play reverse restart reverse' 。

To find out more about this powerful plugin, check out these resources:

要了解有關此強大插件的更多信息，請查看以下資源：

• ScrollTrigger docs on the GSAP website

  GSAP網站上的ScrollTrigger文檔

• the Get Started video by Carl Schooff, the GSAP wizard behind the Creative Coding Club, which includes ScrollTrigger Express, a free course on GSAP 3 for beginners

  Carl Schooff的“入門視頻” ，Creative Coding Club背后的GSAP向導，其中包括ScrollTrigger Express ，這是針對初學者的免費GSAP 3課程

• The introductory video tutorial by Gary Simon of DesignCourse

  DesignCourse 的Gary Simon的入門視頻教程

結論 (Conclusion)

This quick introduction has just scratched the surface of what you can do with GreenSock. If you’re curious, start diving into its accessible and thorough documentation.

本快速介紹僅介紹了GreenSock的功能。 如果您感到好奇，請開始閱讀其易于訪問且詳盡的文檔 。

Now it’s over to you. Grab the latest release of GreenSock 3 and get stuff moving on the Web!

現在結束了。 獲取最新版本的GreenSock 3，并在網絡上移動東西！

翻譯自: https://www.sitepoint.com/greensock-3-animation-features/

as3 greensock

總結

以上是生活随笔為你收集整理的as3 greensock_GreenSock 3 Web动画：了解GSAP的新功能的全部內容，希望文章能夠幫你解決所遇到的問題。

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