animateplus.js 教程

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

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

安装

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模块提供,这意味着您可能需要根据您的浏览器支持策略进行传输。该库的工作原理<script type=module>与以下浏览器一样:

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

推荐用法

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

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

参考资料

  • animateplus

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

0
如无特殊说明,文章均为原作者原创,转载请注明出处
  • 转载请注明来源:animateplus.js 教程
  • 本文永久链接地址:https://www.lisa33xiaoq.net/905.html

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到