anime.js 动画

如果您正在寻找一个快速且轻便的动画库，那么Julian Garnier的Anime.js是您想要考虑的选择。

这是有关动态DOM动画工具（包括SVG图形）的系列文章中的第一篇。 我不打算包含专门的canvas-WebGL动画库或SVG特定的动画库。 但是，如果图书馆擅长为网页上HTML元素（最好是SVG图形）制作动画，我将考虑将其包含在本系列中。

我无意剖析每个库并深入研究其代码。 取而代之的是，我将从一个主要使用CSS但希望探究JavaScript动画DOM的人的角度来研究每个库。 因此，我将寻找一种通过XML开发人员熟悉的语法动态地添加和删除CSS样式和/或类（以动画为目的），从而很好地操作DOM的工具。

网络动画

正如Sarah Drasner解释的那样 ，在谈论网络动画时，有用的区别在于用户界面/用户体验动画与独立动画之间 。

研究表明，人类感知如何基于运动图像更好地理解世界。 这意味着，当信息以动态场景呈现给我们时，而不是以图像甚至一系列静态图像的形式呈现给我们，我们可以更好地理解和吸收信息。

UI / UX动画的目的是在用户浏览网站，吸收网页上的信息或执行特定任务（例如注册时事通讯，将商品添加到购物车等）时帮助用户。

相比之下，独立动画是…

用于在页面正文中单独或单独说明概念。

Sarah Drasner — CSS会议幻灯片

这是Sarah出色的CodePen演示 ，以说明这一点。

区别很重要，因为在为用户界面添加动画时，您的目的是帮助用户执行那些有助于实现网站目标的任务 。 相反，在创建独立动画时，您打算尽可能完整地表达某个概念 。

也就是说，两种动画都是让人欣赏的。 这就是为什么在创建动画时， 性能和可访问性之类的东西会在令人愉悦的动画与烦扰甚至伤害用户的动画之间产生巨大的差异。

为什么要使用JavaScript进行动画制作？

如今，CSS提供了过渡效果和动画来增加网络的移动性。 但是，当涉及到网络动画时，JavaScript仍然扮演着重要角色。 为什么会这样呢？ 最后，我们可以仅使用CSS来运行动画，为什么到底有人需要JavaScript来完成这项工作？

为了帮助您在CSS和JavaScript动画之间做出选择，请考虑Rachel Nabors的以下区别 。

动画可以是：

• 静态 ：动画从头到尾一直运行，没有决策逻辑。 CSS加载器就是一个很好的例子。 您可以仅使用CSS来创建这种动画。
• 有状态 ：单击按钮即可打开和关闭的侧边栏是此类动画的常见示例。 您可以使用CSS和少量JavaScript进行构建，以添加和删除负责跟踪动画中元素状态CSS类。
• 动态的 ：这种动画可能会有不同的结果，这取决于各种因素，例如用户交互，DOM事件，同一文档中其他元素的动画状态等。您不能仅使用CSS创建动态动画-在在这种情况下，JavaScript很可能是您最好的朋友。

如果遇到以下任何情况，除了动态动画外，您还可以使用JavaScript来帮助您制作动画：

• 您需要在多个元素上链接或错开动画。 在这种情况下，每个后续动画都需要在前一个动画完成之后发生。 您可以通过在每个动画元素上协调delay属性来单独使用CSS来实现。 但是，如果只需要更改一个值，则对所有链接的元素进行必要的调整可能很快就变得难以管理。
• 您正在为SVG图形制作动画。 在这种情况下，缺点是跨浏览器不能始终支持SVG上的CSS动画 。
• 如果您的项目需要支持无法使用CSS动画的旧版浏览器，那么采用强大JavaScript解决方案将使您的动画更广泛地可用。

如果您想了解更多有关此主题的内容， Greensock动画平台的作者Jack Doyle的Myth Busting：CSS动画与JavaScript 会给您一些好处。

新兴方案：Web动画API

W3C一直在研究一种规范，该规范以统一的语言将CSS，SVG和JavaScript动画组合在一起，而无需外部JavaScript库。 该API被称为Web动画 ，非常适合CSS不适合使用的动态动画。 您可以在自己的SitePoint上阅读Dudley Storey撰写的有关Web动画API （AAPI）的有用介绍 。

Web Animations API的开发工作一直在持续进行，并且不提供对API的本机支持的浏览器也可以使用polyfill 。

所有这些听起来不错，我积极鼓励尝试使用WAAPI。 但是，在撰写本文时，对浏览器的支持还很粗略，并且规范将来可能仍会更改。 因此，如果WAAPI目前不适合您的项目，则可以使用JavaScript动画库来完成工作。

动态DOM动画的动画库

您可以尝试多种JavaScript动画库。 在撰写本文时， GreenSock也被称为GSAP（GreenSock动画平台），而Velocity.js是其中的佼佼者。

两者都是出色的，用户友好的工具，我将在后续文章中讨论它们。 但是，我想通过Anime.js （一个新JavaScript动画库）开始这个系列，该库已经获得了很大的关注。

动漫的主要特点

动漫名称是日语，用于手绘或计算机动画 （日语：アニメ）

至于功能，Anime.js…

是一个灵活而轻巧JavaScript动画库。 它与CSS，Individual Transforms，SVG，DOM属性和JS对象一起使用。

Anime.js支持以下浏览器：

• Chrome
• 苹果浏览器
• 歌剧
• 火狐浏览器
• Internet Explorer 10+

有所有可用的动画库，为什么要使用动漫？

这个问题的答案最好留给动漫的作者，因为他解释了为什么在GSAP之类的功能强大时，他想出Anime.js的原因：

GSAP可以做的比动漫还多。 但这也更重。 我使用该库的目标是使API尽可能简单，专注于我真正需要的东西（多个定时，缓动，播放控件等），同时使代码保持超轻量（最小9KB）。

黑客新闻

简而言之，对于不需要GSAP和其他大型库提供的所有功能HTML和SVG元素的动态动画，Anime.js可以是您的项目的绝佳选择。

如何使用Anime.js

接下来，我提供了一些实时示例来说明Anime.js的基本用法。 出于演示目的，大多数动画的运行速度会有些慢。

包含Anime.js与包含jQuery或任何其他熟悉JavaScript库没有什么不同。

从GitHub上库项目的页面下载.zip文件，解压缩文件并使用html文档中的<script>标签添加anime.min.js ：

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

另外，您可以使用npm或bower ：

npm install animejs

bower install animejs

向单个元素添加一个动画：弹跳球

一旦在项目中设置了Anime，就可以开始使用最简单的动画类型：一个元素，一个球，上下弹跳。

第一步是调用anime传递对象与一群大约动画的信息。 基本结构如下：

var bouncingBall = anime({

  //code here
	
});

接下来，您需要在上面的对象上充实一些有关动画内容，动画类型，其持续时间等的说明。

var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic'
});

targets属性告诉Anime您要设置动画的元素。 在这里，您可以像上面的示例一样使用CSS选择器，也可以使用以下任意一种：

• DOM元素，例如document.querySelector('.ball')
• 节点列表，例如document.querySelectorAll('.ball')
• JavaScript对象，例如{elementName: 'ball'}
• JavaScript数组，例如['.ball']

如果targets属性具有多个值，也就是说，您打算将动画应用于多个元素，则可以将数组用作数据结构，如下所示：

var bouncingBall = anime({
  targets: ['.ball', '.kick'],
  //rest of the code
});

上例中的第二个属性将球元素垂直移动了translateY ，这对于使用CSS的用户应该是熟悉的。 蒂法尼·布朗 （ Tiffany Brown）等人建议使用translate和scale来分别移动元素并更改其尺寸，这与定位元素的位置属性或其宽度和高度相反。 通过避免浏览器重排，有助于动画的性能和质量。

上面的动画片段的属性列表中的下一个是duration属性。 这告诉动漫您希望动画持续多长时间。 如果在不同时间发生多个动画，则delay是另一个有用的属性。

loop属性告诉Anime您希望动画进行多少次。 它的默认值为false ，使动画仅运行一次。 您可以通过将该值更改为true来无限期地运行动画，也可以通过将该属性设置为所需的数字来使动画运行精确的次数。

direction属性也出现在CSS动画中，Anime允许您将其设置为CSS对应部分的任何值： normal ， reverse和alternate 。 最后一个值在动画的法线方向和其反向之间交替，这似乎对弹跳球很有用。

最后，以上代码为动画指定了easing属性。 变化率恒定吗？ 也许动画开始缓慢并加速到结束？ 最后部分有弹跳吗？ 正确的宽松值是优美有效的动画的重要组成部分。

您可以通过以下简单代码片段找到可以与Anime一起使用的所有缓动功能：

console.log(anime.easings);

向弹跳球添加第二个动画

假设您希望弹跳球在碰到容器底部时被压扁。 您可以使用Anime通过使用JavaScript对象的形式添加特定的动画参数来实现此目的。 以弹跳球为例，以下是达到预期效果的方法：

var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic',
  //new code
  scaleX: {
    value: 1.05,
    duration: 150,
    delay: 268
  }
});

上面的代码添加了一个新的属性scaleX ，以增加球的宽度，并以对象文字的形式设置其值，并带有可用于控制动画的特定键。

value键可让您在元素的水平轴上缩放时控制元素的宽度，而duration和delay键可让您分别设置动画要持续多长时间和相对于上一个动画何时开始。

请参见CodePen上的SitePoint （ @SitePoint ）的Anime JS笔弹跳球 。

如果使用您喜欢的浏览器的开发工具检查代码，您将看到Anime如何通过注入内嵌<style>标签并动态更新CSS transform属性的值来使元素动画化：

连续动画两个元素：踢球

下面的示例代码显示了一种方式，可以连续设置两个元素（在本例中为两个图像）的动画：在第一个动画完成后，第二个动画开始。

var kickBall = anime({
  targets: '.kick',
  scale: 1.2,
  duration: 300,
  easing: 'easeInCubic',
  complete: function() {
    anime({
      targets: '.ball',
      translateX: '70vw',
      scale: 1.5,
      easing: 'easeOutBounce',
      delay: 150
    });
  }
});

球只有在被踢过后才会动画。 使用Anime.js，您可以使用complete()方法使动画交错，在这种情况下，该方法包含第二个对象，该对象带有对ball元素进行动画处理的指令。

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen 用Anime JS对两个元素进行动画 处理 。

图片由Pixabay.com提供

当然，需要一些关键帧和精美的三次方贝塞尔函数才能快速近似CSS中的这种静态动画。 在这种情况下，您根本不需要任何JavaScript，并且最终将获得在浏览器中本地运行的平滑动画。

这是仅CSS的演示：

见笔与CSS动画效果两张图片由SitePoint（ @SitePoint上） CodePen 。

播放，暂停和重新启动动画

通过Anime.js，您可以使用.play() .pause()和.restart()方法控制何时播放，停止和重新启动动画。 您还可以使用.seek()方法在动画过程中找到特定点。

例如，以下是使用“播放”按钮控制踢球动画的方法。

//Animating the kick
var kickBall = anime({
  targets: '.kick',
  scale: 1.2,
  duration: 300,
  delay: 100,
  easing: 'easeInCubic',
  autoplay: false
});

//Animating the ball
var movingBall = anime({
  targets: '.ball',
  translateX: '70vw',
  scale: 1.5,
  easing: 'easeOutBounce',
  delay: kickBall.duration + 100,
  autoplay: false
});

/* Playing the animation 
when clicking the play button */
btnPlay.addEventListener('click', function(e) {
  e.preventDefault();
  kickBall.play();
  movingBall.play();
});

有关上述代码段的几点注意事项：

• 为了能够使用按钮控制踢球和控球，我创建了两个单独的对象。 我本可以将球的动画嵌套在踢的动画中，但是我的经验是按钮只能控制主要的动画，即踢，而不是嵌套的动画。
• 为了防止动画在页面加载时运行，必须将autoplay设置为false ；
• 最后，只需在kickBall和movingBall对象上调用.play()方法即可使它们的行为完全符合您的期望。

请参见CodePen上的SitePoint （ @SitePoint ）的Pen 带有按钮的Pen 动漫JS 。

尽管可以使用CSS animation-play-state属性和少量JavaScript快速完成播放按钮和暂停按钮的行为复制，但是如果您希望动画一旦完成运行或重新定位精确点就重新启动动画，同样的方法将不起作用一路走来。

使用Anime.js动画化内联SVG属性

最后一个演示说明了如何为内联SVG图形设置动画，在这种情况下，该图形表示一只可爱的猫在玩球。

该演示在构成SVG图形的各种路径和形状上使用CSS类，因此很容易在代码中定位它们。

这是使猫的眼睛动起来的方法：

var movingEyes = anime({
  targets: ['.inner-left-eye', '.inner-right-eye'],
  cy: 400,
  duration: 500,
  delay: function(el, index) {
    var singleDelay = index === 0 ? 300 : index * 500;
    return singleDelay;
  },
  autoplay: false
});

上面的代码通过修改构成猫的瞳Kong的圆形的cy属性的值来降低猫的眼睛。

如果您注意到，眼睛会连续移动。 我这样做是为了向您展示一种更酷的方式，您可以在其中使用Anime.js交错动画。 delay属性可以是数字，也可以是函数。 当使用上面代码中的函数时，您可以对动画的开始时间进行编程控制。 该函数告诉动漫，如果要设置动画的元素是第一个元素（位于targets数组的0位置），即左眼，则动画具有300ms的延迟，否则该元素具有导致的延迟从索引编号（即1）乘以500毫秒（相对于先前动画的完成）。

请参阅CodePen上SitePoint （ @SitePoint ）的Pen Anime JS SVG示例 。

SVG图形改编自Pixabay.com的原始文件

结论

在本文开头，我简要介绍了如何在网络上使用动画，然后讨论了何时可以考虑将JavaScript与CSS结合用于动画，以及对Web动画API的粗略引用。

通过说明它的某些功能并将其用于CodePen，我还介绍了本系列中的第一个动画库Anime.js。

总的来说，我发现Anime.js的使用很有趣：它的功能涵盖了很多用例，其语法非常简单，并且可以创建平滑，精美的动画效果。

对于那些初次使用它的人，我必须说GitHub上的README.md文件是目前唯一可用的文档。

也就是说，您可以在该项目的GitHub问题部分中找到一些问题的好答案，该部分似乎受到Anime的创建者Julian Garnier的密切监视。

此外，您还可以通过挖掘一些将动漫作为动画引擎的令人惊叹的演示的代码来了解有关如何使用该库的更多信息：

• Anime.js主页
• CodePen上的演示和示例
• Codrops.net演示：字母效果的灵感
• Codrops.net演示：背景细分效果
• Codrops.net演示：花式SVG字母动画
• Codrops.net演示：多布局幻灯片放映
• Codrops.net演示：使用SVG展示物品的动画

如果您使用过Anime.js，并希望分享您的经验或想为该系列推荐自己喜欢的动画库，请在消息下方点击评论框。

翻译自: https://www.sitepoint.com/animating-the-dom-with-anime-js/

anime.js 动画