animateplus.js 教程

animateplus（Animate Plus）是一个基于现在的网络的动画模块。Animate Plus是一个专注于性能和创作灵活性的JavaScript动画库。它的目标是提供稳定的60 FPS，重量小于2 KB（缩小和压缩），使其特别适合移动设备。本文将通过一个例子来介绍它的用法。

安装

animateplus.js 有两种安装方法，一种是基于npm的安装。

npm install animateplus

还有一种就是直接下载 animateplus.js 在使用时，引入它。

入门例子

下面我们看一个简单的入门例子。

import animate from "/animateplus.js";
// ：www.xttblog.com
animate({
  elements: "div",
  duration: 2000,
  delay: index => index * 100,
  transform: ["scale(0)", "scale(1)"]
})
.then(options => animate({
  ...options,
  transform: ["translate(0%)", "translate(500%)"]
}));

运行这个例子后的效果，可以点此查看。

参数解释

animate() 方法有几个重要的参数，下面我们一一介绍一下这些参数的作用。

elements 参数的默认值为null，它的值可以有4中类型，分别是：字符串| Element | NodeList | 数组。

确定要动画的DOM元素。您可以传递一个CSS选择器或DOM元素。

animate({
  elements: document.body.children,
  transform: ["rotate(0turn)", "rotate(1turn)"]
});

easing 参数的默认值为out-elastic，参数类型为字符串。它主要的作用是确定动画的加速曲线。

主要的取值有下面表格中所示：

constant	accelerate	decelerate	accelerate-decelerate
linear	in-cubic	out-cubic	in-out-cubic
	in-quartic	out-quartic	in-out-quartic
	in-quintic	out-quintic	in-out-quintic
	in-exponential	out-exponential	in-out-exponential
	in-circular	out-circular	in-out-circular
	in-elastic	out-elastic	in-out-elastic

弹性缓和的幅度和周期可以通过提供空间分离值来配置。振幅默认为1，期间到0.4。下面为一个例子：

animate({
  elements: "span",
  easing: "out-elastic 1.4 0.2",
  transform: ["translate(0px)", "translate(500px)"]
});

duration 参数的默认值为1000，参数类型为数字，或者函数。Number | Function。

以毫秒为单位确定动画的持续时间。通过传递一个回调，你可以为每个元素定义一个不同的持续时间。回调函数将每个元素的索引作为参数，并返回一个数字。下面为一个使用例子：

animate({
  elements: "span",
  easing: "linear",
  duration: index => (index + 1) * 1000,
  opacity: [1, 0]
});

delay 参数的默认值为0，参数类型为数字，或者函数。Number | Function。

确定动画的延迟（以毫秒为单位）。通过传递一个回调，你可以为每个元素定义一个不同的延迟。回调函数将每个元素的索引作为参数，并返回一个数字。

animate({
  elements: "span",
  easing: "linear",
  delay: index => (index + 1) * 1000,
  opacity: [1, 0]
});

loop 参数的默认值为false，参数类型为Boolean。主要作用是确定动画是否应该重复。

direction 参数的默认值为normal，参数类型为字符串String。确定动画的方向。reverse向后运行动画，alternate 如果动画循环，则在每次迭代之后切换方向。

speed 参数的默认值为1，参数类型为Number。确定动画回放速率。在创作过程中有用，可以加快长序列的某些部分（值大于1）或减慢特定的动画以观察（小于1的值）。

optimize 参数的默认值为false，参数类型为Boolean。如果设置为“动画”，则强制进行硬件加速true。除非遇到性能问题，否则建议不要使用硬件加速，否则可能会产生有害的副作用。

change 参数的默认值为null，参数类型为Function。定义在动画的每个帧上调用的回调函数。回调以动画进程（0到1之间）作为参数，可以独立使用而不受限制elements。

animate({
  duration: 5000,
  easing: "linear",
  change: progress =>
    document.body.textContent = `${Math.round(progress * 100)}%`
});

Animations

Animate Plus可让您使用包含十六进制颜色的数字值的任何属性为HTML和SVG元素设置动画效果。

animate({
  elements: "circle",
  r: [0, 50],
  fill: ["#80f", "#fc0"]
});

每个动画属性都需要一个定义开始和结束值的数组。为了方便起见，您可以省略除最终值中的数字之外的所有内容。

animate({
  elements: "span",
  transform: ["translate(0px)", 100]
});

这些数组可以有选择地由一个回调函数返回，该回调函数采用每个元素的索引，就像持续时间和延迟一样。

animate({
  elements: "span",
  transform: index => ["translate(0px)", (index + 1) * 100]
});

Promise

animate()返回动画完成后解决的承诺。承诺解决了最初传递给的对象animate()，使得动画链接更直接，更方便。在入门部分为您提供了一个基本的承诺的例子。

由于动画加上依赖于本地的承诺，你可以从所有常见功能承诺提供，如受益Promise.all，Promise.race以及特别是async/await使动画时间线容易建立。

const play = async () => {
  const options = await animate({
    elements: "span",
    duration: 3000,
    transform: ["translateY(-100vh)", 0]
  });
  await animate({
    ...options,
    transform: ["rotate(0turn)", 1]
  });
  await animate({
    ...options,
    duration: 800,
    easing: "in-quintic",
    transform: ["scale(1)", 0]
  });
};
// ：www.xttblog.com
play();

上面的代码的运行效果，可以点此查看。

常用方法

animateplus 常用的方法有两个，分别是stop() 和 delay()。先看一个关于 stop() 的例子。

import {stop} from "/animateplus.js";
animate({
  elements: "span",
  easing: "linear",
  duration: index => 8000 + index * 200,
  loop: true,
  transform: ["rotate(0deg)", 360]
});
document.addEventListener("click", ({target}) => stop(target));

上面代码的运行效果，可以点此查看。 stop作为参数传递的元素上的动画。

delay 以毫秒为单位设置一个计时器。它setTimeout()通过回报承诺和更加准确，一致和电池友好来区分。该延迟选项内部依靠这种方法。

import {delay} from "/animateplus.js";

delay(500).then(time => console.log(`${time}ms elapsed`));

浏览器支持

Animate Plus作为原生ES2015模块提供，这意味着您可能需要根据您的浏览器支持策略进行传输。该库的工作原理<script type=module>与以下浏览器一样：

• Chrome 61
• Safari 11.1
• 火狐57与 dom.moduleScripts.enabled

推荐用法

动画在良好的用户界面设计中起着重要的作用。它们帮助将行动与后果联系起来，使交互的流动显现出来，极大地提高产品的抛光和感知。但是，动画可能会损害用户体验，如果妨碍了用户体验的话。以下是保持动画效果和愉悦的几个最佳做法：

• 速度：保持动画速度。快速的动画使软件感觉更有效率和响应。最佳持续时间取决于效果和动画曲线，但在大多数情况下，您应该保持在500毫秒以下。
• 缓动：动画曲线对精心制作的动画有很大贡献。缓解选项通常是一个安全的选择，因为动画立即启动，使他们瞬间对用户交互作出反应。
• 表现：没有动画比动画口吃更好。当动画HTML元素，旨在独家使用transform，opacity因为这是唯一的属性浏览器可以动画便宜。
• 克制：淡化动画并尊重用户偏好。动画可能会很快感到压倒性的，并导致晕动病，所以重要的是让它们微妙，并减少它们，以减少运动的用户，例如通过使用matchMedia("(prefers-reduced-motion)")JavaScript。

参考资料

• animateplus

： » animateplus.js 教程