使用KUTE.js的表演动画：第1部分，入门

KUTE.js是一个基于JavaScript的动画引擎，着重于性能和内存效率，同时为网页上的不同元素设置动画。 我已经写了一系列有关使用Anime.js创建基于JavaScript的动画的文章 。 这次，我们将学习KUTE.js以及如何使用它来为CSS属性，SVG和文本元素设置动画。

安装

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

<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创建动画时，需要定义补间对象。 这些补间对象为一个或多个给定元素提供所有与动画有关的信息。 这包括元素本身，要设置动画的属性，动画的持续时间，以及其他属性，例如重复计数，延迟或偏移。

可以使用.fromTo() .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()方法用于使这些框的不透明度从1到0.1进行动画处理，偏移量为700毫秒。 如您所见，补间对象本身不会启动动画。 您必须调用start()方法才能启动动画。

控制动画播放

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

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

您还可以选择在pause()方法的帮助下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
);

我们已经有一个补间动画了不透明度。 现在，我们添加了另一个动画盒的旋转。 前两个按钮使不透明度和旋转动画一次。 第三个按钮触发animateOpacity与animateRotation的链接。

链接本身不会启动动画，因此我们也使用start()方法来启动不透明度动画。 最后一个按钮用于将两个补间彼此链接。 这次，动画一旦开始就可以无限期地播放。 这是一个CodePen演示，显示了上面所有正在执行的代码：

要完全了解链接的工作方式，您将必须按特定顺序按按钮。 首先单击“ 动画不透明度”按钮，您将看到不透明度动画只播放一次，然后什么也没有发生。 现在，按“ 动画旋转”按钮，您将看到框旋转一次，然后什么也没有发生。

之后，按下“ 链动画”按钮，您将看到不透明度动画首先播放，并且一旦完成其迭代，旋转动画便开始单独播放。 发生这种情况是因为旋转动画现在已链接到不透明度动画。

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

此时，按下“ 动画旋转”按钮将仅对旋转进行动画处理。 出现这种情况的原因是，我们仅将旋转动画链接到不透明度动画。 这意味着每当不透明度设置为动画时，框都将旋转，但是旋转动画并不意味着不透明度也将被设置为动画。

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

最后的想法

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

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

在本系列的下一个教程中，您将学习如何使用KUTE.js为各种CSS属性设置动画。

翻译自: https://code.tutsplus.com/tutorials/performant-animations-using-kutejs-getting-started--cms-29659