高效率使用KUTE.js進行動畫：第三部分，SVG動畫化

本系列的上一篇教學向您展示如何使用 KUTE.js 對任何元素的不同 CSS 屬性進行動畫處理。但是，核心引擎不允許您對特定於 SVG 元素的屬性進行動畫處理。同樣，您無法使用筆畫對不同路徑形狀的 SVG 變形或不同 SVG 元素的繪製進行動畫處理。您必須使用 KUTE.js SVG 外掛程式來完成這些任務。

在開始之前，請記住，您必須包含 KUTE.js 核心引擎和 SVG 插件才能使本教程中的範例正常運作。

變形 SVG 形狀

將一種 SVG 形狀變形為另一種形狀是您會遇到的一項非常常見的功能。 KUTE.js SVG 外掛程式為我們提供了輕鬆創建自己的變形動畫所需的一切。

使用此函式庫可以透過三種方式變形 SVG 形狀：

1. 您可以使用 fromTo() 方法來指定元素的初始和最終 SVG 路徑。
2. 您也可以使用 to() 方法並避免指定初始路徑。在這種情況下，變形的起始值將根據要變形的所選元素的 d 屬性的值來決定。
3. 還有一個選項是將最終路徑直接作為字串傳遞給補間。這樣，您就可以避免 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 id="bookmark-a"
      d="M70,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z"/>

以下 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 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"/>
 
<!-- 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 id="battery-b2" 
      d="M270,30 l60,65 l-10,-65 l60,65z"/>
<path id="bookmark-b1"
      d="M270,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z"/>
<path id="bookmark-b2"
      d="M280,80 l30,-45 l30,45 l0,0z"/>

動畫 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 插件的更多信息。

以上是高效率使用KUTE.js進行動畫：第三部分，SVG動畫化的詳細內容。更多資訊請關注PHP中文網其他相關文章！