Utiliser efficacement KUTE.js pour l'animation : partie 3, animation SVG

Le tutoriel précédent de cette série vous a montré comment animer différentes propriétés CSS de n'importe quel élément à l'aide de KUTE.js. Cependant, le moteur principal ne permet pas d'animer les propriétés spécifiques aux éléments SVG. De même, vous ne pouvez pas utiliser de traits pour animer la déformation de SVG en différentes formes de chemin ou le dessin de différents éléments SVG. Vous devez utiliser le plugin SVG KUTE.js pour accomplir ces tâches.

Avant de commencer, n'oubliez pas que vous devez inclure le moteur principal KUTE.js et le plugin SVG pour que les exemples de ce didacticiel fonctionnent correctement.

Formes SVG déformées

Transformer une forme SVG en une autre est une fonctionnalité très courante que vous rencontrerez. Le plugin KUTE.js SVG nous donne tout ce dont nous avons besoin pour créer facilement nos propres animations de morphing.

Vous pouvez déformer les formes SVG de trois manières en utilisant cette bibliothèque :

1. Vous pouvez utiliser la méthode fromTo() pour spécifier les chemins SVG initial et final des éléments.
2. Vous pouvez également déterminer en utilisant la valeur de l'attribut to() 方法并避免指定初始路径。在这种情况下，变形的起始值将根据要变形的所选元素的 d.
3. Il existe également une option pour transmettre le chemin final sous forme de chaîne directement à l'interpolation. De cette façon, vous évitez d’avoir deux chemins différents dans votre 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.' });

Lors de l'initialisation, la bibliothèque échantillonne certains points en fonction du chemin que nous fournissons. Ces points sont ensuite stockés dans deux tableaux différents. Enfin, ces tableaux sont utilisés pour l'interpolation. Vous pouvez configurer de nombreuses options pour contrôler le comportement de déformation des différentes trajectoires.

• morphPrecision：正如您可能已经猜到的，此选项允许您指定变形的精度或准确度。它被指定为一个数字，值越小精度越高。请记住，更高的精度会带来更高的准确度，但也会损害性能。当您处理 d 属性仅包含 h、l 和 v Cette option ne s'applique pas aux formes ou aux chemins polygonaux. Dans ce cas, le chemin du polygone d'origine sera utilisé au lieu d'échantillonner un nouveau chemin.
• reverseFirstPath：您可以将此选项的值设置为 true 以反转第一个形状的绘制路径。它的默认值为 false.
• reverseSecondPath：您可以将此选项的值设置为 true 以反转第二个形状的绘制路径。它的默认值也是 false.
• morphIndex：有时，路径上的点在变形过程中可能需要覆盖很长的距离。您可以使用 morphIndex les paramètres contrôlent ce comportement. Lorsqu'il est spécifié, ce paramètre vous permet de faire pivoter le chemin final afin que tous les points se déplacent sur la distance la plus courte possible.

Utilisons ce que nous avons appris jusqu'à présent pour transformer l'icône de la batterie en icône de signet. Vous devez noter que j'utilise des minuscules l pour spécifier des chemins relatifs. Voici la balise obligatoire :

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

Le JavaScript suivant crée un objet interpolation et démarre l'animation lorsque vous cliquez sur le bouton :

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

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

Voici une démo montrant le code ci-dessus en action. J'ai également ajouté un élément supplémentaire où sera l'animation de transformation reverseFirstPath 设置为 true. Cela vous aidera à comprendre l'impact global des différentes options de configuration sur la déformation. La durée de l'animation a été fixée à 5 secondes afin que vous puissiez regarder de près les deux animations et remarquer les différences.

Dans l'exemple précédent, le chemin principal ne comportait aucun sous-chemin. Cela rend la déformation très simple. Cependant, cela n’est pas toujours le cas.

Ajoutons un sous-chemin supplémentaire au signet avec l'icône de la batterie. Si vous changez l'icône maintenant, vous verrez que seul le premier sous-chemin est animé. Le deuxième sous-chemin disparaît lorsque l'animation démarre et réapparaît lorsque l'animation se termine. Dans ce cas, la seule façon d’animer tous les sous-tracés consiste à transformer les sous-tracés en chemins distincts. Voici un exemple :

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

Traits SVG animés

Un autre effet d'animation populaire lié au SVG consiste à dessiner une forme prédéfinie à partir de zéro à l'aide de traits SVG. Cela peut être utilisé pour animer le dessin de logos ou d’autres objets. Dans cette section, vous apprendrez à créer une animation de trait pour l'icône de vélo Font Awesome à l'aide de 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 插件的更多信息。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!