greensock下载_GreenSock动画平台初学者指南

greensock下载

by Nicholas Kramer

尼古拉斯·克拉默(Nicholas Kramer)

GreenSock动画平台初学者指南 (The Beginner’s Guide to the GreenSock Animation Platform)

在不了解JavaScript的情况下创建基于时间轴的动画的入门 (A primer to creating timeline based animations without knowing JavaScript)

介绍 (Introduction)

The GreenSock Animation Platform (GSAP for short) is a powerful JavaScript library that enables front-end developers and designers to create robust timeline based animations. This allows for precise control for more involved animation sequences rather than the sometimes constraining keyframe and animation properties that CSS offers.

GreenSock动画平台(简称GSAP )是一个功能强大JavaScript库，使前端开发人员和设计人员可以创建基于时间轴的强大动画。 这允许对更多涉及的动画序列进行精确控制，而不是CSS有时提供的约束keyframe和animation属性。

The best part about this library is that it’s lightweight and easy to use.

关于这个库最好的部分是它轻巧且易于使用。

With GSAP, you can start creating engaging animations with little to no knowledge of JavaScript.

使用GSAP，您几乎不需要JavaScript就可以开始制作引人入胜的动画。

This guide will show how to set up and use GSAP’s TweenMax feature and also dive into a bit of Club GreenSock’s DrawSVG plugin. Each of the examples below has a corresponding CodePen link so you can follow along in another tab.

本指南将说明如何设置和使用GSAP的TweenMax功能，并深入介绍Club GreenSock的DrawSVG插件。 下面的每个示例都有一个对应的CodePen链接，因此您可以在另一个选项卡中进行操作。

入门 (Getting Started)

Before coding, we first need to add the GSAP library to our HTML file. To do this, you will need to grab the CDN link to the TweenMax library. You can find links to TweenMax and other GSAP CDNs here.

在编码之前，我们首先需要将GSAP库添加到我们HTML文件中。 为此，您将需要获取到TweenMax库的CDN链接。 您可以在此处找到指向TweenMax和其他GSAP CDN的链接。

Note: CDN stands for Content Delivery Network. This means that instead of hosting the JavaScript files on your site, an outside source like CloudFlare can host them for you.

注意 ：CDN代表内容交付网络。 这意味着，像CloudFlare这样的外部资源可以为您托管它们，而不是在您的站点上托管JavaScript文件。

Once you have the CDN link, insert it in a <script> tag at the bottom of your HTML file like so:

获得CDN链接后，将其插入HTML文件底部的<scri pt>标记中，如下所示：

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

That’s all you need to get started! If you’re using an online development environment like CodePen, you can install GSAP by editing the Pen Settings.

这就是您入门所需的一切！ 如果您使用的是CodePen之类的在线开发环境，则可以通过编辑笔设置来安装GSAP。

了解补间 (Understanding Tweens)

Tweens are the basic animation functions from within GSAP. To animate any HTML object, we must call the object, define the properties that we are going to animate, the duration of the animation, the animation’s easing, and any other parameters like delay timing.

补间是GSAP中基本的动画功能。 要设置任何HTML对象的动画，我们必须调用该对象，定义要设置动画的属性，动画的持续时间，动画的缓动以及其他任何参数，例如延迟时间。

For example, if we were to change a red rectangle’s color to black while also moving it down and to the right, the Tween would look like this in JavaScript:

例如，如果我们要将红色矩形的颜色更改为黑色，同时又将其上下移动，则Tween在JavaScript中将如下所示：

TweenLite.to(“#rectangle”, 2, {  left:100,   top: 75,   backgroundColor:"#000000",   ease: Power4.easeIn});

Let’s break this down:

让我们分解一下：

TweenLite lets our JavaScript file know that we want to animate using GSAP. The .to method immediately after signifies that we want our object to animate from its original static state defined by our HTML and CSS to the final animated state defined by our JavaScript.

TweenLite 让我们JavaScript文件知道我们要使用GSAP进行动画处理 。 之后的.to方法表示我们希望对象从HTML和CSS定义的原始静态动画到JavaScript定义的最终动画状态。

You can use the .from method instead to reverse this. We’ll cover this a little later on in this article.

您可以改用.from方法来反向执行此操作。 我们将在本文的稍后部分介绍。

Next, we define the object that we want to animate. In our case, it’s an HTML object with the ID of rectangle. This looks like “#rectangle”, in our code. We must make sure that we have our object wrapped in quotes and that we use the # to denote that we’re calling an ID. Any ID could go here as long as it’s an element defined in your HTML. Also, note that the comma following the end quote is important as well. Without it, the animation will not run.

接下来，我们定义要设置动画的对象。 在我们的例子中，它是一个ID为矩形HTML对象。 在我们的代码中“#rectangle”,它看起来像“#rectangle”, 。 我们必须确保将对象括在引号中，并使用#表示正在调用ID。 只要它是HTML中定义的元素，任何ID都可以在此处使用。 另外，请注意，引号后面的逗号也很重要。 没有它，动画将无法运行。

The 2, after the element’s ID defines the duration of the animation in seconds. So in this instance, we’re defining the animation’s duration as 2 seconds long. If we wanted it to be a half-second long, we would change the value to 0.5, instead.

在 2, 该元素的ID之后 定义了以秒的动画的持续时间。 因此，在这种情况下，我们将动画的持续时间定义为2秒长。 如果我们希望将其设置为半秒长，则可以将其更改为0.5, 。

The parameters inside the brackets represent any of the properties you’d like to animate. In this example, we’re animating the left top and background-color CSS properties. Notice how each of these different properties use camelCase to call them instead of the typical hyphen notation used with CSS. You can add as many different properties here as you’d like as long as you separate them with commas after their value.

方括号内的参数代表您要设置动画的任何属性。 在这个例子中，我们的动画left top和background-color CSS属性。 请注意，这些不同属性中的每一个如何使用camelCase来调用它们，而不是CSS使用的典型连字符表示法。 您可以在此处添加任意多个不同的属性，只要在它们的值后用逗号分隔即可。

The last property called is the animation's ease. GSAP comes packaged with a bunch of different easing options that you can add to your animations.

最后调用的属性是动画的ease 。 GSAP附带了许多不同的缓动选项，您可以将它们添加到动画中。

In our animation above, we call the Power4 ease and have it set to easeIn to the animation. You can see the full range of easing options in the documentation here. If you’re unfamiliar with easing, be sure to check out a previous article that explains different easing functions in depth.

在上面的动画中，我们将Power4称为Power4并将其设置为easeIn 。 您可以在此处的文档中看到所有宽松选项。 如果您不熟悉缓动，请务必阅读以前的文章 ，该文章深入介绍了不同的缓动功能。

Finally, you must close the parenthesis and the brackets of the Tween to prevent any errors and allow the animation to run. Don’t forget to include the semicolon to end the JavaScript function.

最后，必须关闭补间的括号和括号以防止出现任何错误并允许动画运行。 不要忘记添加分号来结束JavaScript函数。

The Tween is the basic foundation for GSAP animations. You can experiment with an example of this Tween in CodePen here.

补间是GSAP动画的基本基础。 您可以使用此吐温在CodePen的示例实验在这里 。

Tweens are great if you want to do one-off animations but if you’d like to create multi-step sequences, timelines are the best alternative.

如果您要一次性创建动画，则补间效果很好，但是如果您想创建多步序列，则时间轴是最好的选择。

时间轴动画 (Timeline Animations)

If you’ve ever used an animation or prototyping software like After Effects or Principle, you’re already familiar with timeline animations. Traditional timelines are usually a series of animations that occur one at a time or concurrently. Timelines in GSAP are not any different.

如果您曾经使用过After Effects或Principle等动画或原型制作软件，则已经熟悉时间轴动画。 传统的时间轴通常是一次或同时发生的一系列动画。 GSAP中的时间表没有什么不同。

To call a timeline, you must first define a variable at the top of your JavaScript file as a new TimelineLite:

要调用时间轴，您必须首先在JavaScript文件顶部定义一个变量作为新的TimelineLite ：

var tl = new TimelineLite;

To break this line of code down piece by piece, know that var is short for variable. If you’re unfamiliar with what a variable is, think of it as shorthand for a larger piece of code. In this case, we defined a new variable as tl and set it equal to new TimelineLite. This means that every time that we input tl in our code, it will stand for a new TimelineLite.

要逐步将这一行代码分解，请知道var是变量的缩写。 如果您不了解变量是什么，可以将其视为更大代码段的简写。 在这种情况下，我们将新变量定义为tl ，并将其设置为等于new TimelineLite 。 这意味着，每当我们在代码中输入tl时，它将代表一个新的TimelineLite 。

Note that we can substitute tl for any shorthand text we’d like. I’m using tl because it’s short for timeline. This is useful because if we have multiple timelines in our file, we can give each one a unique variable to prevent confusion.

请注意，我们可以将tl替换为我们想要的任何速记文本。 我使用tl是因为它是timeline的缩写。 这很有用，因为如果文件中有多个时间轴，则可以为每个时间轴分配一个唯一的变量以防止混淆。

Let’s now recreate our first animation using TimelineLite instead of TweenLite to see how this works.

现在，使用TimelineLite而不是TweenLite重新创建我们的第一个动画，以了解其工作原理。

var tl = new TimelineLite;

tl.to(“#rectangle”, 2, {  x:100,  y:75, backgroundColor: “#000000”, ease: Power4.easeIn})

You’ll notice that this is not much different than our TweenLite animation from above. The only real difference is that instead of stating TweenLite.to we are using tl.to instead. You’ll also notice that we are now using x and y coordinates instead of left and top CSS properties. These more or less behave the same way.

您会注意到，这与我们上面的TweenLite动画没有太大区别。 唯一真正的区别是，我们没有使用tl.to声明TweenLite.to 。 您还将注意到，我们现在使用的是x和y坐标，而不是left和top CSS属性。 这些或多或少的行为相同。

Also, notice how there is no semicolon at the end of the parenthesis. This is because we are going to add a second animation to this timeline, tethering them together.

另外，请注意括号的末尾没有分号。 这是因为我们将向此时间轴添加第二个动画，将它们捆绑在一起。

For this second animation, let’s make the rectangle scale up 150% and turn gray after the first animation is complete. To do this, we will add another block of code under our first animation. Altogether it will look like this:

对于第二个动画，让我们将矩形放大150％，并在第一个动画完成后将其变为灰色。 为此，我们将在第一个动画下添加另一个代码块。 总共看起来像这样：

var tl = new TimelineLite;

tl.to(“#rectangle”, 2, {  x:100,  y: 75, backgroundColor: “#000000”, ease: Power4.easeIn})

.to(“#rectangle”, 1, { scaleX: 1.5, scaleY: 1.5, backgroundColor: “#454545”, ease: Back.easeOut.config(1.7)});

You can see that this second block of code doesn’t have the tl.to at the beginning of the timeline. Instead, it only has .to.

您会看到第二个代码块在时间轴的开头没有tl.to 相反，它只有.to 。

This is because multiple animations in one timeline can be tethered together as long as there’s no semicolon separating them.

这是因为只要没有分号就可以将一个时间轴中的多个动画捆绑在一起。

A semicolon signifies the end of a timeline and should only be used at the end of the last animation within a timeline.

分号表示时间轴的结尾，并且只能在时间轴中最后一个动画的结尾使用。

You’ll also notice that we’re using two new properties, scaleX and scaleY. These properties behave exactly how they sound, they increase an object’s size by a percent amount. In this case, 1.5 is equivalent to 150%.

您还将注意到，我们正在使用两个新属性， scaleX和scaleY 。 这些属性的行为与声音完全相同，它们将对象的大小增加了一个百分比。 在这种情况下，1.5等于150％。

Finally, we’re using a unique easing function here called Back.easeOut.config(1.7). This ease gives a natural rhythm to our animation by overshooting the intended value and then coming back down to the final value. We can see in this animation’s case how the rectangle grows slightly bigger than 150% and then scales itself back down afterward.

最后，我们在这里使用了一个称为Back.easeOut.config(1.7)的独特缓动函数。 这种轻松通过使目标值超调然后返回到最终值，使动画具有自然的节奏。 在此动画的情况下，我们可以看到矩形如何逐渐增大到大于150％，然后再向后缩小。

使用TimelineLite对多个对象进行动画处理 (Animating Multiple Objects with TimelineLite)

Timelines are not limited to animating one object. You can animate multiple objects in a timeline by adding their corresponding IDs in different functions.

时间轴不限于为一个对象设置动画。 您可以通过在不同功能中添加多个对象的相应ID来在时间轴中设置动画。

For example, if we were to create an HTML object of a circle and have it fade in after our rectangle scales larger, our code would look like this:

例如，如果我们要创建一个圆形HTML对象，并在矩形变大后使其淡入，我们的代码将如下所示：

var tl = new TimelineLite;

tl.to(“#rectangle”, 2, {  x:100,  y: 75, backgroundColor: “#000000”, ease: Power4.easeIn})

.to(“#rectangle”, 1, { scaleX: 1.5, scaleY: 1.5, backgroundColor: “#454545”, ease: Back.easeOut.config(1.7)})

.from(“#circle”, 1, { opacity: 0,});

We’ve added a third code block to our animation that calls the circle.

我们在动画中添加了第三个代码块，称为圆。

Also note how we’re now using the .from method. This means that our circle animation starts at 0% opacity and then goes to 100% opacity.

还要注意我们现在如何使用.from方法。 这意味着我们的圆形动画从0％不透明度开始，然后变为100％不透明度。

You can see this in action when our animation has the circle hidden because it starts at 0% opacity. After the rectangle changes color and scales up, the circle fades in at 100% opacity, just as intended.

当我们的动画将圆隐藏起来时，您可以看到它的作用，因为它的透明度从0％开始。 矩形更改颜色并按比例放大后，圆会按照预期以100％不透明度淡入。

You can see how TimelineLite works in this CodePen example here. I encourage you to try and add new elements to the HTML and try to create more complicated and unique sequences with the provided tools. You can also take a look at the full GSAP TimelineLite documentation here to learn about other methods and properties.

你可以看到TimelineLite如何在这个CodePen例子在这里 。 我鼓励您尝试向HTML中添加新元素，并尝试使用提供的工具创建更复杂和独特的序列。 您还可以在此处查看完整的GSAP TimelineLite文档，以了解其他方法和属性。

绘图SVG (DrawSVG)

Along with the free TweenLite and TimelineLite features, GSAP also offers premium content that allows you to manipulate SVGs with ease. Luckily, these plugins are available to play around with for free on CodePen by searching for them in the pen settings (the gear icon next to the JS text editor).

除了免费的TweenLite和TimelineLite功能之外，GSAP还提供了高级内容，使您可以轻松地操作SVG。 幸运的是，通过在笔设置(JS文本编辑器旁边的齿轮图标)中搜索它们，可以在CodePen上免费使用这些插件。

The DrawSVG plugin makes it easy to animate the lines of an SVG. To show this, we’re going to have an SVG of a unicorn in a hoodie draw itself. You can follow along with the corresponding CodePen here.

DrawSVG插件可轻松为SVG的线设置动画。 为了说明这一点，我们将在连帽衫中绘制出独角兽的SVG。 您可以在此处跟随相应的CodePen。

First, we need to export our SVG and import it into our text editor.

首先，我们需要导出SVG并将其导入到文本编辑器中。

For a comprehensive breakdown on how to properly export SVGs, check out a previous article here.

有关如何正确导出SVG的全面细分，请在此处查看上一篇文章。

Next, we need to give each of our individual paths an ID so that we can call each one in our timeline. This may take some time if you have a complicated SVG with a series of different animating lines. For the sake of simplicity, I’m going to name the first path #unicorn1 and name the next path #unicorn2 and so on until they all have a unique ID.

接下来，我们需要为每个路径指定一个ID，以便我们可以在时间轴中调用每个路径。 如果您具有包含一系列不同动画效果线的复杂SVG，则可能需要一些时间。 为了简单起见，我将命名第一个路径#unicorn1并命名下一个路径#unicorn2 ，依此类推，直到它们都具有唯一的ID。

<!––An example of a path with an ID--><path id=”unicorn1" class=”st0" d=”M371.8,252.4c0,0,2.8,1.8,5,1.2"/>

Now that all our paths have an ID, we can jump in and begin developing our timeline animation. Like before, we need to create a variable will function as our TimelineLite variable:

现在我们所有的路径都有一个ID，我们可以进入并开始开发时间轴动画。 像以前一样，我们需要创建一个将用作我们的TimelineLite变量的变量：

var unicorndraw = new TimelineLite();

In this case, we’re going to be using the variable unicorndraw.

在这种情况下，我们将使用变量unicorndraw 。

The last step we need to do is to create a TimelineLite animation that calls each of the individual paths:

我们需要做的最后一步是创建一个TimelineLite动画，该动画调用每个单独的路径：

unicorndraw.from(“#unicorn1, #unicorn2, #unicorn3, #unicorn4, #unicorn5, #unicorn6, #unicorn7, #unicorn8, #unicorn9, #unicorn10, #unicorn11, #unicorn12, #unicorn13, #unicorn14, #unicorn15, #unicorn16, #unicorn17, #unicorn18, #unicorn19, #unicorn20, #unicorn21, #unicorn22, #unicorn23, #unicorn24, #unicorn25, #unicorn26, #unicorn27, #unicorn28, #unicorn29, #unicorn30, #unicorn31, #unicorn32, #unicorn33, #unicorn34, #unicorn35, #unicorn36, #unicorn37, #unicorn38, #unicorn39, #unicorn40, #unicorn41, #unicorn42, #unicorn43, #unicorn44, #unicorn45, #unicorn46, #unicorn47, #unicorn48, #unicorn49, #unicorn50, #unicorn51, #unicorn52, #unicorn53, #unicorn54, #unicorn55, #unicorn56, #unicorn57, #unicorn58, #unicorn59, #unicorn60, #unicorn61, #unicorn62, #unicorn63”, 3, {drawSVG:”0", delay:”1"})

You can see how this is like our previous .from TimelineLite animation from before. We’re calling our individual objects (in this case, we’re calling more than one at a time so that they all animate at once) and we define the duration of the animation as 3 seconds.

你可以看到这是如何像我们以前.from TimelineLite动画从之前。 我们要调用单个对象(在这种情况下，我们一次要调用多个对象，以便它们一次都可以进行动画处理)，并将动画的持续时间定义为3秒。

The only difference is that inside the brackets, we’re now using drawSVG: “0”. This calls the drawSVG plugin and defines each path to have a value of 0. Because we’re using a .from method, the paths start with a value of 0 and then animate to 100% in 3 seconds.

唯一的区别是，在方括号内，我们现在使用drawSVG: “0” 。 这将调用drawSVG插件并定义每个路径的值均为0。因为我们使用的是.from方法，所以路径的起始值为0，然后在3秒内设置为100％的动画。

The other piece of code inside the brackets is delay: “1”. This determines how long the animation will wait to execute in seconds. In this case, we’re stating that the animation will wait 1 second before executing.

方括号内的另一段代码是delay: “1” 。 这确定了动画将等待执行多长时间(以秒为单位)。 在这种情况下，我们要说明动画将在执行之前等待1秒钟。

This is the fastest way to get started with the drawSVG plugin but you can manipulate the values in many different ways to get some interesting effects. To learn more about this plugin, check out GSAP’s site.

这是开始使用drawSVG插件的最快方法，但是您可以通过许多不同的方式来操纵值以获得一些有趣的效果。 要了解有关此插件的更多信息，请访问GSAP 网站 。

最后的想法 (Final Thoughts)

GSAP makes it easy to create and manipulate your own timeline animations even if you have little to no understanding of JavaScript. This was a small amount of the different animations you can do with GSAP. Check out Greensock’s site to learn more about the library and experiment with different animation techniques.

即使您对JavaScript的了解很少甚至根本不了解，GSAP仍可轻松创建和操纵自己的时间轴动画。 这是您可以使用GSAP进行的少量不同动画处理。 请访问Greensock的网站，以了解有关该库的更多信息并尝试使用不同的动画技术。

Nicholas Kramer is a designer currently working at Barrel in New York City. He solves design problems for businesses by helping them simplify ideas and communicate their value to customers.

Nicholas Kramer是一名设计师，目前在纽约市的Barrel工作。 他通过帮助企业简化构想并将其价值传达给客户来解决企业的设计问题。

Stay in Touch! Dribbble | LinkedIn | Website

保持联系！ 盘带 领英 网站

翻译自: https://www.freecodecamp.org/news/the-beginners-guide-to-the-greensock-animation-platform-7dc9fd9eb826/

greensock下载