使用 KUTE.js 最佳化動畫效能：第 5 部分，增強緩動函數和屬性

到目前為止，在本系列中，您已經學習如何為不同元素的CSS 屬性設定動畫、如何建立不同的SVG 相關動畫，以及如何為網頁上不同元素的文字內容設定動畫。您也可以透過另一種方式使用 KUTE.js 對網頁上的元素進行動畫處理，那就是更改不同屬性的值。這需要您在專案中包含屬性插件。

在本教學中，您將學習如何使用屬性外掛程式為 KUTE.js 中不同類型屬性的值設定動畫。我們還將討論可用於控制不同動畫速度的不同緩動函數。

緩動函數

現實生活中的物體很少線性移動。它們要么加速，要么減速。甚至加速和減速也以不同的幅度發生。到目前為止，我們所有的動畫都是線性進展的。這感覺一點也不自然。在本節中，您將了解 KUTE.js 提供的所有用於控制不同動畫速度的緩動函數。

函式庫中的核心緩動函數包含在開箱即用的核心引擎中。假設您想要將 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'
  }
);

第一个补间使用我们在第一个教程中讨论的 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。您还可以阅读文档以了解有关该库的更多信息。

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

以上是使用 KUTE.js 最佳化動畫效能：第 5 部分，增強緩動函數和屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！