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

您將使用：

• 使用BezierPlugin對沿彎曲的Bezier路徑的屬性進行動畫處理
• GSAP Draggable實用程序可拖動屏幕上的元素，而ThrowPropsPlugin可將其滑動到平穩的位置
• DrawSVGPlugin動態繪制SVG筆劃
• MorphSVGPlugin可以將任何SVG路徑變形為任何其他路徑，即使兩條路徑的點數相同
• 和SplitText實用程序創建有趣的動畫文本效果。

到本教程結束時，您將能夠在不使用GreenSock插件的情況下，花費通常所需時間的一小部分來創建復雜類型的網絡動畫。

有關GreenSock基礎知識的介紹，包括如何與TweenMax一起使用以對簡單動畫進行排序和交錯，請繼續閱讀本多篇文章的第1部分。

如果您想在GreenSock的功能強大的時間軸（TimelineLite和TimelineMax）上重新學習一下，請參閱第2部分 。

GreenSock文章是CSS之外的系列文章：動態DOM動畫庫的一部分 。 這是我過去分期介紹的內容：

• 使用Anime.js對DOM進行動畫處理將介紹如何充分利用網絡上的動畫，以及何時可以考慮使用JavaScript動畫庫而不是僅CSS動畫。 然后重點介紹Anime.js，這是一個免費的輕量級JavaScript動畫庫
• 帶有KUTE.js的有趣動畫效果向您介紹KUTE.js，這是一個免費且功能豐富的JavaScript動畫庫
• 使用Velocity.js（無jQuery）使您的網站具有互動性和趣味性（沒有jQuery）向您展示了如何使用Velocity.js（一個開源的，功能強大的免費動畫庫）來創建高效的Web動畫。
• GreenSock面向初學者：Web動畫教程（第1部分）概述了GreenSock，也稱為GSAP（GreenSock動畫平臺），在此我討論庫的模塊和許可模型。 我還將向您展示如何使用GSAP TweenMax編寫簡單的補間，補間序列和交錯動畫
• 面向初學者的GreenSock（第2部分）：GSAP的時間軸深入研究GSAP的時間軸功能，教您如何在一個時間軸或多個嵌套的時間軸內組織動畫。

使用GreenSock的BezierPlugin進行路徑動畫

沿著路徑的運動包括遵循預定路徑（例如彎曲路徑或鋸齒形路徑等）的對象。在正確的上下文中，這對于逼真的動畫至關重要。

使用不推薦使用的SMIL（同步多媒體集成語言）可以實現這種動畫。

沿途發展的未來似乎是CSS，但是盡管某些瀏覽器 （主要是Chrome和Opera） 支持該功能，但在生產網站中采用它可能是一個冒險的舉動。

為了獲得一致的瀏覽器支持和易于實施，GSAP的BezierPlugin是一個不錯的選擇。

這是TweenMax附帶的免費插件。 讓我們嘗試一下！

GreenSock的BezierPlugin基礎知識

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

基本語法如下：

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

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

如果坐標列表很長，最好將它們緩存在變量中，然后使用它代替函數內部的對象本身，如下所示：

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設置坐標，請記住，值是指元素的位置，而不是畫布本身。 例如， x: 10相對于元素當前所在的位置將元素從10向右移動。 以下點仍將相對于元素的初始位置，而不是先前指定的點。

如果您希望元素從一組坐標平滑地移動到下一組坐標，則BezierPlugin提供了兩個選項：

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

您還可以將autoRotate屬性設置為true ，其作用是使元素根據其在Bezier路徑上的位置旋轉。

下面是這些屬性如何工作的演示：選擇一個curviness值，選中或取消選中復選框以設置autoRotate屬性，并使用適當的單選按鈕選擇'thru'或'soft' 。

請注意， type屬性的默認值為'thru' ，并且當您選擇'soft' ，將禁用用于設置curviness值的下拉框：

請參閱CodePen上的SitePoint（ @SitePoint ）提供的Pen GSAP BezierPlugin 。

使用Vecteezy編輯器設計的SVG圖形

有關如何使用GSAP的BezierPlugin的更多詳細信息，請查看以下鏈接：

• BezierPlugin文檔
• 有關通過IHateTomatoes選擇坐標點的 YouTube視頻
• 如果計劃將BezierPlugin與內聯SVG一起使用，則需要MorphSVGPlugin.pathDataToBezier()函數將SVG路徑數據轉換為bezier錨點，并將結果提供給values屬性。

GreenSock的高級插件和實用程序

您可以使用TweenMax及其提供的所有優點來完成很多工作，但是要多加努力，GreenSock的高級插件和實用程序令人震驚。

要將高級內容下載到您本地的開發環境或您自己的網站上，您至少需要Club GreenSock的Shockingly Green會員資格。

但是，請訪問此神奇的CodePen演示 ，只要您的GSAP動畫存在于CodePen上，您就可以免費使用GSAP的高級插件。

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

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

是時候陷入困境了！

使用GreenSock的Draggable和ThrowProps進行拖放

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

當與ThrowPropsPlugin配對時，Draggable在屏幕上產生類似于物理學的滑動運動。

這是一個簡單的實現：

Draggable.create('#yourID');

現在，您可以水平和垂直拖動id為yourID的元素。

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

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

現在，使用.container類不能將可拖動元素拖動到該元素的邊界之外。

要水平或垂直鎖定拖動動作的方向，請鍵入以下內容：

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

現在，該元素僅可沿垂直軸拖動。 要將其更改為水平軸，請將'y'替換為'x'作為type屬性的值。

您可以將type屬性設置為'rotation'的值。 在這種情況下，您將不能以水平和/或垂直方向拖動元素，而是以圓周運動旋轉它。

這是使用這種動畫的CodePen演示：

見筆ThrowProps和可拖動的演示由SitePoint（ @SitePoint上） CodePen 。

使用Vecteezy編輯器設計的SVG圖形

您可能會注意到此演示的三件事：

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

有關Draggable和ThrowPropsPlugin的更多詳細信息，請訪問以下資源：

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

實時繪畫SVG使用GreenSock的DrawSVGPlugin繪制動畫

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

僅使用CSS創建這種動畫并不復雜。 但是，GSAP具有一些優點：

• 您可以使用簡單的SVG形狀（例如矩形，圓形等），這些形狀沒有getTotalLenght()方法（您需要此方法來計算SVG筆觸的長度）
• 當您縮放SVG以便在不同的屏幕尺寸上響應地工作時， getTotalLength()不會調整。 有了DrawSVG，您將不必為此擔心
• 使用DrawSVG，您可以使用整數，布爾值（即，對或錯）和百分比來對筆劃進行動畫處理，并且具有更大的可能性。

要開始使用它，您可以嘗試如下操作：

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

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

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

要交錯多個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);

這是使用DrawSVGPlugin的實時演示：

請參閱CodePen上的SitePoint（ @SitePoint ）提供的Pen GSAP DrawSVGPlugin 。

有關更多詳細信息，請不要錯過以下資源：

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

使用GreenSock的MorphSVGPlugin進行變形的動畫

使用GSAP的MorphSVGPlugin ，即使兩個形狀之間的路徑點數量不均勻，也可以用一行代碼將一個SVG形狀變形為另一種。

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

您可以像下面這樣簡單地開始使用MorphSVGPlugin：

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

SVG的#circle元素將在1秒的時間內變為#square元素。

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

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

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

請參閱CodePen上的SitePoint（ @SitePoint ）提供的Pen GSAP MorphPlugin 。

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

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

這是另一個演示此操作的演示：

見筆GSAP MorphSVG插件與形狀由SitePoint（ @SitePoint上） CodePen 。

使用Vecteezy編輯器設計的SVG圖形

有關GSAP的MorphSVGPlugin的更多信息，請查看以下資源：

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

使用GreenSock的SplitText實用程序實現有趣的文字效果

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

用幾行代碼，您可以將您的文本拆分為句子，單詞或字符，然后將它們設置為動畫內容。

這是一個基本示例：

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

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

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

在后臺，GSAP在每行，每個單詞或句子周圍添加了一些額外的<div>元素。 這使代碼可以將這些容器作為目標并分別為其設置動畫。

為了在完成動畫后擺脫其他標記，GreenSock提供了方便的revert()函數，您可以在onComplete()回調函數中調用該函數：

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

這是此實時演示中的SplitText：

見筆GSAP SplitText工具由SitePoint（ @SitePoint ）上CodePen 。

背景圖片由Unsplash.com提供

要了解更多信息，請訪問以下資源：

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

結論

恭喜你！ 您已經完成了這個專門針對GreenSock的迷你系列的結尾。 到現在為止，您應該能夠將GSAP包含到您的項目中，并向網站中添加一些動畫魔術了。

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

這也結束了我對JavaScript動畫庫的游覽。 現在，交給您，創建自己的動畫并使網絡更美麗。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。