greensock下载

To get the most out of this article it is important that you have a solid understanding of JavaScript. We will be solely focusing on understanding GreenSock in this article, so if you haven’t used JavaScript before then get learning and come back!

为了充分利用本文，重要的是您必须对JavaScript有扎实的了解。 在本文中，我们将仅专注于理解GreenSock，因此，如果您以前没有使用过JavaScript，那么请继续学习并回来！

什么是绿袜子？ (What is Greensock?)

GreenSock is a JavaScript animation library that saves us a lot of pain when creating our animations especially when it comes to cross browser capability. GreenSock can also be called GSAP (GreenSock Animation Platform) and I will use both interchangeably. GSAP can basically animate any property you throw at it, ranging from CSS properties to SVG attributes.

GreenSock是一个JavaScript动画库，在创建动画时，尤其是跨浏览器功能时，为我们省去了很多麻烦 。 GreenSock也可以称为GSAP(GreenSock动画平台)，我将两者互换使用。 从SAP属性到SVG属性，GSAP基本上可以为您添加的任何属性设置动画。

GSAP has multiple tools you can use, which include:

GSAP有多种工具可供您使用，包括：

• TweenLite which is, as the name implies, a lightweight version

  顾名思义， TweenLite是轻量级版本

• TweenMax which is fully packed with all of GSAP’s power

  TweenMax完全包含了GSAP的所有功能

• TimelineLite & TimelineMax are sequencing tools which helps manage the timing of our animations

  TimelineLite和 TimelineMax是排序工具，可帮助管理动画的时间安排

GSAP can be installed as an npm module:

GSAP可以作为npm模块安装：

$ npm install gsap

Or loaded through a script tag:

或通过脚本标签加载：

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

GreenSock基础知识 (GreenSock Basics)

To demonstrate GreenSock I am going to use Codepen. You can fork the pen here which has GreenSock already set up.

为了演示GreenSock，我将使用Codepen。 您可以在这里已经安装了GreenSock 的笔进行分叉 。

Let’s start off basic and animate a red square across the screen using GSAP’s to method. We create the red square like so:

让我们从基本开始，使用GSAP的to方法在屏幕上设置一个红色正方形的动画。 我们像这样创建红场：

<style>#element {height: 150px;width: 150px;background: red;}
</style>
<div id="element"></div>

To animate this we pass 3 arguments to the to method, the arguments are:

为了对此进行动画处理，我们将3参数传递给to方法，这些参数是：

.to(elToAnimate, duration, propToAnimate)

So in our case the element we want to animate is #element, the duration is 1 second and since we want to move our square our final argument is an object targeting the x property. Our code is:

因此，在本例中，我们要设置动画的元素是#element ，持续时间为1秒，并且由于我们要移动正方形，因此最后一个参数是针对x属性的对象。 我们的代码是：

TweenMax.to("#element", 1, { x: 100 })

This gives us the following:

这给我们以下内容：

Don’t worry about the gif, it’s much smoother in real life, as you’ll see on Codepen!

不用担心gif，就像在Codepen上看到的那样，它在现实生活中更加流畅！

Let’s say now we want to rotate our square, all we need to do is:

假设现在要旋转正方形，我们要做的就是：

TweenMax.to("#element", 3, { rotation: 360 });

You can make this rotation infinite by adding repeat:-1 to our object. You can also add in the yoyo property which will alternate the animation between backwards and forwards.

您可以通过向我们的对象添加repeat:-1来使rotation无限rotation 。 您还可以添加yoyo属性，该属性将在后退和前进之间yoyo动画。

We can start from a different position using the fromTo method. This is similar to the to method but we can supply an extra object of where we would like our animation to start. If we wanted our square to begin at x:300 then we pass this as the third argument to fromTo.

我们可以使用fromTo方法从另一个位置开始。 这类似于to方法，但我们可以提供的，我们希望我们的动画开始播放一个额外的对象。 如果我们希望正方形从x:300开始，则将其作为第三个参数传递给fromTo 。

Code wise this looks like as follows:

明智的代码如下所示：

TweenMax.fromTo("#element", 3, {x: 300}, { x: 100 });

Visually:

视觉上：

We can do more than change the position of our square, we could also target something like the opacity:

除了改变正方形的位置，我们还可以做更多的事情，还可以针对不透明度这样的目标：

TweenMax.fromTo("#element", 5, {opacity: 0}, { opacity: 1 });

Again we use the fromTo method and start our opacity at 0 and finish on 1.

再次，我们使用fromTo方法，从0开始opacity ，在1结束。

Ok, I’m sure you are incredibly uninspired right now as let’s be honest the above is quite boring. Let’s do something more interesting, we’ll use the Alligator.io logo and do something cool!

好的，我敢肯定，现在您的想法简直令人难以置信，因为坦白地说，上面的内容很无聊。 让我们做一些更有趣的事情，我们将使用Alligator.io徽标并做一些很棒的事情！

Alligator.io SVG徽标动画 (Alligator.io SVG Logo Animation)

I stole the Alligator.io logo from the website, hope Seb doesn’t mind. Here is the starter pen with our SVG inside.

我从网站上窃取了Alligator.io徽标，希望Seb不在乎。 这是装有我们SVG的入门笔 。

So our goal with this animation will be to draw the logo and fade in the green color.

因此，我们制作此动画的目标是draw徽标并淡入绿色。

The first thing we need to do is set a stroke-dasharray and stroke-dashoffset on our graphic. These are the attributes we use to simulate a drawing effect, you can read more about these properties here.

我们需要做的第一件事是在图形上设置stroke-dasharray和stroke-dashoffset 。 这些是我们用来模拟绘画效果的属性，您可以在此处阅读有关这些属性的更多信息。

In our CSS we set the following:

在我们CSS中，我们设置了以下内容：

#alligator path {stroke-dasharray: 600;stroke-dashoffset: 600;fill-opacity: 0; // we will animate the fill in
}

With this in place, our alligator has now disappeared. Let’s go animate it back in using TweenMax.

有了这个适当的位置，我们的鳄鱼现在不见了。 让我们使用TweenMax对其进行动画处理。

We use the to method which we used above, then we set our stroke-dashoffset to be 0.

我们使用上面使用的to方法，然后将stroke-dashoffset设置为0 。

TweenMax.to("#alligator path", 15, { "stroke-dashoffset": 0 })

We use the same selector we used in our CSS #alligator path, set a duration of 0 and then set our stroke-dashoffset to 0. This gives a really cool drawing effect:

我们使用与CSS #alligator path相同的选择器，将持续时间设置为0 ，然后将stroke-dashoffset设置为0 。 这提供了一个非常酷的绘图效果：

How cool is that?!! ✨

多么酷啊？！！ ✨

Now the next thing we need to do is get our color back in. We do this by adding an extra property to our object.

现在，我们需要做的下一件事是恢复颜色。我们通过向对象添加额外的属性来实现此目的。

TweenMax.to("#alligator path", 15, { "stroke-dashoffset": 0, "fill-opacity": 1 })

The problem we currently have is that the duration is quite long and this looks a little weird with the fill-opacity property. Ideally what we want is to first draw, then when that finishes we’ll fill in the graphic. The old way to achieve this was to have two separate animations with the second animation having a delay that matches the first animation’s duration. GreenSock gives us the great TimelineMax which does this for us.

我们目前遇到的问题是持续时间很长，并且对于fill-opacity属性来说看起来有些奇怪。 理想情况下，我们要先绘制，然后完成绘制，然后填充图形。 实现此目的的旧方法是使用两个单独的动画，而第二个动画的延迟与第一个动画的持续时间匹配。 GreenSock给了我们出色的TimelineMax ，它可以为我们做到这一点。

时间轴最大值 (TimelineMax)

The first thing we need to do is create an instance of the TimelineMax class like so:

我们需要做的第一件事是创建TimelineMax类的实例，如下所示：

const tl = new TimelineMax()

Then we call the to method on our instance and pass it our drawing effect:

然后to在实例上调用to方法并将其传递给我们的绘图效果：

tl.to("#alligator path", 10, { "stroke-dashoffset": 0 })

Then we call the to method again but this time for our fill-opacity:

然后我们再次调用to方法，但是这次是为了fill-opacity ：

tl.to("#alligator path", 5, { "fill-opacity": 1 })

With that in place we then get the following:

有了这个，我们将得到以下结果：

TimelineMax is extremely powerful and this is just scratching the surface, creating sequential animations has never been easier!

TimelineMax非常强大，这只是表面上的事情，创建连续动画从未如此简单！

结论 (Conclusion)

This is a nice quick intro into GreenSock and the most common methods. It’s a really powerful tool and if you enjoy making animations then you should really consider using it for your next project!

这是GreenSock和最常用方法的快速入门。 这是一个非常强大的工具，如果您喜欢制作动画，那么您应该考虑在下一个项目中使用它！

翻译自: https://www.digitalocean.com/community/tutorials/js-draw-using-greensock

greensock下载