精美的網絡動畫使用Greensock插件變得容易

使用Greensock插件解鎖令人驚嘆的Web動畫：深度潛水

>本教程探索了Greensock（GSAP）功能強大的插件，與傳統的CSS或SMIL相比，為複雜的Web動畫提供了簡化的方法。 我們將介紹關鍵插件，並演示如何有效地實現專業級別的結果。

>

本分期付款專注於幾個特殊的GSAP插件：>

• bezierplugin： 毫不費力地沿彎曲的bezier路徑動畫元素，確保一致的跨瀏覽器兼容性並超過CSS或SMIL的局限性。
draggable＆throwpropsplugin：
• 構建具有出色性能和廣泛設備/瀏覽器支持的基於物理學的拖放動畫。 drawsvgplugin：
創建動態SVG筆觸動畫，為CSS提供了卓越的控制和靈活性，對響應式設計尤其有益。
• morphsvgplugin：在SVG形狀之間無縫過渡，用最小的代碼簡化了複雜的變形效果，甚至可以用不同點計數處理路徑。
• slaptext：>通過將文本分配到單個操作的行，單詞或字符中來生成引人入勝的文本動畫效果。
• 掌握這些插件大大減少了複雜的Web動畫的開發時間。 >
沿著路徑的動畫，用bezierplugin

>

沿預定義的路徑（彎曲，曲折等）動畫對象增加了現實主義。儘管SMIL已過時並且CSS支持受到限制，但BezierPlugin提供了強大的跨瀏覽器解決方案。 這是一個免費的插件。

在您的HTML中包括teenmax。 基本語法是：

對於眾多坐標，將它們緩存到一個變量中：

>

使用'x'和'y'坐標相對於元素當前位置的位置。

> bezierplugin提供

（坐標充當磁鐵）和

>（默認情況下，用於路徑張力）。

<code class="language-javascript">TweenMax.to(document.getElementById('myDiv'), 5, {
  bezier:[
    {left:100, top:250}, 
    {left:300, top:0}, 
    {left:500, top:400}
  ], 
  ease:Power1.easeInOut
});</code>

>沿路徑旋轉元素。 codepen演示說明了這些屬性。

<code class="language-javascript">const points = [ /* ... your points */ ];
TweenMax.to(document.getElementById('myDiv'), 5, { bezier: points, ease:Power1.easeInOut });</code>

請參閱Codepen demo

type: 'soft'> Greensock Premium插件和實用程序type: 'thru'curviness> autoRotate: true雖然Tweenmax提供了很多，但俱樂部Greensock會員資格解鎖了高級插件和公用事業。 令人震驚的綠色會員資格可以訪問下載這些資源。 但是，Codepen演示允許在Codepen環境中使用高級插件免費實驗。

>拖動和掉落與拖放和投擲propsplugin

拖放簡化了拖放動畫，提供跨瀏覽器的兼容性，觸摸屏支持和性能。 ThrowPropsPlugin增加了基於物理的滑行。

>

基本實現：

<code class="language-javascript">TweenMax.to(document.getElementById('myDiv'), 5, {
  bezier:[
    {left:100, top:250}, 
    {left:300, top:0}, 
    {left:500, top:400}
  ], 
  ease:Power1.easeInOut
});</code>

用bounds約束運動，並啟用throwProps>

的滑行

<code class="language-javascript">const points = [ /* ... your points */ ];
TweenMax.to(document.getElementById('myDiv'), 5, { bezier: points, ease:Power1.easeInOut });</code>

>使用type: 'x'（水平）或（垂直）鎖定拖動方向。 type: 'y'啟用旋轉拖動。 type: 'rotation'

請參閱Codepen demo

drawsvgplugin

創造了SVG圖形本身的效果。 它處理缺乏>的簡單形狀並適應響應式縮放，超過CSS限制。 getTotalLength()基本用法：

確保您的SVG具有定義的中風（在SVG或CSS中）。 使用GSAP的交錯方法交錯多個筆觸。

<code class="language-javascript">Draggable.create('#yourID');</code>

請參閱Codepen demo

>

>用變形的形狀移動

>變形的變形，即使有不同的點計數，一個SVG形狀也會變成另一種SVG。 簡單用法：

您可以直接提供路徑數據或用於簡單形狀的

。

請參閱Codepen demo

<code class="language-javascript">Draggable.create('#yourID', { bounds: '.container', throwProps: true });</code>

MorphSVGPlugin.convertToPath()

帶有slaptext

的有趣文本效果 分佈版將文本分為目標動畫的線條，單詞或字符。 基本用法：

>單獨，或

>。使用

在動畫之後刪除添加的標記。

請參閱Codepen demo

<code class="language-javascript">TweenLite.fromTo("#path", 1, { drawSVG:"0 5%" }, { drawSVG:"95% 100%" });</code>

split.linessplit.words結論split.charssplit.revert() Greensock的插件

>使您有效地創建複雜的Web動畫。 探索文檔和社區論壇以掌握其功能並提升您的網頁設計。 請記住，用指向您創建的演示的實際鏈接替換佔位符codepen鏈接。

以上是精美的網絡動畫使用Greensock插件變得容易的詳細內容。更多資訊請關注PHP中文網其他相關文章！