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