使用Anime.js的基于JavaScript的动画，第1部分：目标和属性

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将使用red或blue类为所有元素设置动画。 在第三种情况下，Anime.js将对所有偶数子类进行square动画。 在最后一种情况下，Anime.js将使用没有red类别的square类别为所有元素设置动画。

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的任何函数都可以用来设置Anime.js中targets键的值。

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到1000设置动画，被感染文件的数量从0到8设置动画。请记住，您只能以这种方式设置数值的动画。 尝试将密钥从“ AAA”动画化为“ BOY”会导致错误。

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

数组 ：当您必须对属于不同类别的一系列元素进行动画处理时，将JavaScript数组指定为目标的功能会派上用场。 例如，如果您要为DOM节点，一个对象和一堆基于CSS选择器的其他元素设置动画，则可以轻松地将它们全部放入一个数组中，然后将该数组指定为targets键的值，从而轻松实现此目的。 。 以下示例应使其更清楚：

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

可以在Anime.js中进行动画处理的属性

既然您知道了如何指定要设置动画的不同元素，现在该学习使用该库可以设置动画的所有属性。

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

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

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

这些属性可以接受在常规CSS中使用时应接受的所有类型的值。 例如，可以将left属性设置为50vh ， 500px或25em 。 您也可以将值指定为裸数字。 在这种情况下，该数字将转换为像素值。 同样，背景颜色可以指定为十六进制，RGB或HSL颜色值。

CSS转换 ：您还可以使用Anime.js为不同CSS转换属性设置动画。 可以使用translateX和translateY属性实现沿x和y轴的translateX 。 类似地，可以通过使用与特定轴对应的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'
});

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

DOM属性 ：您还可以为数字DOM属性设置动画，就像为SVG属性设置动画一样。 使DOM属性具有动画效果的一种情况是HTML5 progress元素 。 该元素具有两个属性， value和max 。 在我们的示例中，我们将对value属性进行动画处理，以显示文件传输过程的进度。 这是使value属性动画的代码。

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

最后的想法

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

JavaScript是可以说是网页的语言。 当然，它并非没有学习曲线，并且有很多框架和库可以使您忙碌。 如果您正在寻找其他资源来学习或在工作中使用，请查看Envato市场中可用的资源 。

在该系列的下一个教程中，您将学习如何控制不同属性作为一组或单个属性的动画的缓动，延迟和持续时间。 然后，您将学习如何控制单个元素的所有这些动画参数。

如果对本教程有任何疑问，或者在任何有趣的项目中使用过Anime.js，请在评论中告知我们。

翻译自: https://code.tutsplus.com/tutorials/javascript-based-animations-using-animejs-targets-and-properties--cms-28894