Efficiently use KUTE.js for animation: Part 3, SVG animation

The previous tutorial in this series showed you how to use KUTE.js to animate different CSS properties of any element. However, the core engine does not allow you to animate properties specific to SVG elements. Likewise, you cannot use strokes to animate the deformation of SVG into different path shapes or the drawing of different SVG elements. You must use the KUTE.js SVG plugin to accomplish these tasks.

Before you begin, please remember that you must include the KUTE.js core engine and the SVG plugin for the examples in this tutorial to work properly.

Deformed SVG Shape

Morphing one SVG shape into another is a very common feature you'll encounter. The KUTE.js SVG plugin gives us everything we need to easily create our own morphing animations.

You can deform SVG shapes in three ways using this library:

1. You can use the fromTo() method to specify the initial and final SVG path of an element.
2. You can also use the to() method and avoid specifying the initial path. In this case, the starting value of the transformation will be determined based on the value of the d attribute of the selected element to be transformed.
3. There is also an option to pass the final path as a string directly to the tween. This way you avoid having two different paths in your 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.' });

During initialization, the library samples some points based on the path we provide. These points are then stored in two different arrays. Finally, these arrays are used for interpolation. You can configure many options to control the deformation behavior of different paths.

• morphPrecision: As you might have guessed, this option allows you to specify the precision or accuracy of the morph. It is specified as a number, with smaller values ​​providing greater precision. Keep in mind that more precision leads to greater accuracy, but it also hurts performance. This option does not apply when you are dealing with polygonal shapes or paths whose d attributes contain only h, l, and v. In this case, the original polygon path will be used instead of sampling a new path.
• reverseFirstPath: You can set the value of this option to true to reverse the drawing path of the first shape. Its default value is false.
• reverseSecondPath: You can set the value of this option to true to reverse the drawing path of the second shape. Its default value is also false.
• morphIndex: Sometimes, points on a path may need to cover a long distance during the morphing process. You can control this behavior using the morphIndex parameter. When specified, this parameter allows you to rotate the final path so that all points move the shortest possible distance.

Let’s use what we’ve learned so far to turn the battery icon into a bookmark icon. You should note that I use lowercase l to specify relative paths. This is the required tag:

<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"/>

The following JavaScript creates a tween object and starts the animation when the button is clicked:

var morphA = KUTE.to(
    '#battery-a', 
    { path: '#bookmark-a' },
    { duration: 5000 }
);

startButton.addEventListener(
  "click",
  function() {
    morphA.start();
  },
  false
);

This is a demo showing the above code in action. I also added an extra element where the transformation animation sets reverseFirstPath to true. This will help you understand the overall impact of different configuration options on deformation. The animation duration has been set to 5 seconds so that you can look closely at the two animations and notice the differences.

In the previous example, the main path did not have any subpaths. This makes deformation very simple. However, this may not always be the case.

Let's add an extra sub-path to the bookmark along with the battery icon. If you change the icon now, you will see that only the first subpath is animated. The second subpath disappears at the beginning of the animation and reappears at the end of the animation. In this case, the only way to animate all subpaths is to change the subpaths into separate paths. Here is an example:

<!-- 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"/>

Animated SVG Stroke

Another popular SVG-related animation effect involves drawing a predefined shape from scratch using SVG strokes. This can be used to animate the drawing of logos or other objects. In this section, you'll learn how to create a stroking animation for the Font Awesome bicycle icon using KUTE.js.

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

The above is the detailed content of Efficiently use KUTE.js for animation: Part 3, SVG animation. For more information, please follow other related articles on the PHP Chinese website!