使用KUTE.js的高性能动画：第5部分，简化函数和属性

到目前为止，在本系列中，您已经学习了如何为不同元素CSS属性设置动画 ，如何创建与SVG相关的不同动画 ，以及如何为网页上的不同元素的文本内容设置动画 。 还有另一种方法，您可以使用KUTE.js对网页上的元素进行动画处理，即更改不同属性的值。 这要求您在项目中包括属性插件 。

在本教程中，您将学习如何使用属性插件为KUTE.js中的各种属性的值设置动画。 我们还将讨论可用于控制不同动画速度的不同缓动功能。

缓动功能

现实生活中的物体很少线性移动。 它们正在加速或减速。 甚至加速和减速也以不同的幅度发生。 到目前为止，我们所有的动画都呈线性增长。 这一点都不自然。 在本节中，您将学习KUTE.js提供的所有缓动功能，用于控制不同动画的速度。

库中的核心缓动功能开箱即用包含在核心引擎中。 假设您要对动画应用QuadraticInOut缓动。 这可以通过两种方式实现：

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

每个缓动功能都有一个独特的曲线，用于确定元素在动画期间如何加速。 sinusoidal曲线表示线性加速度。 请记住，这与linear缓动功能不同。 linear函数表示动画的线性速度，而正弦曲线表示动画的加速度的线性速度。 换句话说，动画的速度将线性增加或减少。 同样， quadratic意味着加速与2的幂， cubic意味着三者的功率， quartic暗示的四个动力，并quintic意味着五大电力。 还有circular和exponential缓动功能。

您可以将In ， Out或InOut附加到任何缓动功能。 In值表示动画将非常缓慢地开始并持续加速直到结束。 值Out表示动画将以最大速度开始，然后缓慢减速直到结束为止。 值InOut表示动画将在开始时加快并在结束时减慢。

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

可能没有任何核心缓动功能提供您想要的动画速度。 在这种情况下，您可以从Experiments分支中将Cubic Bezier函数包含在您的项目中，然后开始使用这些缓动函数。

同样，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}});

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

无单位属性

许多属性接受无单位的值。 例如，路径的stroke-width可以是无单位的。 同样，您不必为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 ， stroke和stopColor属性进行动画stopColor 。 您可以使用有效的颜色名称或十六进制值作为颜色。 您还可以提供RGB或HSL格式的颜色值。

您必须牢记的一件事是，仅当您未在CSS中设置这些属性的值时，动画才会起作用。 在下面的演示中，如果我在演示中添加了以下CSS，则fill颜色将完全没有动画。

rect {
    fill: brown;
}

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

后缀属性

带有和不带有后缀的许多SVG属性（如r和stroke-width都可以使用。 例如，您可以将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。 您也可以阅读文档 ，以了解有关该库的更多信息。

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

翻译自: https://code.tutsplus.com/tutorials/performant-animations-using-kutejs-part-5-easing-functions-and-attributes--cms-29751