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

anime.js 动画

If you’re looking for a fast and lightweight animation library, Anime.js by Julian Garnier is an option you’d like to consider.

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

This is the first of a series of articles about tools for dynamic DOM animation, including SVG graphics. I don’t plan to include specialized canvas-WebGL animation libraries or SVG-specific animation libraries. However, if a library is great at animating HTML elements on a webpage (and ideally also SVG graphics), I will consider it for inclusion in this series.

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

It is not my intention to dissect each library and delve deeply into its code. Instead, I am going to approach each library from the perspective of someone who mainly works with CSS but would like to explore what JavaScript has to offer when it comes to animating the DOM. Therefore, I will be looking for a tool that is great at manipulating the DOM by dynamically adding and removing CSS styles and/or classes for the purposes of animation by means of a syntax that feels familiar to a CSS developer.

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

网络动画 (Animation on the Web)

As Sarah Drasner explains, when talking about web animation, a useful distinction is between user interface/user experience animation and standalone animation.

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

Research shows how human perception understands the world better on the basis of moving images. This means that we can understand and assimilate information better when it is presented to us in a moving scene rather than in the form of an image or even a series of static images.

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

UI/UX animation serves the purpose of aiding users as they navigate a website, absorb information on a webpage, or perform a specific task, e.g., signing up for a newsletter, adding an item to the shopping cart, etc.

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

By contrast, standalone animation is…

相比之下，独立动画是…

Used to illustrate concepts in the body of the page, either alongside or on it’s own.

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

Sarah Drasner — CSS Conference slides

Sarah Drasner — CSS会议幻灯片

Here’s an amazing CodePen demo by Sarah to illustrate the point.

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

The distinction is important because when you’re animating user interfaces, your aim is to help users perform those tasks which go towards meeting the website’s goals. Instead, when creating a standalone animation, you set out to express a certain concept as fully as possible.

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

That said, both kinds of animation are made for people to enjoy. That’s why, when creating your animations, things like performance and accessibility make all the difference between an animation that delights and one that annoys or even hurts users.

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

为什么要使用JavaScript进行动画制作？ (Why Use JavaScript for Animation?)

Today CSS offers transitions and animations to add movement to the web. However, when it comes to animation on the web, JavaScript is still a big player. Why is this the case? At last we can run an animation using CSS alone, why on earth would anyone need JavaScript to do the job?

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

To help you decide between CSS and JavaScript animation, consider the following distinctions by Rachel Nabors.

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

Animation can be:

动画可以是：

• static: the animation runs from the beginning through to the end without decision-making logic. CSS loaders are a case in point. You can create this kind of animation with CSS alone;

  静态的 ：动画从头到尾一直运行，没有决策逻辑。 CSS加载器就是一个很好的例子。 您可以仅使用CSS来创建这种动画。

• stateful: a sidebar that opens and closes at the click of a button is a common example of this type of animation. You can build this using CSS and a tiny bit of JavaScript to add and remove the CSS classes responsible for keeping track of the state of the element in your animation;

  有状态的 ：单击按钮即可打开和关闭的侧边栏是此类动画的常见示例。 您可以使用CSS和少量JavaScript进行构建，以添加和删除负责跟踪动画中元素状态CSS类。

• dynamic: this kind of animation can have different outcomes, which depend on various factors like user interaction, DOM events, the state of the animation of other elements on the same document, etc. You can’t create dynamic animations with just CSS – in this context, JavaScript is most likely your best friend.

  动态的 ：这种动画可能会有不同的结果，这取决于各种因素，例如用户交互，DOM事件，同一文档中其他元素的动画状态等。您不能仅使用CSS创建动态动画-在在这种情况下，JavaScript很可能是您最好的朋友。

Besides dynamic animations, you could turn to JavaScript for a helping hand with your animations if you come across any of the circumstances below:

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

• you need to chain or stagger your animations on more than a few elements. In this case, each subsequent animation needs to occur after the previous one has completed. You can do this with CSS alone by coordinating the delay property on each animated element. However, if you need to change even just one value, making the necessary adjustments on all the chained elements can quickly become unmanageable;

  您需要在多个元素上链接或错开动画。 在这种情况下，每个后续动画都需要在前一个动画完成之后发生。 您可以通过在每个动画元素上协调delay属性来单独使用CSS来实现。 但是，如果只需要更改一个值，则对所有链接的元素进行必要的调整可能很快就变得难以管理。

• you are animating SVG graphics. In this case, the drawback is that