anime.js 动画_使用Anime.js动画化DOM

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）的有用介绍 。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

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文档中的

另外，您可以使用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如何通过注入内嵌