使用KUTE.js制作高性能动画：第1部分

什么是KUTE.js

KUTE.js是一个基于javascript的动画引擎，它专注于性能和内存效率，同时为网页上的不同元素制作动画。我已经写了一系列关于使用Anime.js 创建基于 JavaScript 的动画。这次我们将了解 KUTE.js 以及如何使用它来为css属性、svg和文本元素等设置动画。

安装

在我们深入研究一些示例之前，让我们先安装该库。KUTE.js 有一个核心引擎，然后有一些插件可以为不同的 CSS 属性、SVG 属性或文本的值设置动画。您可以从cdnjs和jsDelivr等流行的 CDN 直接链接到该库 。

<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute.min.js " >
</script><script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js"></script>

您还可以借助以下命令使用 NPM 或 Bower 安装 KUTE.js：

npm install --save kute.js
bower install --save kute.js

在项目中包含该库后，您可以开始创建自己的动画序列。

补间对象

使用 KUTE.js 创建动画时，您需要定义补间对象。这些补间对象提供给定元素的所有动画相关信息。这包括元素本身、要设置动画的属性、动画的持续时间以及其他属性，例如重复次数、延迟或偏移量。

您可以使用.to()方法或.fromTo()方法来将一组 CSS 属性从一个值设置为另一个值。该.to()方法将属性从其默认值或计算/当前值设置为最终提供的值。对于该.fromTo()方法，您必须同时提供开始和结束动画值。

.to()当您不知道要设置动画的属性的当前值或默认值时，该方法很有用。这种方法的一个主要缺点是库必须自己计算所有属性的当前值。.start()这会在您调用启动动画后导致几毫秒的延迟。

该.fromTo()方法允许您自己指定开始和结束动画值。这可以稍微提高动画的性能。您现在还可以自己指定开始值和结束值的单位，避免在动画过程中出现任何意外。使用 . fromTo()是您将无法在链式补间上堆叠多个变换属性。在这种情况下，您将不得不使用该.to()方法。

请记住，当您为单个元素设置动画时，两者.fromTo()和.to()都应使用。如果要一次为多个元素设置动画，则必须使用.allTo() 或.allFromTo()。这些方法就像它们的单元素对应物一样工作，并继承它们的所有属性。他们还获得了一个额外的offset属性，该属性确定不同元素的动画开始之间的延迟。此偏移量以毫秒为单位定义。

这是一个按顺序对三个不同框的不透明度进行动画处理的示例。

以下 javaScript 用于创建上述动画序列：

var theBoxes = document.queryselectorAll(".box");
var startButton = document.querySelector(".start");

var animateOpacity = KUTE.allFromTo(
  theBoxes,
  { opacity: 1 },
  { opacity: 0.1 },
  { offset: 700 }
);

startButton.addeventListener(
  "click",
  function() {
    animateOpacity.start();
  },
  false
);

上面的所有框都有一个box类，用于使用该querySelectorAll()方法选择它们。allFromTo()KUTE.js 中的方法用于将这些框的不透明度从 1 设置为 0.1，偏移量为 700 毫秒。如您所见，补间对象不会自行启动动画。您必须调用该start()方法才能启动动画。

控制动画播放

在上一节中，我们使用该start()方法来启动我们的动画。KUTE.js 库还提供了一些其他可用于控制动画播放的方法。 

例如，您可以借助该stop()方法停止当前正在进行的任何动画。请记住，您可以使用此方法仅停止那些已存储在变量中的补间对象的动画。使用此方法无法停止动态创建的任何补间对象的动画。

您还可以选择在该方法的帮助下暂停动画 pause()。当您想稍后再次恢复动画时，这很有帮助。您可以使用resume()或play()恢复任何暂停的动画。

以下示例是之前演示的更新版本，其中添加了所有四种方法。

这是添加开始、停止、播放和暂停功能所需的 JavaScript 代码。

var theBoxes = document.querySelectorAll(".box");
var startButton = document.querySelector(".start");
var stopButton = document.querySelector(".stop");
var pauseButton = document.querySelector(".pause");
var resumeButton = document.querySelector(".resume");

var animateOpacity = KUTE.allFromTo(
  theBoxes,
  { opacity: 1 },
  { opacity: 0.1 },
  { offset: 700, duration: 2000 }
);

startButton.addEventListener(
  "click",
  function() {
    animateOpacity.start();
  },
  false
);

stopButton.addEventListener(
  "click",
  function() {
    animateOpacity.stop();
  },
  false
);

pauseButton.addEventListener(
  "click",
  function() {
    animateOpacity.pause();
  },
  false
);

resumeButton.addEventListener(
  "click",
  function() {
    animateOpacity.resume();
  },
  false
);

我已将动画持续时间更改为 2,000 毫秒。这给了我们足够的时间来按下不同的按钮，看看它们是如何影响动画播放的。

将补间链接在一起

您可以使用该chain()方法将不同的补间链接在一起。一旦不同的补间被链接起来，他们就会start()在他们自己的动画完成后调用其他补间的方法。 

这样，您可以按顺序播放不同的动画。您可以将不同的补间相互链接，以便循环播放它们。下面的例子应该清楚地说明：

var animateOpacity = KUTE.allFromTo(
  theBoxes,
  { opacity: 1 },
  { opacity: 0.1 },
  { offset: 100, duration: 800 }
);

var animateRotation = KUTE.allFromTo(
  theBoxes,
  { rotate: 0 },
  { rotate: 360 },
  { offset: 250, duration: 800 }
);

opacityButton.addEventListener(
  "click",
  function() {
    animateOpacity.start();
  },
  false
);

rotateButton.addEventListener(
  "click",
  function() {
    animateRotation.start();
  },
  false
);

chainButton.addEventListener(
  "click",
  function() {
    animateOpacity.chain(animateRotation);
    animateOpacity.start();
  },
  false
);

loopButton.addEventListener(
  "click",
  function() {
    animateOpacity.chain(animateRotation);
    animateRotation.chain(animateOpacity);
    animateOpacity.start();
  },
  false
);

我们已经有一个补间来为不透明度设置动画。我们现在添加了另一个动画来动画我们的盒子的旋转。前两个按钮一次设置不透明度和旋转动画。第三个按钮触发animateOpacitywith的链接animateRotation。 

链接本身并不会启动动画，所以我们也使用该start()方法启动不透明动画。最后一个按钮用于将两个补间链接在一起。这一次，动画一旦开始就会无限期地播放。这是一个 CodePen 演示，它显示了上述所有代码：

要完全了解链接的工作原理，您必须按特定顺序按下按钮。首先单击Animate Opacity按钮，您将看到不透明动画仅播放一次，然后没有其他任何反应。现在，按下Animate Rotation按钮，您将看到框旋转一次，然后没有其他反应。

之后，按下Chain Animations按钮，您将看到不透明动画首先播放，一旦完成迭代，旋转动画开始自行播放。发生这种情况是因为旋转动画现在链接到不透明动画。 

现在，再次按下Animate Opacity按钮，您将看到不透明度和旋转都按顺序设置了动画。这是因为在我们点击Chain Animations之后它们已经被链接了。

此时，按下Animate Rotation按钮只会为旋转设置动画。这种行为的原因是我们只将旋转动画链接到不透明动画。这意味着每次对不透明度进行动画处理时，框都会旋转，但旋转动画并不意味着不透明度也会进行动画处理。 

最后，您可以单击“循环播放”按钮。这将使两个动画相互链接，一旦发生这种情况，动画将继续无限循环播放。这是因为一个动画的结束会触发另一个动画的开始。

最后的想法

在这个介绍性的 KUTE.js 教程中，您了解了该库的基础知识。我们从安装开始，然后转到可用于创建补间对象的不同方法。 

您还学习了如何控制动画的播放以及如何将不同的补间链接在一起。一旦你完全理解了链接，你将能够使用这个库创建一些有趣的动画。