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路徑設(shè)置屬性動(dòng)畫
• The GSAP Draggable utility to drag elements on the screen and the ThrowPropsPlugin to glide them to a smooth stop
  GSAP Draggable實(shí)用程序可拖動(dòng)屏幕上的元素，而ThrowPropsPlugin可將其滑動(dòng)到平穩(wěn)的位置
• The DrawSVGPlugin to draw SVG strokes dynamically
  DrawSVGPlugin動(dòng)態(tài)繪制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路徑變形為任何其他路徑，即使兩個(gè)路徑的點(diǎn)數(shù)相同
• And the SplitText utility to create fun animation text effects.
  和SplitText實(shí)用程序創(chuàng)建有趣的動(dòng)畫文本效果。

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.

到本教程結(jié)束時(shí)，您將能夠在不使用GreenSock插件的情況下，花費(fèi)通常所需時(shí)間的一小部分來創(chuàng)建復(fù)雜類型的網(wǎng)絡(luò)動(dòng)畫。

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.

有關(guān)GreenSock基礎(chǔ)知識(shí)的介紹，包括如何與TweenMax一起使用以對(duì)簡(jiǎn)單動(dòng)畫進(jìn)行排序和交錯(cuò)，請(qǐng)繼續(xù)閱讀本多篇文章的第1部分。

If you’re looking for a refresher on GreenSock’s powerful timeline (TimelineLite and TimelineMax), check out Part 2.

如果您想在GreenSock的功能強(qiáng)大的時(shí)間軸(TimelineLite和TimelineMax)上重新學(xué)習(xí)一下，請(qǐng)參閱第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：動(dòng)態(tài)DOM動(dòng)畫庫(kù)系列文章的一部分。 這是我過去分期介紹的內(nèi)容：

• 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對(duì)DOM進(jìn)行動(dòng)畫處理將介紹如何充分利用網(wǎng)絡(luò)上的動(dòng)畫，以及何時(shí)可以考慮使用JavaScript動(dòng)畫庫(kù)而不是僅CSS動(dòng)畫。 然后重點(diǎn)介紹Anime.js，這是一個(gè)免費(fèi)的輕量級(jí)JavaScript動(dòng)畫庫(kù)

• Fun Animation Effects with KUTE.js introduces you to KUTE.js, a free and feature-rich JavaScript animation library

  帶有KUTE.js的有趣動(dòng)畫效果向您介紹KUTE.js，這是一個(gè)免費(fèi)且功能豐富JavaScript動(dòng)畫庫(kù)

• 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)使您的網(wǎng)站具有互動(dòng)性和趣味性(沒有jQuery)向您展示了如何使用Velocity.js(一個(gè)開源的，功能強(qiáng)大的免費(fèi)動(dòng)畫庫(kù))來創(chuàng)建高效的Web動(dòng)畫。

• 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面向初學(xué)者：Web動(dòng)畫教程(第1部分)概述了GreenSock，也稱為GSAP(GreenSock動(dòng)畫平臺(tái))，在此我討論庫(kù)的模塊和許可模型。 我還將向您展示如何使用GSAP TweenMax編寫簡(jiǎn)單的補(bǔ)間，補(bǔ)間序列和交錯(cuò)動(dòng)畫的代碼

• 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.

  面向初學(xué)者的GreenSock(第2部分)：GSAP的時(shí)間軸深入研究GSAP的時(shí)間軸功能，教您如何在一個(gè)時(shí)間軸或多個(gè)嵌套的時(shí)間軸中組織動(dòng)畫。

使用GreenSock的BezierPlugin沿著路徑動(dòng)畫 (Animation Along a Path with GreenSock’s BezierPlugin)

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.

沿著路徑的運(yùn)動(dòng)包括遵循預(yù)定路徑(例如彎曲路徑或鋸齒形路徑等)的對(duì)象。在正確的上下文中，這對(duì)于逼真的動(dòng)畫至關(guān)重要。

This kind of animation is possible using SMIL (Synchronized Multimedia Integration Language), which is being deprecated.

使用不推薦使用的SMIL(同步多媒體集成語(yǔ)言)可以實(shí)現(xiàn)這種動(dòng)畫。

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.

沿途發(fā)展的未來似乎是CSS，但是盡管某些瀏覽器 (主要是Chrome和Opera) 支持該功能，但在生產(chǎn)網(wǎng)站中采用該功能可能是一個(gè)冒險(xiǎn)的舉動(dòng)。

For consistent browser support and ease of implementation, GSAP’s BezierPlugin is a fantastic option.

為了獲得一致的瀏覽器支持和易于實(shí)施，GSAP的BezierPlugin是一個(gè)不錯(cuò)的選擇。

This is a free plugin included with TweenMax. Let’s try it out!

這是TweenMax附帶的免費(fèi)插件。 讓我們嘗試一下！

GreenSock的BezierPlugin基礎(chǔ)知識(shí) (GreenSock’s BezierPlugin Basics)

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并將其包含在您的項(xiàng)目中，就像在HTML文檔底部的任何外部JavaScript文件一樣。

The basic syntax looks like this:

基本語(yǔ)法如下：

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元素上實(shí)現(xiàn)了TweenMax to()方法。 在這些屬性中，您可以看到bezier屬性，其值設(shè)置為對(duì)象數(shù)組。 每個(gè)對(duì)象都包含幾個(gè)坐標(biāo)的值。 該示例使用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:

如果坐標(biāo)列表很長(zhǎng)，則最好將它們緩存在變量中，然后使用它代替函數(shù)內(nèi)部的對(duì)象本身，如下所示：

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設(shè)置坐標(biāo)，請(qǐng)記住，值是指元素的位置，而不是畫布本身。 例如， x: 10相對(duì)于元素當(dāng)前所在的位置將元素從10向右移動(dòng)。 以下點(diǎn)仍將相對(duì)于元素的初始位置，而不是先前指定的點(diǎn)。

If you’d like your element to move smoothly from one set of coordinates to the next, the BezierPlugin offers two options:

如果您希望元素從一組坐標(biāo)平滑地移動(dòng)到下一組坐標(biāo)，則BezierPlugin提供了兩個(gè)選項(xiàng)：

• 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屬性設(shè)置為'soft' 。 這樣，您提供的坐標(biāo)就像磁鐵一樣，將元素吸引向它們。 但是，元素不會(huì)穿越指定的點(diǎn)

• 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屬性設(shè)置為'thru' ，這是默認(rèn)值，并為curviness屬性指定一個(gè)值。 此特殊屬性使您可以定義貝塞爾曲線上的張力：0等于直線，1是正常彎曲度，2是正常值的兩倍， curviness 。 curviness屬性僅在將type屬性設(shè)置為'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屬性設(shè)置為true ，其作用是使元素根據(jù)其在Bezier路徑上的位置旋轉(zhuǎn)。

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.

下面是這些屬性如何工作的演示：選擇一個(gè)curviness值，選中或取消選中復(fù)選框以設(shè)置autoRotate屬性，并使用適當(dāng)?shù)膯芜x按鈕選擇'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:

請(qǐng)注意， type屬性的默認(rèn)值為'thru' ，并且當(dāng)您選擇'soft' ，將禁用用于設(shè)置curviness值的下拉框：

See the Pen GSAP BezierPlugin by SitePoint (@SitePoint) on CodePen.

請(qǐng)參閱CodePen上的SitePoint( @SitePoint )提供的Pen GSAP BezierPlugin 。

SVG graphics designed with the Vecteezy Editor

使用Vecteezy編輯器設(shè)計(jì)的SVG圖形

For more details on how to use GSAP’s BezierPlugin, check out these links:

有關(guān)如何使用GSAP的BezierPlugin的更多詳細(xì)信息，請(qǐng)查看以下鏈接：

• BezierPlugin docs

  BezierPlugin文檔

• YouTube video on selecting coordinate points by IHateTomatoes

  有關(guān)通過IHateTomatoes選擇坐標(biāo)點(diǎn)的 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.

  如果計(jì)劃將BezierPlugin與內(nèi)聯(lián)SVG一起使用，則需要MorphSVGPlugin.pathDataToBezier()函數(shù)將SVG路徑數(shù)據(jù)轉(zhuǎn)換為bezier錨點(diǎn)，并將結(jié)果提供給values屬性。

GreenSock的高級(jí)插件和實(shí)用程序 (GreenSock’s Premium Plugins and Utilities)

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及其提供的所有優(yōu)點(diǎn)來完成很多工作，但是要付出更多的努力，GreenSock的高級(jí)插件和實(shí)用程序令人震驚。

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.

要將高級(jí)內(nèi)容下載到您本地的開發(fā)環(huán)境或您自己的網(wǎng)站上，您至少需要Club GreenSock的Shockingly Green會(huì)員資格。

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.

但是，請(qǐng)?jiān)L問此神奇的CodePen演示 ，只要您的GSAP動(dòng)畫存在于CodePen上，您就可以免費(fèi)使用GSAP的高級(jí)插件。

To get started, you can simply click on the Copy button to copy the plugin’s URL and add it to your own Pen.

首先，您只需單擊復(fù)制按鈕即可復(fù)制插件的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的許多演示之一，并將其??用作起點(diǎn)。

Time to get stuck in!

是時(shí)候陷入困境了！

使用GreenSock的Draggable和ThrowProps進(jìn)行拖放 (Drag & Drop with GreenSock’s Draggable and ThrowProps)

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是一個(gè)很棒的實(shí)用程序庫(kù)，可讓您立即編寫拖放動(dòng)畫。 不僅如此，您的代碼還將與跨瀏覽器兼容，可在觸摸屏上啟用設(shè)備，高效且始終適用于HTML和SVG元素。

When paired with the ThrowPropsPlugin, Draggable produces gliding physics-like motions on the screen.

當(dāng)與ThrowPropsPlugin配對(duì)時(shí)，Draggable在屏幕上產(chǎn)生類似于物理學(xué)的滑動(dòng)動(dòng)作。

Here’s a simple implementation:

這是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)：

Draggable.create('#yourID');

You can now drag the element with id of yourID both horizontally and vertically.

現(xiàn)在，您可以水平和垂直拖動(dòng)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:

如果您希望將元素限制在給定范圍內(nèi)，請(qǐng)利用bounds屬性。 為了獲得額外的平滑度，請(qǐng)下載并添加ThrowPropsPlugin。 要使用它，只需將throwProps設(shè)置為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.

現(xiàn)在，使用.container類不能將可拖動(dòng)元素拖動(dòng)到該元素的邊界之外。

To lock the direction of the dragging motion either horizontally or vertically, type something like this:

要水平或垂直鎖定拖動(dòng)運(yùn)動(dòng)的方向，請(qǐng)鍵入以下內(nèi)容：

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.

現(xiàn)在，該元素僅可沿垂直軸拖動(dòng)。 要將其更改為水平軸，請(qǐng)將'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屬性設(shè)置為'rotation'的值。 在這種情況下，您將無法以水平和/或垂直方向拖動(dòng)元素，而是以圓周運(yùn)動(dòng)旋轉(zhuǎn)它。

Here’s a CodePen demo that uses this type of animation:

這是使用這種動(dòng)畫的CodePen演示：

See the Pen ThrowProps and Draggable Demo by SitePoint (@SitePoint) on CodePen.

見筆ThrowProps和可拖動(dòng)的演示由SitePoint( @SitePoint上) CodePen 。

SVG graphics designed with the Vecteezy Editor

使用Vecteezy編輯器設(shè)計(jì)的SVG圖形

Three things you may notice about this demo:

您可能會(huì)注意到此演示的三件事：

• 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具有有用的回調(diào)函數(shù)，例如onDragStart() ， onDragEnd()等，您可以使用它們來完成與拖動(dòng)動(dòng)作的階段有關(guān)的工作

• GreenSock can also manipulate CSS variables or custom properties, which is an awesome feature added to the library’s latest release.

  GreenSock還可以操縱CSS變量或自定義屬性 ，這是添加到庫(kù)的最新版本中的很棒的功能。

• 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打包在一起)中包含的一個(gè)特殊屬性 。 使用svgOrigin ，可以在SVG的全局坐標(biāo)空間而不是相對(duì)于元素本身中設(shè)置transformOrigin。 為了得出數(shù)字，您可以使用Illustrator尋求幫助，但是我主要是通過反復(fù)試驗(yàn)來完善選擇。

For more details on Draggable and the ThrowPropsPlugin, visit these resources:

有關(guān)Draggable和ThrowPropsPlugin的更多詳細(xì)信息，請(qǐng)?jiān)L問以下資源：

• Draggable docs

  可拖動(dòng)文檔

• 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演示(隨時(shí)研究它們，這是值得的)：

  https://codepen.io/collection/DNRrdY/

  https://codepen.io/collection/DNRrdY/

  https://codepen.io/sdras/pen/gbERKQ

  https://codepen.io/sdras/pen/gbERKQ

實(shí)時(shí)繪圖SVG使用GreenSock的DrawSVGPlugin繪制動(dòng)畫 (Live-Drawing SVG Strokes Animation with GreenSock’s DrawSVGPlugin)

With GreenSock’s DrawSVGPlugin you can quickly create an SVG graphic that looks like it’s drawing itself on the screen.

使用GreenSock的DrawSVGPlugin，您可以快速創(chuàng)建一個(gè)SVG圖形，看起來就像在屏幕上繪制的一樣。

Creating this kind of animation with only CSS is not complicated. However, GSAP offers some advantages:

僅使用CSS創(chuàng)建這種動(dòng)畫并不復(fù)雜。 但是，GSAP具有一些優(yōu)點(diǎn)：

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

  您可以使用簡(jiǎn)單的SVG形狀(例如矩形，圓形等)，這些形狀沒有g(shù)etTotalLenght()方法(您需要此方法來計(jì)算SVG筆觸的長(zhǎng)度)

• 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

  當(dāng)您縮放SVG以便在不同的屏幕尺寸上響應(yīng)地工作時(shí)， getTotalLength()不會(huì)調(diào)整。 有了DrawSVG，您將不必為此擔(dān)心

• 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，您可以使用整數(shù)，布爾值(即true或false)和百分比來對(duì)筆劃進(jìn)行動(dòng)畫處理，并且具有更多的可能性。

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:

為了使動(dòng)畫正常工作，您的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:

要交錯(cuò)多個(gè)SVG筆劃，可以簡(jiǎn)單地使用GSAP交錯(cuò)方法。 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的實(shí)時(shí)演示：

See the Pen GSAP DrawSVGPlugin by SitePoint (@SitePoint) on CodePen.

請(qǐng)參閱CodePen上的SitePoint( @SitePoint )提供的Pen GSAP DrawSVGPlugin 。

For more details, don’t miss these resources:

有關(guān)更多詳細(xì)信息，請(qǐng)不要錯(cuò)過以下資源：

• DrawSVGPlugin docs

  DrawSVGPlugin文檔

• GreenSock’s curated demos collection on CodePen.

  GreenSock在CodePen上策劃的演示集 。

使用GreenSock的MorphSVGPlugin進(jìn)行變形的動(dòng)畫 (Shape Shifting Animation with GreenSock’s MorphSVGPlugin)

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 ，即使兩個(gè)形狀之間的路徑點(diǎn)數(shù)量不均勻，也可以用一行代碼將一個(gè)SVG形狀變形為另一種。

This allows for some cool effects with relatively little effort.

這樣就可以以相對(duì)較少的努力獲得一些很酷的效果。

You can start using the MorphSVGPlugin with something as simple as this:

您可以像下面這樣簡(jiǎn)單地開始使用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秒的時(shí)間內(nèi)變?yōu)?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.

如果愿意，可以向函數(shù)提供路徑數(shù)據(jù)，而不是#square 。

Check out how it works in this demo:

查看此演示中的工作原理：

See the Pen GSAP MorphPlugin by SitePoint (@SitePoint) on CodePen.

請(qǐng)參閱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使用的是簡(jiǎn)單形狀而不是路徑，MorphSVG也可以解決此問題。 只需使用MorphSVGPlugin.convertToPath()函數(shù)，該函數(shù)MorphSVGPlugin.convertToPath()執(zhí)行其提示：將形狀轉(zhuǎn)換為路徑，以便GSAP可以對(duì)其進(jìn)行變形。

Here’s another demo that shows this in action:

這是另一個(gè)演示此操作的演示：

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編輯器設(shè)計(jì)的SVG圖形

For more on GSAP’s MorphSVGPlugin, check out these resources:

有關(guān)GSAP的MorphSVGPlugin的更多信息，請(qǐng)查看以下資源：

• MorphSVGPlugin docs

  MorphSVGPlugin文檔

• GreenSock’s curated demos collection on CodePen.

  GreenSock在CodePen上策劃的演示集 。

使用GreenSock的SplitText實(shí)用程序?qū)崿F(xiàn)有趣的文字效果 (Fun Text Effects with GreenSock’s SplitText Utility)

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.

正確的動(dòng)畫可以使網(wǎng)絡(luò)上的文本更具吸引力和樂趣。 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.

只需幾行代碼，您就可以將文本拆分為句子，單詞或字符，然后將它們?cè)O(shè)置為動(dòng)畫內(nèi)容。

Here’s a basic example:

這是一個(gè)基本示例：

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實(shí)例。

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包含分成幾行的文本數(shù)組，然后您可以輕松地使用GreenSock的API制作動(dòng)畫。

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.

在后臺(tái)，GSAP在每行，每個(gè)單詞或句子周圍添加了一些額外的<div>元素。 這使代碼可以將這些容器作為目標(biāo)并分別為其設(shè)置動(dòng)畫。

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:

為了在完成動(dòng)畫后擺脫其他標(biāo)記，GreenSock提供了方便的revert()函數(shù)，您可以在onComplete()回調(diào)函數(shù)中調(diào)用該函數(shù)：

onComplete: function() {split.revert(); }

Here’s SplitText at work in this live demo:

這是此實(shí)時(shí)演示中的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:

要了解更多信息，請(qǐng)?jiān)L問以下資源：

• SplitText docs

  SplitText文檔

• GreenSock’s curated demos collection on CodePen.

  GreenSock在CodePen上策劃的演示集 。

結(jié)論 (Conclusion)

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.

恭喜你！ 您已經(jīng)完成了有關(guān)GreenSock的迷你系列的結(jié)尾。 到現(xiàn)在為止，您應(yīng)該能夠?qū)SAP包含到您的項(xiàng)目中，并向網(wǎng)站添加一些動(dòng)畫魔術(shù)了。

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和插件提供了無數(shù)種可能性，因此，要成為專家，請(qǐng)前往docs頁(yè)面并繼續(xù)練習(xí)。 如果您遇到任何障礙，請(qǐng)立即加入GreenSock論壇 ，這是一個(gè)友好而樂于助人的地方，這里有專門的GSAP忍者，他們一定會(huì)幫到您的。

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.

這也結(jié)束了我對(duì)JavaScript動(dòng)畫庫(kù)的游覽。 現(xiàn)在，交給您，創(chuàng)建自己的動(dòng)畫并使網(wǎng)絡(luò)更美麗。

翻譯自: https://www.sitepoint.com/fancy-web-animations-made-easy-greensock-plugins/

greensock插件下載

總結(jié)

以上是生活随笔為你收集整理的greensock插件下载_使用GreenSock插件轻松制作精美的Web动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。