使用KUTE.js制作高性能动画：第3部分(动画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：您可能已经猜到了，此选项允许您指定变形的精度或准确度。它被指定为一个数字，较低的值意味着较高的精度。请记住，更高的精度会带来更高的准确性，但也会对性能不利。h当您处理 d 属性仅由、 l和组成的多边形形状或路径时，此选项不适用v。在这种情况下，将使用原始多边形路径而不是采样新路径。

• reverseFirstPath：您可以将此选项的值设置为true以反转您的第一个形状的绘图路径。它的默认值为false.

• reverseSecondPath：您可以将此选项的值设置为true以反转第二个形状的绘图路径。它的默认值也是false.

• morphIndex：有时，路径上的点在变形过程中可能需要覆盖很长的距离。morphIndex您可以使用参数控制此行为。指定后，此参数允许您旋转最终路径，以使所有点移动的距离尽可能短。

让我们使用到目前为止所学的知识将电池图标变成书签图标。您应该注意，我使用小写字母l以相对术语指定路径。这是必需的d 标记：

<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 插件还允许您使用该属性来旋转、平移、缩放或倾斜网页上的不同 SVG 元素。svgtransform

该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属性来为不同的变换设置动画。