animate用法 js原生_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";

//web 前端中文站 www.lisa33xiaoq.net

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] }); }; //lisa33xiaoq.net

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 模块提供，这意味着您可能需要根据您的浏览器支持策略进行传输。该库的工作原理

Chrome 61

Safari 11.1

火狐 57 与?dom.moduleScripts.enabled

推荐用法

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

速度：保持动画速度。快速的动画使软件感觉更有效率和响应。最佳持续时间取决于效果和动画曲线，但在大多数情况下，您应该保持在 500 毫秒以下。

缓动：动画曲线对精心制作的动画有很大贡献。缓解选项通常是一个安全的选择，因为动画立即启动，使他们瞬间对用户交互作出反应。

表现：没有动画比动画口吃更好。当动画 HTML 元素，旨在独家使用 transform，opacity 因为这是唯一的属性浏览器可以动画便宜。

克制：淡化动画并尊重用户偏好。动画可能会很快感到压倒性的，并导致晕动病，所以重要的是让它们微妙，并减少它们，以减少运动的用户，例如通过使用 matchMedia(“(prefers-reduced-motion)”)JavaScript。

参考资料

animateplus

【注：本文源自网络文章资源，由站长整理发布】

web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权

转载请注明原文链接：animateplus.js 教程