使用Anime.js基于JavaScript的动画：目标和属性

Anime.js是一个基于javascript的轻量级动画库。您可以使用它来为网页上的不同css属性、svg或dom属性设置动画。该库允许您控制动画的所有方面，并为您提供了许多方法来指定要定位的元素或要设置动画的属性。 

您可以完全控制播放动画的顺序或不同元素的动画彼此之间的同步程度。该库支持所有现代浏览器，包括 IE10+。 

在本教程系列中，您将了解 Anime.js 的所有功能，以便您可以轻松地在实际项目中使用它们。

在深入探讨该主题之前，让我们先安装库。您可以使用npm或bower通过运行以下命令来执行安装：

npm install animejs

bower install animejs

您还可以下载该库并将其包含在您的项目中，或者直接链接到托管在 CDN 上的最新版本的库。

<script src="path/to/anime.min.js"></script>

成功安装后，您现在可以使用此库将有趣的动画添加到您的元素中。我们将从图书馆的基础知识开始，一次只关注一个特定领域。

指定目标元素

要使用 Anime.js 创建任何动画，您必须调用该anime()函数并向其传递一个带有键值对的对象，该键值对指定要设置动画的目标元素和属性等。您可以使用该targets键告诉 Anime.js 您要为哪些元素设置动画。该键可以接受不同格式的值。

CSS 选择器：您可以传递一个或多个 CSS 选择器作为targets键的值。 

var blue = anime({
  targets: '.blue',
  translateY: 200
});

var redBlue = anime({
  targets: '.red, .blue',
  translateY: 200
});

var even = anime({
  targets: '.square:nth-child(even)',
  translateY: 200
});

var notRed = anime({
  targets: '.square:not(.red)',
  translateY: 200
});

在第一种情况下，Anime.js 将使用一个blue类为所有元素设置动画。在第二种情况下，Anime.js 将使用redorblue类为所有元素设置动画。在第三种情况下，Anime.js 将为所有偶数子square类设置动画。在最后一种情况下，Anime.js 将使用square没有类的类为所有元素设置动画red。

See the Pen  Setting Target as a CSS Selector by Monty (@Shokeen)  on CodePen.

DOM节点或nodeList：您还可以使用 DOM 节点或 NodeList 作为targets键的值。下面是一些将 设置targets为 DOM 节点的示例

var special = anime({
  targets: document.getElementById('special'),
  translateY: 200
});

var blue = anime({
  targets: document.queryselector('.blue'),
  translateY: 200
});

var redBlue = anime({
  targets: document.querySelectorAll('.red, .blue'),
  translateY: 200
});

var even = anime({
  targets: document.querySelectorAll('.square:nth-child(even)'),
  translateY: 200
});

var notRed = anime({
  targets: document.querySelectorAll('.square:not(.red)'),
  translateY: 200
});

在第一种情况下，我使用该getElementById()函数来获取我们的特殊元素。该querySelector()函数用于获取第一个具有蓝色类的元素。该querySelectorAll()函数用于获取文档中与指定选择器组匹配的 所有元素。

您还可以使用许多其他功能来选择要设置动画的目标元素。例如，您可以使用该getElementsByClassName()函数获取具有给定类名的所有元素。同样，您也可以使用该getElementsByTagName()函数获取具有给定标签名称的所有元素。 

任何返回 DOM 节点或 NodeList 的函数都可用于设置targetsAnime.js 中键的值。

See the Pen  Setting Target as a DOM Node or Node List by Monty (@Shokeen)  on CodePen.

Object：您还可以使用 JavaScript 对象作为targets键的值。该对象的键用作标识符，值用作需要动画的数字。 

然后，您可以借助附加的 javaScript 在另一个 html 元素中显示动画。这是动画对象的两个不同键的值的代码。

var filesScanned = { count: 0, infected: 0 };

var scanning = anime({
  targets: filesScanned,
  count: 1000,
  infected: 8,
  round: 1,
  update: function() {
    var scanCount = document.querySelector('.scan-count');
    scanCount.innerHTML = filesScanned.count;
    
    var infectedCount = document.querySelector('.infected-count');
    infectedCount.innerHTML = filesScanned.infected;
  }
});

上面的代码会将扫描的文件计数从 0 到 1,000 进行动画处理，将受感染的文件计数从 0 到 8。请记住，您只能以这种方式为数值设置动画。尝试将键从“AAA”设置为“BOY”将导致错误。 

我们还为动画运行时在每个帧 上调用的键使用了回调函数 。我们在这里使用它来更新扫描和感染文件的计数。但是，您可以更进一步，当受感染文件的数量超过某个阈值时向用户显示错误消息。 update

See the Pen  Setting Target as an Object by Monty (@Shokeen)  on CodePen.

Array：当您必须为一堆属于不同类别的元素设置动画时，将 JavaScript 数组指定为目标的能力会派上用场。例如，如果你想根据 CSS 选择器为一个 DOM 节点、一个对象和一堆其他元素设置动画，你可以很容易地做到这一点，只需将它们放在一个数组中，然后将该数组指定为targets键的值。下面的例子应该更清楚：

var multipleAnimations = anime({
  targets: [document.querySelectorAll('.blue'), '.red, #special'],
  translateY: 250
});

See the Pen  Setting Target as an Array by Monty (@Shokeen)  on CodePen.

可以在 Anime.js 中设置动画的属性

既然您已经知道如何指定要设置动画的不同元素，那么是时候了解可以使用该库进行动画处理的所有属性和属性了。

CSS 属性：Anime.js 允许您为不同的目标元素设置许多 CSS 属性的动画，例如宽度、高度和颜色。不同动画属性（如背景颜色和边框宽度）的最终值是使用该属性的驼峰式版本指定的。因此，背景色变backgroundColor为 ，边框宽度变为borderWidth。以下代码片段显示了如何在 Anime.js 中为目标元素的左侧位置和背景颜色设置动画。

var animateLeft = anime({
  targets: '.square',
  left: '50%'
});

var animateBackground = anime({
  targets: '.square',
  backgroundColor: '#f96'
});

See the Pen  Animating CSS Properties in Anime.js by Monty (@Shokeen)  on CodePen.

这些属性可以接受它们在常规 CSS 中使用时会接受的各种值。例如，该属性left可以设置为50vh、500px或25em。您还可以将值指定为裸数。在这种情况下，数字将被转换为像素值。类似地，背景颜色可以指定为十六进制、RGB 或 HSL 颜色值。

CSS变换s：您还可以使用 Anime.js 为不同的 CSS 变换属性设置动画。可以使用translateX和translateY属性实现沿 x 和 y 轴的平移。类似地，可以通过使用scale,skew和rotate对应于该特定轴的属性沿特定轴缩放、倾斜或旋转元素。 

您可以用术语或度数或用 来指定不同的角度turn。1 圈的值等于 360°。当您知道要在完全旋转方面转动多少元素时，这可以使计算更容易。以下示例显示了如何在单个基础上以及同时为元素的缩放、平移或旋转设置动画。

var animateScaling = anime({
  targets: '.square',
  scale: 0.8
});

var animateTranslation = anime({
  targets: '.square',
  translateX: window.innerWidth*0.8
});

var animateRotation = anime({
  targets: '.square',
  rotate: '1turn'
});

var animateAll = anime({
  targets: '.square',
  scale: 0.8,
  translateX: window.innerWidth*0.8,
  rotate: '1turn'
});

See the Pen  Animating CSS Transforms in Anime.js by Monty (@Shokeen)  on CodePen.

SVG 属性：可以使用 Anime.js 为不同的 SVG 元素的属性设置动画。唯一的条件是这些属性的值应该是数字的。这种动画不同属性的能力开辟了创造一些非常酷的效果的可能性。由于您刚刚开始学习 Anime.js，我们将保持本教程中的示例非常基础。 

随着我们前进，您将学习如何创建更复杂的动画。下面是为圆的cx,cy和属性设置动画的代码。stroke-width就像 CSS 属性一样，您需要使用驼峰式版本stroke-width的代码才能工作。

var animateX = anime({
  targets: '.circle',
  cx: window.innerWidth*0.6
});

var animateStrokeWidth = anime({
  targets: '.circle',
  strokeWidth: '25'
});

See the Pen  Animating SVG Attributes in Anime.js by Monty (@Shokeen)  on CodePen.

DOM 属性：您也可以像动画 SVG 属性一样动画数字 DOM 属性。动画 DOM 属性可能有用的一种情况是html5 进度元素。这个元素有两个属性， value和max。在我们的示例中，我们将为 value 属性设置动画以显示文件传输过程的进度。这是动画value属性的代码。

var animateProgress = anime({
  targets: 'progress',
  value: 100,
  easing: 'linear'
});

See the Pen  Animating DOM Attributes in Anime.js by Monty (@Shokeen)  on CodePen.

最后的想法

在本教程中，您了解了在 Anime.js 中选择目标元素的所有方法，以及如何为与它们相关的不同 CSS 属性和属性设置动画。在这一点上，我们没有控制任何与实际动画相关的东西。