本GreenSock教程系列第三部分的目的是向您介紹一些了不起的GreenSock 插件 。

您將使用：

• 使用BezierPlugin對(duì)沿彎曲的Bezier路徑的屬性進(jìn)行動(dòng)畫處理
• GSAP Draggable實(shí)用程序可拖動(dòng)屏幕上的元素，而ThrowPropsPlugin可將其滑動(dòng)到平穩(wěn)的位置
• DrawSVGPlugin動(dòng)態(tài)繪制SVG筆劃
• MorphSVGPlugin可以將任何SVG路徑變形為任何其他路徑，即使兩條路徑的點(diǎn)數(shù)相同
• 和SplitText實(shí)用程序創(chuàng)建有趣的動(dòng)畫文本效果。

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

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

如果您想在GreenSock的功能強(qiáng)大的時(shí)間軸（TimelineLite和TimelineMax）上重新學(xué)習(xí)一下，請(qǐng)參閱第2部分 。

GreenSock文章是CSS之外的系列文章：動(dòng)態(tài)DOM動(dòng)畫庫(kù)的一部分 。 這是我過(guò)去分期介紹的內(nèi)容：

• 使用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ù)
• 帶有KUTE.js的有趣動(dòng)畫效果向您介紹KUTE.js，這是一個(gè)免費(fèi)且功能豐富的JavaScript動(dòng)畫庫(kù)
• 使用Velocity.js（無(wú)jQuery）使您的網(wǎng)站具有互動(dòng)性和趣味性（沒(méi)有jQuery）向您展示了如何使用Velocity.js（一個(gè)開(kāi)源的，功能強(qiáng)大的免費(fèi)動(dòng)畫庫(kù)）來(lái)創(chuàng)建高效的Web動(dòng)畫。
• GreenSock面向初學(xué)者：Web動(dòng)畫教程（第1部分）概述了GreenSock，也稱為GSAP（GreenSock動(dòng)畫平臺(tái)），在此我討論庫(kù)的模塊和許可模型。 我還將向您展示如何使用GSAP TweenMax編寫簡(jiǎn)單的補(bǔ)間，補(bǔ)間序列和交錯(cuò)動(dòng)畫
• 面向初學(xué)者的GreenSock（第2部分）：GSAP的時(shí)間軸深入研究GSAP的時(shí)間軸功能，教您如何在一個(gè)時(shí)間軸或多個(gè)嵌套的時(shí)間軸內(nèi)組織動(dòng)畫。

使用GreenSock的BezierPlugin進(jìn)行路徑動(dòng)畫

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

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

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

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

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

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

要開(kāi)始使用GSAP的BezierPlugin，只需下載TweenMax并將其包含在您的項(xiàng)目中，就像在HTML文檔底部的任何外部JavaScript文件一樣。

基本語(yǔ)法如下：

TweenMax.to(document.getElementById('myDiv'), 5, {bezier:[{left:100, top:250}, {left:300, top:0}, {left:500, top:400}], ease:Power1.easeInOut });

上面的代碼段在.myDiv元素上實(shí)現(xiàn)了TweenMax to()方法。 在這些屬性中，您可以看到bezier屬性，其值設(shè)置為對(duì)象數(shù)組。 每個(gè)對(duì)象都包含幾個(gè)坐標(biāo)的值。 該示例使用top和left屬性，但您也可以使用x和y 。

如果坐標(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 });

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

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

• 將type屬性設(shè)置為'soft' 。 這樣，您提供的坐標(biāo)就像磁鐵一樣，將元素吸引向它們。 但是，元素不會(huì)穿越指定的點(diǎn)
• 將type屬性設(shè)置為'thru' ，這是默認(rèn)值，并為curviness屬性指定一個(gè)值。 此特殊屬性使您可以定義貝塞爾曲線上的張力：0等于直線，1是正常彎曲度，2是正常值的兩倍， curviness 。 curviness屬性僅在將type屬性設(shè)置為'thru'情況下適用'thru' 。

您還可以將autoRotate屬性設(shè)置為true ，其作用是使元素根據(jù)其在Bezier路徑上的位置旋轉(zhuǎn)。

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

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

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

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

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

• BezierPlugin文檔
• 有關(guān)通過(guò)IHateTomatoes選擇坐標(biāo)點(diǎn)的 YouTube視頻
• 如果計(jì)劃將BezierPlugin與內(nèi)聯(lián)SVG一起使用，則需要MorphSVGPlugin.pathDataToBezier()函數(shù)將SVG路徑數(shù)據(jù)轉(zhuǎn)換為bezier錨點(diǎn)，并將結(jié)果提供給values屬性。

GreenSock的高級(jí)插件和實(shí)用程序

您可以使用TweenMax及其提供的所有優(yōu)點(diǎn)來(lái)完成很多工作，但是要多加努力，GreenSock的高級(jí)插件和實(shí)用程序令人震驚。

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

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

首先，您只需單擊“ 復(fù)制”按鈕即可復(fù)制插件的URL并將其添加到您自己的Pen中。

或者，只需單擊“ 收藏”按鈕，即可使用您感興趣的插件來(lái)分叉GreenSock的許多演示之一，并將其??用作起點(diǎn)。

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

使用GreenSock的Draggable和ThrowProps進(jìn)行拖放

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

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

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

Draggable.create('#yourID');

現(xiàn)在，您可以水平和垂直拖動(dòng)id為yourID的元素。

如果希望將元素限制在給定范圍內(nèi)，請(qǐng)利用bounds屬性。 為了獲得額外的平滑度，請(qǐng)下載并添加ThrowPropsPlugin。 要使用它，只需將throwProps設(shè)置為true ，就像這樣：

Draggable.create('#yourID', {bounds: '.container',throwProps: true });

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

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

Draggable.create('#yourID', {bounds: '.container',throwProps: true,type: 'y' //only vertical scroll });

現(xiàn)在，該元素僅可沿垂直軸拖動(dòng)。 要將其更改為水平軸，請(qǐng)將'y'替換為'x'作為type屬性的值。

您可以將type屬性設(shè)置為'rotation'的值。 在這種情況下，您將不能以水平和/或垂直方向拖動(dòng)元素，而是以圓周運(yùn)動(dòng)旋轉(zhuǎn)它。

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

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

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

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

• Draggable具有有用的回調(diào)函數(shù)，例如onDragStart() ， onDragEnd()等，您可以使用它們來(lái)完成與拖動(dòng)動(dòng)作的階段有關(guān)的工作
• GreenSock還可以操縱CSS變量或自定義屬性 ，這是添加到庫(kù)的最新版本中的很棒的功能。
• GreenSock提供了svgOrigin ，這是CSSPlugin（與TweenMax打包在一起）中包含的一個(gè)特殊屬性 。 使用svgOrigin ，可以在SVG的全局坐標(biāo)空間而不是相對(duì)于元素本身中設(shè)置transformOrigin。 為了得出數(shù)字，您可以使用Illustrator尋求幫助，但我主要是通過(guò)反復(fù)試驗(yàn)來(lái)完善選擇。

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

• 可拖動(dòng)文檔
• ThrowPropsPlugin文檔
• GreenSock在CodePen上策劃的演示集合
• 莎拉·德拉斯納（Sarah Drasner）在CodePen上的一些Draggable演示（隨時(shí)學(xué)習(xí)所有內(nèi)容，這是值得的）：
  https://codepen.io/collection/DNRrdY/
  https://codepen.io/sdras/pen/gbERKQ

實(shí)時(shí)繪畫SVG使用GreenSock的DrawSVGPlugin繪制動(dòng)畫

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

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

• 您可以使用簡(jiǎn)單的SVG形狀（例如矩形，圓形等），這些形狀沒(méi)有g(shù)etTotalLenght()方法（您需要此方法來(lái)計(jì)算SVG筆觸的長(zhǎng)度）
• 當(dāng)您縮放SVG以便在不同的屏幕尺寸上響應(yīng)地工作時(shí)， getTotalLength()不會(huì)調(diào)整。 有了DrawSVG，您將不必為此擔(dān)心
• 使用DrawSVG，您可以使用整數(shù)，布爾值（即，對(duì)或錯(cuò)）和百分比來(lái)對(duì)筆劃進(jìn)行動(dòng)畫處理，并且具有更大的可能性。

要開(kāi)始使用它，您可以嘗試如下操作：

TweenLite.fromTo("#path", 1, {drawSVG:"0 5%" }, {drawSVG:"95% 100%" });

為了使動(dòng)畫正常工作，您的SVG需要定義筆觸，無(wú)論是在SVG本身中作為表示屬性還是在CSS中：

// Define a stroke and stroke-width in CSS: #path {stroke-width: 5px;stroke: blue; }

要交錯(cuò)多個(gè)SVG筆劃，可以簡(jiǎn)單地使用GSAP交錯(cuò)方法。 DrawSVGPlugin與GSAP API無(wú)縫集成。 例如：

/* 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);

這是使用DrawSVGPlugin的實(shí)時(shí)演示：

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

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

• DrawSVGPlugin文檔
• GreenSock在CodePen上策劃的演示集合 。

使用GreenSock的MorphSVGPlugin進(jìn)行變形的動(dòng)畫

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

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

您可以像下面這樣簡(jiǎn)單地開(kāi)始使用MorphSVGPlugin：

TweenLite.to("#circle", 1, {morphSVG:"#square" });

SVG的#circle元素將在1秒的時(shí)間內(nèi)變?yōu)?square元素。

如您所見(jiàn)，該插件與GSAP的方法完美集成，因此在上面的代碼片段中，您沒(méi)有什么不知道的。

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

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

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

Luca Zanon在Unsplash.com上拍攝的背景照片

如果您的SVG使用的是簡(jiǎn)單形狀而不是路徑，MorphSVG也可以處理。 只需使用MorphSVGPlugin.convertToPath()函數(shù)，該函數(shù)就可以做到：可以將形狀轉(zhuǎn)換為路徑，以便GSAP可以對(duì)其進(jìn)行變形。

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

見(jiàn)筆GSAP MorphSVG插件與形狀由SitePoint（ @SitePoint上） CodePen 。

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

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

• MorphSVGPlugin文檔
• GreenSock在CodePen上策劃的演示集合 。

使用GreenSock的SplitText實(shí)用程序?qū)崿F(xiàn)有趣的文字效果

正確的動(dòng)畫可以使網(wǎng)絡(luò)上的文字更具吸引力和樂(lè)趣。 GSAP提供了許多用于處理文本的插件，但我最喜歡的是SplitText 。

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

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

const el = document.getElementById('elID'); const split = new SplitText(el, {type: 'lines, words, chars' });

el包含一些文本， split包含可用于操作文本的splitText實(shí)例。

例如， split.lines包含分成幾行的文本數(shù)組，然后您可以輕松地使用GreenSock的API制作動(dòng)畫。

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

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

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

這是此實(shí)時(shí)演示中的SplitText：

見(jiàn)筆GSAP SplitText工具由SitePoint（ @SitePoint ）上CodePen 。

背景圖片由Unsplash.com提供

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

• SplitText文檔
• GreenSock在CodePen上策劃的演示集合 。

結(jié)論

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

GreenSock憑借其豐富的API和插件提供了無(wú)數(shù)種可能性，因此要成為專家，請(qǐng)直接訪問(wèn)docs頁(yè)面并繼續(xù)練習(xí)。 如果您遇到任何障礙，請(qǐng)立即加入GreenSock論壇 ，這是一個(gè)友好而樂(lè)于助人的地方，這里有專門的GSAP忍者，他們一定會(huì)幫到您的。

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

From: https://www.sitepoint.com/fancy-web-animations-made-easy-greensock-plugins/

總結(jié)

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

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