使用KUTE.js的表演动画：第3部分，SVG动画

最新推荐文章于 2024-10-14 00:00:00 发布

cunjie3951

最新推荐文章于 2024-10-14 00:00:00 发布

阅读量232

点赞数

文章标签： java css javascript 编程语言大数据 ViewUI

该系列的上一教程向您展示了如何使用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 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以便在反向播放动画之后，将transform属性设置为其初始值。这样，我们可以通过单击按钮来一次又一次地回放动画。

如果在演示中按“ 旋转”按钮，您会注意到它似乎对圆没有任何影响。要观察圆的旋转，您必须对其应用偏斜变换以更改其形状，然后立即单击“旋转”。