Mengoptimumkan Prestasi Animasi dengan KUTE.js: Bahagian 5, Fungsi dan Sifat Pelonggaran Dipertingkat

Setakat ini dalam siri ini, anda telah mempelajari cara menganimasikan sifat CSS bagi elemen berbeza, cara mencipta animasi berkaitan SVG berbeza dan cara menganimasikan kandungan teks unsur berbeza pada halaman web. Satu lagi cara anda boleh menggunakan KUTE.js untuk menghidupkan elemen pada halaman web anda ialah dengan menukar nilai sifat yang berbeza. Ini memerlukan anda memasukkan pemalam sifat dalam projek anda.

Dalam tutorial ini, anda akan belajar cara menggunakan pemalam sifat untuk menghidupkan nilai pelbagai jenis sifat dalam KUTE.js. Kami juga akan membincangkan fungsi pelonggaran berbeza yang boleh digunakan untuk mengawal kelajuan animasi yang berbeza.

Fungsi pelonggaran

Objek dalam kehidupan sebenar jarang bergerak secara linear. Mereka sama ada mempercepatkan atau memperlahankan. Malah pecutan dan nyahpecutan berlaku pada magnitud yang berbeza. Setakat ini, semua animasi kami telah berkembang secara linear. Ia tidak berasa semula jadi sama sekali. Dalam bahagian ini, anda akan mempelajari tentang semua fungsi pelonggaran yang disediakan oleh KUTE.js untuk mengawal kelajuan animasi yang berbeza.

Fungsi pelonggaran teras daripada perpustakaan disertakan dalam enjin teras di luar kotak. Katakan anda ingin menggunakan QuadraticInOut pelonggaran pada animasi. Ini boleh dicapai dengan dua cara: QuadraticInOut 缓动应用于动画。这可以通过两种方式实现：

easing: KUTE.Easing.easingQuadraticInOut
// OR
easing: 'easingQuadraticInOut'

每个缓动函数都有一条独特的曲线，用于确定元素在动画过程中如何加速。 正弦 曲线意味着线性加速度。请记住，这与 线性 缓动函数不同。 linear 函数表示动画的线性速度，而正弦曲线表示动画的线性加速速度。换句话说，动画的速度会线性增加或减少。同样， quadratic 意味着 2 的幂加速，cubic 意味着 3 的幂，quartic 意味着 4 的幂，而 quintic 表示 5 的幂。还有 circular 和 exponential 缓动函数。

您可以将 In、Out 或 InOut 附加到任何缓动函数。值 In 意味着动画将非常缓慢地开始并不断加速直到结束。值 Out 意味着动画将以最大速度开始，然后缓慢减速，直到最后停止。值 InOut 表示动画将在开始时加速，在结束时减速。

您还可以在动画中使用 bounce 和 elastic 缓动函数，并附加 In、Out，或者InOut 到其中任何一个。在下面的演示中，我在不同的圆圈上应用了所有这些缓动函数，以便您可以看到它们如何影响动画的速度。

可能没有一个核心缓动函数能够提供您正在寻找的动画节奏。在这种情况下，您可以将实验分支中的三次贝塞尔函数包含在项目中，并开始使用这些缓动函数。

同样，KUTE.js 还提供了一些从 Dynamics.js 库导入的基于物理的缓动函数。您可以在库的缓动函数页面上阅读有关所有这些缓动函数以及如何正确使用它们的更多信息。

动画属性

SVG 中的属性可以接受数字和字符串作为其值。字符串可以是颜色值或带有单位后缀的数字，例如 px、em 或 %。属性本身的名称也可以由用连字符连接的两个单词组成。牢记这些差异，KUTE.js 为我们提供了不同的方法，可用于指定不同属性的值。

var tween = KUTE.to('selector', {attr: {'r': 100}});
var tween = KUTE.to('selector', {attr: {'r': '10%'}});

var tween = KUTE.to('selector', {attr: {'stroke-width': 10}});
var tween = KUTE.to('selector', {attr: {strokeWidth: 10}});

如您所见，后缀值需要用引号引起来。同样，名称中包含连字符的属性需要用引号括起来或以驼峰形式指定。

无单位属性

许多属性接受无单位值。例如，路径的 行程宽度 可以是无单位的。同样，您不必为 Circle 元素的 r、cx 和 cy

var radiusAnimation = KUTE.allTo(
  "circle",
  {
    attr: { r: 75 }
  },
  {
    repeat: 1,
    yoyo: true,
    offset: 1000,
    easing: 'easingCubicIn'
  }
);

var centerxAnimationA = KUTE.to(
  "#circle-a",
  {
    attr: { cx: 500 }
  },
  {
    repeat: 1,
    yoyo: true,
    easing: 'easingCubicInOut',
  }
);

var centerxAnimationB = KUTE.to(
  "#circle-b",
  {
    attr: { cx: 100 }
  },
  {
    repeat: 1,
    yoyo: true,
    easing: 'easingCubicInOut'
  }
);

var centeryAnimation = KUTE.allTo(
  "circle",
  {
    attr: { cy: 300 }
  },
  {
    repeat: 1,
    yoyo: true,
    offset: 1000,
    easing: 'easingCubicOut'
  }
);

Setiap fungsi pelonggaran mempunyai lengkung unik yang menentukan cara elemen memecut semasa animasi. Lengkung Sine bermaksud pecutan linear. Perlu diingat bahawa ini berbeza daripada fungsi pelonggaran linear. Fungsi linear mewakili kelajuan linear animasi, manakala lengkung sinus mewakili pecutan linear animasi. Dengan kata lain, kelajuan animasi meningkat atau menurun secara linear. Begitu juga, quadratic bermaksud kuasa 2 pecutan, kubik bermaksud kuasa 3 dan kuartik < /code> bermaksud kuasa 4, manakala <code class="inline">quintic bermaksud kuasa 5. Terdapat juga fungsi pelonggaran circular dan exponential.

Anda boleh melampirkan In, Out atau InOut pada mana-mana fungsi pelonggaran. Nilai In bermakna animasi akan bermula dengan perlahan dan terus memecut sehingga tamat. Nilai Keluar bermakna animasi akan bermula pada kelajuan maksimum, kemudian perlahan perlahan-lahan sehingga ia akhirnya berhenti. Nilai InOut bermaksud animasi akan dipercepatkan pada permulaan dan perlahan pada penghujung. 🎜 🎜Anda juga boleh menggunakan bounce dan elastic fungsi pelonggaran dalam animasi dan tambahkan In </code >, <code class="inline">Keluar atau InOut kepada mana-mana daripada mereka. Dalam demo di bawah, saya telah menggunakan semua fungsi pelonggaran ini pada kalangan berbeza supaya anda boleh melihat cara ia mempengaruhi kelajuan animasi. 🎜 🎜🎜 🎜Mungkin tiada fungsi pelonggaran teras yang menyediakan pacing animasi yang anda cari. Dalam kes ini, anda boleh memasukkan fungsi Bezier kubik daripada cawangan Eksperimen dalam projek anda dan mula menggunakan fungsi pelonggaran ini. 🎜 🎜Begitu juga, KUTE.js juga menyediakan beberapa fungsi pelonggaran berasaskan fizik yang diimport daripada perpustakaan Dynamics.js. Anda boleh membaca lebih lanjut tentang semua fungsi pelonggaran ini dan cara menggunakannya dengan betul pada halaman fungsi pelonggaran perpustakaan. 🎜 🎜Sifat animasi🎜 🎜Atribut dalam SVG boleh menerima nombor dan rentetan sebagai nilainya. Rentetan boleh menjadi nilai warna atau nombor dengan akhiran unit, seperti px, em atau %. Nama harta itu sendiri juga boleh terdiri daripada dua perkataan yang dihubungkan dengan tanda sempang. Dengan mengingati perbezaan ini, KUTE.js menyediakan kami kaedah berbeza untuk menentukan nilai sifat yang berbeza. 🎜

rect {
    fill: brown;
}

🎜Seperti yang anda lihat, nilai akhiran perlu disertakan dalam petikan. Begitu juga, hartanah dengan tanda sempang dalam nama mereka perlu disertakan dalam petikan atau dinyatakan dalam camelCase. 🎜 🎜Atribut tanpa unit🎜 🎜Banyak hartanah menerima nilai tanpa unit. Sebagai contoh, run-width laluan boleh menjadi tanpa unit. Begitu juga, anda tidak perlu menentukan r, cx dan cy</code > atribut untuk elemen Bulatan Tentukan unit. Anda boleh menggunakan pemalam sifat untuk menghidupkan semua sifat ini dari satu nilai ke nilai yang lain. 🎜 🎜Sekarang anda tahu cara menggunakan fungsi pelonggaran yang berbeza, anda akan dapat menghidupkan sifat yang berbeza pada kelajuan yang berbeza. Berikut adalah contoh: 🎜 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">var radiusAnimation = KUTE.allTo( &quot;circle&quot;, { attr: { r: 75 } }, { repeat: 1, yoyo: true, offset: 1000, easing: 'easingCubicIn' } ); var centerxAnimationA = KUTE.to( &quot;#circle-a&quot;, { attr: { cx: 500 } }, { repeat: 1, yoyo: true, easing: 'easingCubicInOut', } ); var centerxAnimationB = KUTE.to( &quot;#circle-b&quot;, { attr: { cx: 100 } }, { repeat: 1, yoyo: true, easing: 'easingCubicInOut' } ); var centeryAnimation = KUTE.allTo( &quot;circle&quot;, { attr: { cy: 300 } }, { repeat: 1, yoyo: true, offset: 1000, easing: 'easingCubicOut' } ); </pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p>第一个补间使用我们在第一个教程中讨论的 <code class="inline">allTo() 方法同时对两个圆的半径进行动画处理。如果设置为 true，则 yoyo 属性以相反方向播放动画。

两个圆圈的 cx 属性分别进行动画处理。然而，它们都是由同一个按钮点击触发的。最后，两个圆圈的 cy 属性同时以 1000 毫秒的 offset 进行动画处理。

颜色属性

从版本 1.5.7 开始，KUTE.js 中的属性插件还允许您对 fill、行程 和 stopColor 进行动画处理属性。您可以使用有效的颜色名称或颜色的十六进制值。您还可以提供 RGB 或 HSL 格式的颜色值。

您必须记住的一件重要的事情是，只有当您没有在 CSS 中设置这些属性的值时，动画才会起作用。在下面的演示中，如果我在演示中添加了以下 CSS，则 fill 颜色根本不会有动画效果。

rect {
    fill: brown;
}

我创建的演示非常基础，但您可以通过应用变换和使用更多颜色使其变得更有趣。

后缀属性

许多 SVG 属性，例如 r 和 行程宽度 可以使用或不使用后缀。例如，您可以将 r 的值设置为 10 等数字或 10em 等 em 单位。有一些属性，例如用于颜色停止的 offset 属性，始终要求您添加后缀。在 KUTE.js 中为后缀属性指定值时，请始终确保将该值括在引号内。

在下面的示例中，我对渐变中第一个停止点的偏移值和第二个停止点的颜色进行了动画处理。由于 offset 需要后缀，因此我将值括在引号内。

var offsetAnimation = KUTE.allTo(
  ".stop1",
  {
    attr: { offset: '90%'}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

var colorAnimation = KUTE.allTo(
  ".stop2",
  {
    attr: { stopColor: 'black'}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

var scaleAnimation = KUTE.allTo(
  "circle",
  {
    svgTransform: { scale: 2}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

演示中有三种不同的渐变，每个渐变都有两个颜色停止点，其类名称为 stop1 和 stop2。我还使用 svgTransform 属性应用了缩放变换，我们在本系列的第三个教程中对此进行了讨论。

最终想法

在本教程中，您了解了 KUTE.js 中提供的不同缓动函数以及如何使用它们来控制自己的动画的速度。您还学习了如何为不同类型的属性设置动画。

我试图在本系列中涵盖 KUTE.js 的所有重要方面。这应该足以帮助您在自己的项目中自信地使用 KUTE.js。您还可以阅读文档以了解有关该库的更多信息。

我还建议您仔细阅读源代码并了解该库的实际工作原理。如果您有任何与本教程相关的问题或提示，请随时在评论中分享。

Atas ialah kandungan terperinci Mengoptimumkan Prestasi Animasi dengan KUTE.js: Bahagian 5, Fungsi dan Sifat Pelonggaran Dipertingkat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!