本系列的上一篇教程向您展示了如何使用 KUTE.JS 對任何元素的不同 css 屬性進行動畫處理。但是，核心引擎不允許您對特定于 SVG 元素的屬性進行動畫處理。同樣，您無法使用筆畫對不同路徑形狀的 SVG 變形或不同 SVG 元素的繪制進行動畫處理。您必須使用 KUTE.js SVG 插件來完成這些任務。
在開始之前，請記住，您必須包含 KUTE.js 核心引擎和 SVG 插件才能使本教程中的示例正常工作。
變形 SVG 形狀
將一種 SVG 形狀變形為另一種形狀是您會遇到的一項非常常見的功能。 KUTE.js SVG 插件為我們提供了輕松創建自己的變形動畫所需的一切。
使用此庫可以通過三種方式變形 SVG 形狀：
- 您可以使用 fromTo() 方法來指定元素的初始和最終 SVG 路徑。
- 您還可以使用 to() 方法并避免指定初始路徑。在這種情況下，變形的起始值將根據要變形的所選元素的 d 屬性的值確定。
- 還有一個選項是將最終路徑作為字符串直接傳遞給補間。這樣，您就可以避免 SVG 中有兩個不同的路徑。
KUTE.fromTo('#shape-a', {path: '#shape-a' }, { path: '#shape-b' }); KUTE.to('#shape-a', { path: '#shape-b' }); KUTE.fromTo('#shape-a', {path: '#shape-a' }, { path: 'The path of #shape-b as a valid string.' }); KUTE.to('#shape-a', { path: 'The path of #shape-b as a valid string.' });
在初始化期間，庫根據我們提供的路徑對一些點進行采樣。然后將這些點存儲在兩個不同的數組中。最后，這些數組用于插值。您可以配置許多選項來控制不同路徑的變形行為。
- morphPrecision：正如您可能已經猜到的，此選項允許您指定變形的精度或準確度。它被指定為一個數字，值越小精度越高。請記住，更高的精度會帶來更高的準確度，但也會損害性能。當您處理 d 屬性僅包含 h、l 和 v 的多邊形形狀或路徑時，此選項不適用。在這種情況下，將使用原始多邊形路徑而不是采樣新路徑。
- reverseFirstPath：您可以將此選項的值設置為 true 以反轉第一個形狀的繪制路徑。它的默認值為 false。
- reverseSecondPath：您可以將此選項的值設置為 true 以反轉第二個形狀的繪制路徑。它的默認值也是 false。
- morphIndex：有時，路徑上的點在變形過程中可能需要覆蓋很長的距離。您可以使用 morphIndex 參數控制此行為。指定后，此參數允許您旋轉最終路徑，使所有點都移動盡可能短的距離。
讓我們利用到目前為止所學到的知識將電池圖標變成書簽圖標。您應該注意，我使用小寫的 l 來指定相對路徑。這是所需的標記：
<path id="battery-a" d="M50,10 l150,0 l0,25 l20,0 l0,50 l-20,0 l0,25 l-150,0 l0,-100z"></path><path id="bookmark-a" d="M70,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z"></path>
以下 JavaScript 創建補間對象并在單擊按鈕時啟動動畫：
var morphA = KUTE.to( '#battery-a', { path: '#bookmark-a' }, { duration: 5000 } ); startButton.addEventListener( "click", function() { morphA.start(); }, false );
這是一個演示，顯示了上述代碼的實際運行情況。我還添加了一個額外的元素，其中變形動畫將 reverseFirstPath 設置為 true。這將幫助您了解不同配置選項對變形的總體影響。動畫持續時間已設置為 5 秒，以便您可以仔細觀察兩個動畫并發現差異。
在前面的示例中，主路徑沒有任何子路徑。這使得變形變得非常簡單。然而，情況可能并非總是如此。
讓我們向書簽添加一個額外的子路徑以及電池圖標。如果現在改變圖標，您將看到只有第一個子路徑有動畫。第二個子路徑在動畫開始時消失并在動畫結束時重新出現。在這種情況下，對所有子路徑進行動畫處理的唯一方法是將子路徑更改為單獨的路徑。這是一個例子：
<!-- Before --> <path id="battery-a" d="M50,10 l150,0 l0,25 l20,0 l0,50 l-20,0 l0,25 l-150,0 l0,-100z M70,30 l60,65 l-10,-65 l60,65z"></path><path id="bookmark-a" d="M70,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z M80,80 l30,-45 l30,45 l0,0z"></path><!-- After --><path id="battery-b1" d="M250,10 l150,0 l0,25 l20,0 l0,50 l-20,0 l0,25 l-150,0 l0,-100z"></path><path id="battery-b2" d="M270,30 l60,65 l-10,-65 l60,65z"></path><path id="bookmark-b1" d="M270,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z"></path><path id="bookmark-b2" d="M280,80 l30,-45 l30,45 l0,0z"></path>
動畫 SVG 筆畫
另一種流行的與 SVG 相關的動畫效果包括從無到有，然后使用 SVG 筆畫繪制預定義的形狀。這可用于對徽標或其他對象的繪制進行動畫處理。在本節中，您將學習如何使用 KUTE.js 為 Font Awesome 自行車圖標創建撫摸動畫。
在 KUTE.js 中可以通過三種方式對 SVG 筆畫進行動畫處理。您可以通過將 fromTo 值設置為 0% 0% 和 0% 100% 來設置從 0% 到 100% 的動畫。您還可以通過將值設置為 0% 5% 和 95% 100% 等值來繪制 SVG 形狀的一部分。最后，您可以將結束值設置為0% 0%，以創建擦除效果而不是繪圖效果。
這是我用來為自行車設置動畫的 JavaScript 代碼：
var wholeAnimation = KUTE.fromTo( "#icon", { draw: "0% 0%" }, { draw: "0% 100%" }, { duration: 10000} ); var partialAnimation = KUTE.fromTo( "#icon", { draw: "0% 5%" }, { draw: "95% 100%" }, { duration: 10000} ); var eraseAnimation = KUTE.fromTo( "#icon", { draw: "0% 100%" }, { draw: "0% 0%" }, { duration: 5000} );
正如您在下面的示例中看到的，您無需擔心路徑內的多個子路徑。 KUTE.js 單獨為所有這些子路徑設置動畫，沒有任何問題。動畫持續時間用于確定最長路徑的動畫時間。然后根據其余子路徑的長度確定其筆畫持續時間。
動畫 SVG 變換
我們已經在本系列的第二個教程中學習了如何對 CSS 變換值進行動畫處理。 KUTE.js SVG 插件還允許您使用 svgTransform 屬性來旋轉、平移、縮放或傾斜網頁上的不同 SVG 元素。
rotate 屬性接受確定旋轉角度的單個值。默認情況下，旋轉發生在元素的中心點周圍，但您可以使用 transformOrigin 屬性指定新的旋轉中心。
translate 屬性接受格式為 translate: [x, y] 或 translate: x 的值。當提供單個值時，y 的值假定為零。
當傾斜元素時，您必須使用 skewX 和 skewY。 SVG 中不支持 skew[x, y]。同樣，scale 屬性也只接受一個值。相同的值用于在 x 和 y 方向上縮放元素。
下面是一個代碼片段，它將所有這些轉換應用于矩形和圓形。
var rotation = KUTE.allTo( "rect, circle", { svgTransform: { rotate: 360 } }, { repeat: 1, yoyo: true } ); var scaling = KUTE.allTo( "rect, circle", { svgTransform: { scale: 1.5 } }, { repeat: 1, yoyo: true } ); var translation = KUTE.allTo( "rect, circle", { svgTransform: { translate: [100, -50] } }, { repeat: 1, yoyo: true } ); var skewing = KUTE.allTo( "rect, circle", { svgTransform: { skewX: 25 } }, { repeat: 1, yoyo: true } );
我已將 yoyo 參數設置為 true?，以便在反向播放動畫后，變換屬性將設置為其初始值。這樣，我們就可以通過單擊按鈕來一次又一次地重播動畫。
如果您在演示中按下旋轉按鈕，您會發現它似乎對圓圈沒有任何影響。要觀察圓的旋轉，您必須對其應用傾斜變換以更改其形狀，然后立即單擊“旋轉”。
最終想法
本教程首先介紹了 SVG 變形和描邊動畫的基礎知識。您學習了如何正確變形具有子路徑的復雜路徑，以及如何通過為 draw 屬性選擇正確的值來創建擦除描邊效果而不是繪圖效果。之后，我們討論了如何使用 svgTransform 屬性來為不同的變換設置動畫。
在各種教程中，我們已經看到 JavaScript 變得多么強大。它并非沒有學習曲線，而且還有大量的框架和庫可以讓您忙碌起來。如果您正在尋找其他資源來學習或在工作中使用，請查看我們在 Envato Market 上提供的資源。
本教程旨在向您介紹 KUTE.js SVG 插件的所有功能并幫助您快速入門。您可以通過閱讀文檔了解有關 SVG 插件的更多信息。
