as3 greensock_GreenSock 3 Web动画：了解GSAP的新功能

皇甫夕

2023-12-01

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

简单动画 (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 element
 300 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/