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时间轴最大值
  • CSSPluginCSS插件
  • AttrPluginAttrPlugin
  • RoundPropsPluginRoundPropsPlugin
  • 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的完整演示：

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:

这是使用完整代码的演示：

控制您的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 is
  myAnimation.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);

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

结论 (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下载