Gunakan KUTE.js dengan cekap untuk animasi: Bahagian 3, animasi SVG

Tutorial sebelumnya dalam siri ini menunjukkan kepada anda cara menganimasikan sifat CSS yang berbeza bagi mana-mana elemen menggunakan KUTE.js. Walau bagaimanapun, enjin teras tidak membenarkan anda menghidupkan sifat khusus untuk elemen SVG. Begitu juga, anda tidak boleh menggunakan pukulan untuk menghidupkan ubah bentuk SVG ke dalam bentuk laluan yang berbeza atau lukisan elemen SVG yang berbeza. Anda mesti menggunakan pemalam KUTE.js SVG untuk menyelesaikan tugasan ini.

Sebelum anda mula, sila ingat bahawa anda mesti memasukkan enjin teras KUTE.js dan pemalam SVG agar contoh dalam tutorial ini berfungsi dengan baik.

Bentuk SVG yang cacat

Menubah satu bentuk SVG kepada bentuk lain ialah ciri yang sangat biasa yang akan anda temui. Pemalam KUTE.js SVG memberikan kami semua yang kami perlukan untuk mencipta animasi morphing kami sendiri dengan mudah.

Anda boleh mengubah bentuk bentuk SVG dalam tiga cara menggunakan perpustakaan ini:

1. Anda boleh menggunakan kaedah fromTo() untuk menentukan laluan SVG awal dan akhir sesuatu elemen.
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：正如您可能已经猜到的，此选项允许您指定变形的精度或准确度。它被指定为一个数字，值越小精度越高。请记住，更高的精度会带来更高的准确度，但也会损害性能。当您处理 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 设置为 trueAnda juga boleh menggunakan kaedah to() dan elakkan daripada menentukan laluan awal. Dalam kes ini, nilai permulaan transformasi akan ditentukan berdasarkan nilai atribut d bagi elemen yang dipilih untuk diubah.

Terdapat juga pilihan untuk melepasi laluan akhir sebagai rentetan terus ke tween. Dengan cara ini anda mengelak daripada mempunyai dua laluan berbeza dalam SVG anda.

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

Semasa permulaan, perpustakaan mengambil contoh beberapa perkara berdasarkan laluan yang kami sediakan. Titik ini kemudiannya disimpan dalam dua tatasusunan berbeza. Akhirnya, tatasusunan ini digunakan untuk interpolasi. Anda boleh mengkonfigurasi banyak pilihan untuk mengawal tingkah laku ubah bentuk laluan yang berbeza. morphPrecision: Seperti yang anda duga, pilihan ini membolehkan anda menentukan ketepatan atau ketepatan morph. Ia dinyatakan sebagai nombor, dengan nilai yang lebih kecil memberikan ketepatan yang lebih besar. Perlu diingat bahawa lebih ketepatan membawa kepada ketepatan yang lebih tinggi, tetapi ia juga menjejaskan prestasi. Apabila anda berurusan dengan poligon yang atribut dnya hanya mengandungi h, l dan v Pilihan ini tidak digunakan pada bentuk atau laluan. Dalam kes ini, laluan poligon asal akan digunakan dan bukannya mensampel laluan baharu.

reverseFirstPath: Anda boleh menetapkan nilai pilihan ini kepada true untuk membalikkan laluan lukisan bentuk pertama. Nilai lalainya ialah false.

reverseSecondPath: Anda boleh menetapkan nilai pilihan ini kepada true untuk membalikkan laluan cabutan bagi bentuk kedua. Nilai lalainya juga false.

morphIndex: Kadangkala titik pada laluan mungkin perlu menempuh jarak yang jauh semasa proses ubah bentuk. Anda boleh mengawal tingkah laku ini menggunakan parameter morphIndex. Apabila dinyatakan, parameter ini membolehkan anda memutarkan laluan terakhir supaya semua titik bergerak pada jarak yang paling singkat.

Mari gunakan apa yang telah kita pelajari setakat ini untuk menukar ikon bateri menjadi ikon penanda halaman. Anda harus ambil perhatian bahawa saya menggunakan huruf kecil l untuk menentukan laluan relatif. Ini adalah tag yang diperlukan:

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

JavaScript berikut mencipta objek tween dan memulakan animasi apabila butang diklik: Berikut ialah demo yang menunjukkan kod di atas dalam tindakan. Saya juga menambah elemen tambahan yang mana animasi transformasi menetapkan reverseFirstPath kepada true. Ini akan membantu anda memahami kesan keseluruhan pilihan konfigurasi yang berbeza pada ubah bentuk. Tempoh animasi telah ditetapkan kepada 5 saat supaya anda boleh melihat dengan teliti kedua-dua animasi dan melihat perbezaannya.

🎜Dalam contoh sebelumnya, laluan utama tidak mempunyai sebarang sub-laluan. Ini menjadikan ubah bentuk sangat mudah. Walau bagaimanapun, ini mungkin tidak selalu berlaku. 🎜 🎜Mari tambahkan sub-laluan tambahan pada penanda halaman bersama-sama dengan ikon bateri. Jika anda menukar ikon sekarang, anda akan melihat bahawa hanya sublaluan pertama dianimasikan. Subpath kedua hilang apabila animasi bermula dan muncul semula apabila animasi tamat. Dalam kes ini, satu-satunya cara untuk menghidupkan semua laluan kecil ialah menukar laluan kecil kepada laluan berasingan. Berikut adalah contoh: 🎜 rrreee 🎜🎜🎜🎜 🎜Animasi SVG Strokes🎜 🎜Satu lagi kesan animasi berkaitan SVG yang popular melibatkan lukisan bentuk yang dipratentukan dari awal menggunakan pukulan SVG. Ini boleh digunakan untuk menghidupkan lukisan logo atau objek lain. Dalam bahagian ini, anda akan belajar cara mencipta animasi mengusap untuk ikon basikal Font Awesome menggunakan 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 插件的更多信息。

Atas ialah kandungan terperinci Gunakan KUTE.js dengan cekap untuk animasi: Bahagian 3, animasi SVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!