使用KUTE.js制作高性能动画：第5部分（简化函数和属性）

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

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

缓动函数

现实生活中的物体很少线性移动。它们要么在加速，要么在减速。甚至加速和减速也以不同的幅度发生。到目前为止，我们所有的动画都是线性进展的。这一点都不自然。在本节中，您将了解 KUTE.js 为控制不同动画的节奏提供的所有缓动函数。

库中的核心缓动函数包含在开箱即用的核心引擎中。假设您想将 QuadraticInOut缓动应用于动画。这可以通过两种方式实现：

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

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

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

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

使用KUTE.js制作高性能动画：第5部分（简化函数和属性）第1张

可能没有任何核心缓动函数提供您正在寻找的动画速度。在这种情况下，您可以在实验分支的项目中包含三次 Bezier 函数并开始使用这些缓动函数。

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

动画属性

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

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

无单位属性

许多属性接受无单位值。例如，stroke-width路径的可以是无单位的。同样，您不必为圆形元素的、和属性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()中讨论的方法同时为两个圆的半径设置动画。如果设置为，该属性将反向播放动画。 trueyoyo

两个圆圈的cx属性都是单独动画的。但是，它们都是由同一个按钮单击触发的。最后，cy两个圆圈的属性同时以offset1000 毫秒的时间进行动画处理。

使用KUTE.js制作高性能动画：第5部分（简化函数和属性）第2张

颜色属性

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

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

rect {
    fill: brown;
}

使用KUTE.js制作高性能动画：第5部分（简化函数和属性）第3张

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

后缀属性

很多 SVG 属性都可以使用和不使用后缀r。stroke-width例如，您可以将的值设置为r10 之类的数字或 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制作高性能动画：第5部分（简化函数和属性）第4张