Nutzen Sie KUTE.js effizient für Animationen: Teil 3, SVG-Animation

Das vorherige Tutorial dieser Serie hat Ihnen gezeigt, wie Sie mit KUTE.js verschiedene CSS-Eigenschaften eines beliebigen Elements animieren. Die Kern-Engine ermöglicht es Ihnen jedoch nicht, Eigenschaften speziell für SVG-Elemente zu animieren. Ebenso können Sie Striche nicht verwenden, um die Verformung von SVG in verschiedene Pfadformen oder das Zeichnen verschiedener SVG-Elemente zu animieren. Um diese Aufgaben auszuführen, müssen Sie das SVG-Plugin KUTE.js verwenden.

Bevor Sie beginnen, denken Sie bitte daran, dass Sie die KUTE.js-Kern-Engine und das SVG-Plugin einbinden müssen, damit die Beispiele in diesem Tutorial ordnungsgemäß funktionieren.

Verformte SVG-Formen

Das Umwandeln einer SVG-Form in eine andere ist eine sehr häufige Funktion, auf die Sie stoßen werden. Das KUTE.js SVG-Plugin bietet uns alles, was wir brauchen, um ganz einfach unsere eigenen Morphing-Animationen zu erstellen.

Mit dieser Bibliothek können Sie SVG-Formen auf drei Arten verformen:

1. Mit der fromTo()-Methode können Sie den anfänglichen und endgültigen SVG-Pfad von Elementen angeben.
2. Sie können die Bestimmung auch über den Wert des Attributs to() 方法并避免指定初始路径。在这种情况下，变形的起始值将根据要变形的所选元素的 d vornehmen.
3. Es besteht auch die Möglichkeit, den endgültigen Pfad als String direkt an das Tween zu übergeben. Auf diese Weise vermeiden Sie, dass in Ihrer SVG-Datei zwei unterschiedliche Pfade vorhanden sind.

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.' });

Während der Initialisierung tastet die Bibliothek einige Punkte basierend auf dem von uns bereitgestellten Pfad ab. Diese Punkte werden dann in zwei verschiedenen Arrays gespeichert. Schließlich werden diese Arrays zur Interpolation verwendet. Sie können viele Optionen konfigurieren, um das Verformungsverhalten verschiedener Pfade zu steuern.

• morphPrecision：正如您可能已经猜到的，此选项允许您指定变形的精度或准确度。它被指定为一个数字，值越小精度越高。请记住，更高的精度会带来更高的准确度，但也会损害性能。当您处理 d 属性仅包含 h、l 和 v Diese Option gilt nicht für polygonale Formen oder Pfade. In diesem Fall wird der ursprüngliche Polygonpfad verwendet, anstatt einen neuen Pfad abzutasten.
• reverseFirstPath：您可以将此选项的值设置为 true 以反转第一个形状的绘制路径。它的默认值为 false.
• reverseSecondPath：您可以将此选项的值设置为 true 以反转第二个形状的绘制路径。它的默认值也是 false.
• morphIndex：有时，路径上的点在变形过程中可能需要覆盖很长的距离。您可以使用 morphIndex Parameter steuern dieses Verhalten. Wenn dieser Parameter angegeben ist, können Sie den endgültigen Pfad so drehen, dass sich alle Punkte auf dem kürzesten möglichen Weg bewegen.

Lassen Sie uns das, was wir bisher gelernt haben, nutzen, um das Batteriesymbol in ein Lesezeichensymbol umzuwandeln. Bitte beachten Sie, dass ich zur Angabe relativer Pfade Kleinbuchstaben l verwende. Dies ist das erforderliche 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"/>

Das folgende JavaScript erstellt ein Tween-Objekt und startet die Animation, wenn auf die Schaltfläche geklickt wird:

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

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

Hier ist eine Demo, die den obigen Code in Aktion zeigt. Ich habe auch ein zusätzliches Element hinzugefügt, wo die Transformationsanimation sein wird reverseFirstPath 设置为 true. Dies wird Ihnen helfen, die Gesamtauswirkungen verschiedener Konfigurationsoptionen auf die Verformung zu verstehen. Die Animationsdauer wurde auf 5 Sekunden eingestellt, damit Sie die beiden Animationen genau betrachten und die Unterschiede erkennen können.

Im vorherigen Beispiel hatte der Hauptpfad keine Unterpfade. Dadurch ist eine Verformung sehr einfach. Dies ist jedoch möglicherweise nicht immer der Fall.

Fügen wir zusammen mit dem Batteriesymbol einen zusätzlichen Unterpfad zum Lesezeichen hinzu. Wenn Sie jetzt das Symbol ändern, sehen Sie, dass nur der erste Unterpfad animiert ist. Der zweite Unterpfad verschwindet zu Beginn der Animation und erscheint am Ende der Animation wieder. In diesem Fall besteht die einzige Möglichkeit, alle Unterpfade zu animieren, darin, die Unterpfade in separate Pfade umzuwandeln. Hier ein Beispiel:

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

Animierte SVG-Striche

Ein weiterer beliebter SVG-bezogener Animationseffekt besteht darin, mithilfe von SVG-Strichen eine vordefinierte Form von Grund auf zu zeichnen. Damit lässt sich die Zeichnung von Logos oder anderen Objekten animieren. In diesem Abschnitt erfahren Sie, wie Sie mit KUTE.js eine Streichanimation für das Font Awesome-Fahrradsymbol erstellen.

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

Das obige ist der detaillierte Inhalt vonNutzen Sie KUTE.js effizient für Animationen: Teil 3, SVG-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!