高效使用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 插件的更多信息。