greensock插件下载
The aim of the third part of this GreenSock tutorial series is to introduce you to some amazing GreenSock plugins.
本GreenSock教程系列第三部分的目的是向您介绍一些了不起的GreenSock 插件 。
You’ll be using:
您将使用：
The BezierPlugin to animate properties along a curved Bezier path BezierPlugin用于沿弯曲的Bezier路径设置属性动画 The GSAP Draggable utility to drag elements on the screen and the ThrowPropsPlugin to glide them to a smooth stop GSAP Draggable实用程序可拖动屏幕上的元素，而ThrowPropsPlugin可将其滑动到平稳的位置 The DrawSVGPlugin to draw SVG strokes dynamically DrawSVGPlugin动态绘制SVG笔划 The MorphSVGPlugin to morph any SVG path into any other path, even if the two paths don’t have the same number of points MorphSVGPlugin可以将任何SVG路径变形为任何其他路径，即使两个路径的点数相同 And the SplitText utility to create fun animation text effects. 和SplitText实用程序创建有趣的动画文本效果。By the end of this tutorial, you’ll be able to create complex types of web animations in a fraction of the time that it would normally take without using GreenSock’s plugins.
到本教程结束时，您将能够在不使用GreenSock插件的情况下，花费通常所需时间的一小部分来创建复杂类型的网络动画。
For an introduction to the basics of GreenSock, including how to work with TweenMax for sequencing and staggering simple animations, head over to part 1 of this multi-part article.
有关GreenSock基础知识的介绍，包括如何与TweenMax一起使用以对简单动画进行排序和交错，请继续阅读本多篇文章的第1部分。
If you’re looking for a refresher on GreenSock’s powerful timeline (TimelineLite and TimelineMax), check out Part 2.
如果您想在GreenSock的功能强大的时间轴(TimelineLite和TimelineMax)上重新学习一下，请参阅第2部分 。
The GreenSock articles are part of the series Beyond CSS: Dynamic DOM Animation Libraries. Here’s what I covered in the past instalments:
GreenSock文章是Beyond CSS：动态DOM动画库系列文章的一部分。 这是我过去分期介绍的内容：
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动画。
GreenSock for Beginners: a Web Animation Tutorial (Part 1) is an overview of GreenSock, also known as GSAP (GreenSock Animation Platform), where I discuss the library’s modules and licensing model. I also show you how to code a simple tween, sequences of tweens, and staggering animations using GSAP TweenMax
GreenSock面向初学者：Web动画教程(第1部分)概述了GreenSock，也称为GSAP(GreenSock动画平台)，在此我讨论库的模块和许可模型。 我还将向您展示如何使用GSAP TweenMax编写简单的补间，补间序列和交错动画的代码
GreenSock for Beginners (Part 2): GSAP’s Timeline delves into GSAP’s timeline functionality teaching you how to organize your animations inside a timeline or multiple nested timelines.
面向初学者的GreenSock(第2部分)：GSAP的时间轴深入研究GSAP的时间轴功能，教您如何在一个时间轴或多个嵌套的时间轴中组织动画。
Motion along a path consists in objects following a predefined path like a curved path or a zigzag path, etc. In the right context, it can be crucial for realistic animation.
沿着路径的运动包括遵循预定路径(例如弯曲路径或锯齿形路径等)的对象。在正确的上下文中，这对于逼真的动画至关重要。
This kind of animation is possible using SMIL (Synchronized Multimedia Integration Language), which is being deprecated.
使用不推荐使用的SMIL(同步多媒体集成语言)可以实现这种动画。
The future of motion along a path seems to be CSS, but although the feature is supported in a few browsers (mostly Chrome and Opera), adopting it in production websites could be a risky move.
沿途发展的未来似乎是CSS，但是尽管某些浏览器 (主要是Chrome和Opera) 支持该功能，但在生产网站中采用该功能可能是一个冒险的举动。
For consistent browser support and ease of implementation, GSAP’s BezierPlugin is a fantastic option.
为了获得一致的浏览器支持和易于实施，GSAP的BezierPlugin是一个不错的选择。
This is a free plugin included with TweenMax. Let’s try it out!
这是TweenMax附带的免费插件。 让我们尝试一下！
To get started with GSAP’s BezierPlugin, just download TweenMax and include it into your project like you would with any external JavaScript file at the bottom of your HTML document.
要开始使用GSAP的BezierPlugin，只需下载TweenMax并将其包含在您的项目中，就像在HTML文档底部的任何外部JavaScript文件一样。
The basic syntax looks like this:
基本语法如下：
TweenMax.to(document.getElementById('myDiv'), 5, { bezier:[ {left:100, top:250}, {left:300, top:0}, {left:500, top:400} ], ease:Power1.easeInOut });The snippet above implements TweenMax to() method on the .myDiv element. Among the properties, you can see the bezier property with its value set to an array of objects. Each object contains the values for a couple of coordinates. The example uses top and left properties, but you could as well use x and y.
上面的代码段在.myDiv元素上实现了TweenMax to()方法。 在这些属性中，您可以看到bezier属性，其值设置为对象数组。 每个对象都包含几个坐标的值。 该示例使用top和left属性，但您也可以使用x和y 。
If you have a long list of coordinates, it’s a good idea to cache them in a variable and use this instead of the object itself inside your function, like this:
如果坐标列表很长，则最好将它们缓存在变量中，然后使用它代替函数内部的对象本身，如下所示：
const points = [ {left:100, top:250}, {left:300, top:0}, {left:500, top:400} ]; TweenMax.to(document.getElementById('myDiv'), 5, { bezier: points, ease:Power1.easeInOut });If you use x and y to set your coordinates, remember that the values refer to the element’s position, not the canvas itself. For example, x: 10 moves the element from 10 to the right with respect to the location the element is currently at. The following points will still be relative to the element’s initial position rather than the point previously specified.
如果使用x和y设置坐标，请记住，值是指元素的位置，而不是画布本身。 例如， x: 10相对于元素当前所在的位置将元素从10向右移动。 以下点仍将相对于元素的初始位置，而不是先前指定的点。
If you’d like your element to move smoothly from one set of coordinates to the next, the BezierPlugin offers two options:
如果您希望元素从一组坐标平滑地移动到下一组坐标，则BezierPlugin提供了两个选项：
Set the type property to 'soft'. This way, the coordinates you provide act as magnets, which attract the element towards them. However, the element won’t be traveling through the specified points
将type属性设置为'soft' 。 这样，您提供的坐标就像磁铁一样，将元素吸引向它们。 但是，元素不会穿越指定的点
Set the type property to 'thru', which is the default value, and specify a value for the curviness property. This special properties lets you define the tension on the Bezier: 0 is equivalent to a straight line, 1 is the normal curviness, 2 is twice the normal value, etc. The curviness property applies only in case you set the type property to 'thru'.
将type属性设置为'thru' ，这是默认值，并为curviness属性指定一个值。 此特殊属性使您可以定义贝塞尔曲线上的张力：0等于直线，1是正常弯曲度，2是正常值的两倍， curviness 。 curviness属性仅在将type属性设置为'thru'情况下适用'thru' 。
You can also set the autoRotate property to true, which has the effect of making the element spin according to its position on the Bezier path.
您还可以将autoRotate属性设置为true ，其作用是使元素根据其在Bezier路径上的位置旋转。
Below is a demo of how these properties work: select a curviness value, check or uncheck the checkbox to set the autoRotate property, and pick either 'thru' or 'soft' using the appropriate radio button.
下面是这些属性如何工作的演示：选择一个curviness值，选中或取消选中复选框以设置autoRotate属性，并使用适当的单选按钮选择'thru'或'soft' 。
Note that the default value of the type property is 'thru' and that when you select 'soft', the dropdown box to set the curviness value will be disabled:
请注意， type属性的默认值为'thru' ，并且当您选择'soft' ，将禁用用于设置curviness值的下拉框：
See the Pen GSAP BezierPlugin by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint( @SitePoint )提供的Pen GSAP BezierPlugin 。
SVG graphics designed with the Vecteezy Editor
使用Vecteezy编辑器设计的SVG图形
For more details on how to use GSAP’s BezierPlugin, check out these links:
有关如何使用GSAP的BezierPlugin的更多详细信息，请查看以下链接：
BezierPlugin docs
BezierPlugin文档
YouTube video on selecting coordinate points by IHateTomatoes
有关通过IHateTomatoes选择坐标点的 YouTube视频
If you plan on using the BezierPlugin with inline SVGs, then you’ll need the MorphSVGPlugin.pathDataToBezier() function to convert SVG path data into bezier anchor points and feed the result to the values property.
如果计划将BezierPlugin与内联SVG一起使用，则需要MorphSVGPlugin.pathDataToBezier()函数将SVG路径数据转换为bezier锚点，并将结果提供给values属性。
You can accomplish a great deal with TweenMax and all the goodness it provides, but to go the extra mile GreenSock’s premium plugins and utilities are mind blowing.
您可以使用TweenMax及其提供的所有优点来完成很多工作，但是要付出更多的努力，GreenSock的高级插件和实用程序令人震惊。
To download the premium stuff to your local dev environment or to your own website, you’ll need at least a Shockingly Green membership to Club GreenSock.
要将高级内容下载到您本地的开发环境或您自己的网站上，您至少需要Club GreenSock的Shockingly Green会员资格。
However, visit this magic CodePen demo and as long as your GSAP animation lives on CodePen, you’ll get to play with GSAP’s premium plugins for free.
但是，请访问此神奇的CodePen演示 ，只要您的GSAP动画存在于CodePen上，您就可以免费使用GSAP的高级插件。
To get started, you can simply click on the Copy button to copy the plugin’s URL and add it to your own Pen.
首先，您只需单击复制按钮即可复制插件的URL并将其添加到您自己的Pen中。
Alternatively, simply click on the Collection button to fork one of the many GreenSock’s demos using the plugin you’re interested in and use it as a starting point.
另外，只需单击“ 收藏”按钮，即可使用您感兴趣的插件来分叉GreenSock的许多演示之一，并将其用作起点。
Time to get stuck in!
是时候陷入困境了！
Draggable is an awesome utility library that lets you code a drag & drop animation in no time. Not only that, but your code will be cross-browser compatible, device-enabled for touchscreens, performant, and consistently applicable to both HTML and SVG elements.
Draggable是一个很棒的实用程序库，可让您立即编写拖放动画。 不仅如此，您的代码还将与跨浏览器兼容，可在触摸屏上启用设备，高效且始终适用于HTML和SVG元素。
When paired with the ThrowPropsPlugin, Draggable produces gliding physics-like motions on the screen.
当与ThrowPropsPlugin配对时，Draggable在屏幕上产生类似于物理学的滑动动作。
Here’s a simple implementation:
这是一个简单的实现：
Draggable.create('#yourID');You can now drag the element with id of yourID both horizontally and vertically.
现在，您可以水平和垂直拖动id为yourID的元素。
If you’d like your element to be constrained within given bounds, leverage the bounds property. For extra smoothness, download and add the ThrowPropsPlugin. To use it, just set throwProps to true, like this:
如果您希望将元素限制在给定范围内，请利用bounds属性。 为了获得额外的平滑度，请下载并添加ThrowPropsPlugin。 要使用它，只需将throwProps设置为true ，如下所示：
Draggable.create('#yourID', { bounds: '.container', throwProps: true });Now, the draggable element can’t be dragged beyond the boundaries of the element with the .container class.
现在，使用.container类不能将可拖动元素拖动到该元素的边界之外。
To lock the direction of the dragging motion either horizontally or vertically, type something like this:
要水平或垂直锁定拖动运动的方向，请键入以下内容：
Draggable.create('#yourID', { bounds: '.container', throwProps: true, type: 'y' //only vertical scroll });The element will now be draggable only along the vertical axis. To change this into the horizontal axis, replace 'y' with 'x' as value of the type property.
现在，该元素仅可沿垂直轴拖动。 要将其更改为水平轴，请将'y'替换为'x'作为type属性的值。
You can set the type property to the value of 'rotation'. In this case, instead of being able to drag the element horizontally and/or vertically, you’ll be able to spin it in a circular movement.
您可以将type属性设置为'rotation'的值。 在这种情况下，您将无法以水平和/或垂直方向拖动元素，而是以圆周运动旋转它。
Here’s a CodePen demo that uses this type of animation:
这是使用这种动画的CodePen演示：
See the Pen ThrowProps and Draggable Demo by SitePoint (@SitePoint) on CodePen.
见笔ThrowProps和可拖动的演示由SitePoint( @SitePoint上) CodePen 。
SVG graphics designed with the Vecteezy Editor
使用Vecteezy编辑器设计的SVG图形
Three things you may notice about this demo:
您可能会注意到此演示的三件事：
Draggable has useful callback functions like onDragStart(), onDragEnd(), etc., that you can use to do your stuff in relation to the stages of the dragging motion
Draggable具有有用的回调函数，例如onDragStart() ， onDragEnd()等，您可以使用它们来完成与拖动动作的阶段有关的工作
GreenSock can also manipulate CSS variables or custom properties, which is an awesome feature added to the library’s latest release.
GreenSock还可以操纵CSS变量或自定义属性 ，这是添加到库的最新版本中的很棒的功能。
GreenSock provides svgOrigin, which is a special property included in the CSSPlugin (packaged with TweenMax). With svgOrigin, you can set the transformOrigin in the SVG’s global coordinate space rather than relatively to the element itself. To come up with the numbers you could use Illustrator for help, but I mostly refined the choice by trial and error.
GreenSock提供了svgOrigin ，这是CSSPlugin(与TweenMax打包在一起)中包含的一个特殊属性 。 使用svgOrigin ，可以在SVG的全局坐标空间而不是相对于元素本身中设置transformOrigin。 为了得出数字，您可以使用Illustrator寻求帮助，但是我主要是通过反复试验来完善选择。
For more details on Draggable and the ThrowPropsPlugin, visit these resources:
有关Draggable和ThrowPropsPlugin的更多详细信息，请访问以下资源：
Draggable docs
可拖动文档
ThrowPropsPlugin docs
ThrowPropsPlugin文档
GreenSock’s curated demos collection on CodePen
GreenSock在CodePen上策划的演示集合
Some of Sarah Drasner’s Draggable demos on CodePen (feel free to study them all, it’ll be worth it):
莎拉·德拉斯纳(Sarah Drasner)在CodePen上的一些Draggable演示(随时研究它们，这是值得的)：
https://codepen.io/collection/DNRrdY/
https://codepen.io/collection/DNRrdY/
https://codepen.io/sdras/pen/gbERKQ
https://codepen.io/sdras/pen/gbERKQ
With GreenSock’s DrawSVGPlugin you can quickly create an SVG graphic that looks like it’s drawing itself on the screen.
使用GreenSock的DrawSVGPlugin，您可以快速创建一个SVG图形，看起来就像在屏幕上绘制的一样。
Creating this kind of animation with only CSS is not complicated. However, GSAP offers some advantages:
仅使用CSS创建这种动画并不复杂。 但是，GSAP具有一些优点：
You can work with simple SVG shapes like rect, circle, etc., which don’t have a getTotalLenght() method (you need this method to calculate the length of the SVG stroke)
您可以使用简单的SVG形状(例如矩形，圆形等)，这些形状没有getTotalLenght()方法(您需要此方法来计算SVG笔触的长度)
getTotalLength() won’t adjust when you scale the SVG to work responsively on different screen sizes. With DrawSVG you won’t have to worry about this
当您缩放SVG以便在不同的屏幕尺寸上响应地工作时， getTotalLength()不会调整。 有了DrawSVG，您将不必为此担心
With DrawSVG you can animate the stroke using integers, booleans (i.e., true or false), and percentages, and have a wider range of possibilities. 使用DrawSVG，您可以使用整数，布尔值(即true或false)和百分比来对笔划进行动画处理，并且具有更多的可能性。To start using it, you can try out something like this:
要开始使用它，您可以尝试如下操作：
TweenLite.fromTo("#path", 1, { drawSVG:"0 5%" }, { drawSVG:"95% 100%" });For the animation to work, your SVG needs to have a stroke defined, either in the SVG itself as a presentational attribute or in CSS:
为了使动画正常工作，您的SVG需要定义笔画，无论是在SVG本身中作为表示属性还是在CSS中：
// Define a stroke and stroke-width in CSS: #path { stroke-width: 5px; stroke: blue; }To stagger more than one SVG stroke, you can simply use GSAP stagger methods. The DrawSVGPlugin is seamlessly integrated with the GSAP API. For example:
要交错多个SVG笔划，可以简单地使用GSAP交错方法。 DrawSVGPlugin与GSAP API无缝集成。 例如：
/* All elements with the class of .element will have a stroke animation with a 0.1 delay between each of them during 1 second */ TweenMax.staggerFrom(".element", 1, { drawSVG: 0 }, 0.1);Here’s a live demo with the DrawSVGPlugin at work:
这是使用DrawSVGPlugin的实时演示：
See the Pen GSAP DrawSVGPlugin by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint( @SitePoint )提供的Pen GSAP DrawSVGPlugin 。
For more details, don’t miss these resources:
有关更多详细信息，请不要错过以下资源：
DrawSVGPlugin docs
DrawSVGPlugin文档
GreenSock’s curated demos collection on CodePen.
GreenSock在CodePen上策划的演示集 。
Using GSAP’s MorphSVGPlugin lets you morph one SVG shape into another with one line of code, even if the number of path points between the two shapes is uneven.
使用GSAP的MorphSVGPlugin ，即使两个形状之间的路径点数量不均匀，也可以用一行代码将一个SVG形状变形为另一种。
This allows for some cool effects with relatively little effort.
这样就可以以相对较少的努力获得一些很酷的效果。
You can start using the MorphSVGPlugin with something as simple as this:
您可以像下面这样简单地开始使用MorphSVGPlugin：
TweenLite.to("#circle", 1, { morphSVG:"#square" });The SVG’s #circle element will morph into the #square element over a period of 1 second.
SVG的#circle元素将在1秒的时间内变为#square元素。
As you can see, the plugin is perfectly integrated with GSAP’s methods, therefore in the snippet above there’s nothing that you don’t already know.
如您所见，该插件与GSAP的方法完美集成，因此在上面的代码片段中，您没有什么不知道的。
If you prefer, you can feed the function the path data instead of #square.
如果愿意，可以向函数提供路径数据，而不是#square 。
Check out how it works in this demo:
查看此演示中的工作原理：
See the Pen GSAP MorphPlugin by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint( @SitePoint )提供的Pen GSAP MorphPlugin 。
Background photo by Luca Zanon on Unsplash.com
Luca Zanon在Unsplash.com上拍摄的背景照片
If your SVG is using simple shapes instead of paths, MorphSVG can deal with this too. Just use the MorphSVGPlugin.convertToPath() function, which does what it says on the tin: it converts the shape into a path, so that GSAP can morph it.
如果您的SVG使用的是简单形状而不是路径，MorphSVG也可以解决此问题。 只需使用MorphSVGPlugin.convertToPath()函数，该函数MorphSVGPlugin.convertToPath()执行其提示：将形状转换为路径，以便GSAP可以对其进行变形。
Here’s another demo that shows this in action:
这是另一个演示此操作的演示：
See the Pen GSAP MorphSVG Plugin with Shapes by SitePoint (@SitePoint) on CodePen.
见笔GSAP MorphSVG插件与形状由SitePoint( @SitePoint上) CodePen 。
SVG graphics designed with the Vecteezy Editor
使用Vecteezy编辑器设计的SVG图形
For more on GSAP’s MorphSVGPlugin, check out these resources:
有关GSAP的MorphSVGPlugin的更多信息，请查看以下资源：
MorphSVGPlugin docs
MorphSVGPlugin文档
GreenSock’s curated demos collection on CodePen.
GreenSock在CodePen上策划的演示集 。
The right animation can make text on the web more engaging and fun. GSAP offers a number of plugins to manipulate text, but my favorite is SplitText.
正确的动画可以使网络上的文本更具吸引力和乐趣。 GSAP提供了许多用于处理文本的插件，但我最喜欢的是SplitText 。
With a few lines of code, you can split your text into sentences, words, or characters, and then animate them to your heart’s content.
只需几行代码，您就可以将文本拆分为句子，单词或字符，然后将它们设置为动画内容。
Here’s a basic example:
这是一个基本示例：
const el = document.getElementById('elID'); const split = new SplitText(el, { type: 'lines, words, chars' });el contains some text, and split contains a splitText instance you can use to manipulate your text.
el包含一些文本， split包含可用于操作文本的splitText实例。
For example, split.lines contains an array of your text split into lines, which you can then easily animate with the GreenSock’s API.
例如， split.lines包含分成几行的文本数组，然后您可以轻松地使用GreenSock的API制作动画。
Behind the scenes, GSAP adds some extra <div> elements around each line, word, or sentence. This enables the code to target those containers and animate them separately.
在后台，GSAP在每行，每个单词或句子周围添加了一些额外的<div>元素。 这使代码可以将这些容器作为目标并分别为其设置动画。
To get rid of the additional markup after you’re done with the animation, GreenSock has the handy revert() function, that you can call inside the onComplete() callback function:
为了在完成动画后摆脱其他标记，GreenSock提供了方便的revert()函数，您可以在onComplete()回调函数中调用该函数：
onComplete: function() { split.revert(); }Here’s SplitText at work in this live demo:
这是此实时演示中的SplitText：
See the Pen GSAP SplitText Utility by SitePoint (@SitePoint) on CodePen.
见笔GSAP SplitText工具由SitePoint( @SitePoint )上CodePen 。
Background photo courtesy of Unsplash.com
背景图片由Unsplash.com提供
To learn more, head over to these resources:
要了解更多信息，请访问以下资源：
SplitText docs
SplitText文档
GreenSock’s curated demos collection on CodePen.
GreenSock在CodePen上策划的演示集 。
Congratulations! You’ve made it to the end of this mini series dedicated to GreenSock. By now you should be able to include GSAP into your projects and add some animation magic to your website.
恭喜你！ 您已经完成了有关GreenSock的迷你系列的结尾。 到现在为止，您应该能够将GSAP包含到您的项目中，并向网站添加一些动画魔术了。
GreenSock offers tons of possibilities with its rich API and plugins, therefore to become an expert, head over to the docs pages and keep practicing. If you come up against any hurdles, don’t hesitate to join the GreenSock’s Forums, a friendly and super helpful place with dedicated GSAP Ninjas who will certainly give you a hand.
GreenSock凭借其丰富的API和插件提供了无数种可能性，因此，要成为专家，请前往docs页面并继续练习。 如果您遇到任何障碍，请立即加入GreenSock论坛 ，这是一个友好而乐于助人的地方，这里有专门的GSAP忍者，他们一定会帮到您的。
This also concludes my excursion into JavaScript animation libraries. Now, it’s over to you, create your own animations and make the web a more beautiful place.
这也结束了我对JavaScript动画库的游览。 现在，交给您，创建自己的动画并使网络更美丽。
翻译自: https://www.sitepoint.com/fancy-web-animations-made-easy-greensock-plugins/
greensock插件下载
相关资源：jdk-8u281-windows-x64.exe