使用 KUTE.js 优化动画性能：第 5 部分，增强缓动函数和属性

王林原创: 2023-09-02 23:09:03 349浏览

到目前为止，在本系列中，您已经学习了如何为不同元素的 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 属性应用了缩放变换，我们在本系列的第三个教程中对此进行了讨论。