animejs走马灯_功能强大的 Javascript 动画库插件anime.js

本期介绍一个前端动画插件anime.js，anime.js 是一款功能强大的 Javascript 动画库插件，可以和 CSS3 属性，SVG，DOM 元素和 JS 对象一起工作，制作出各种高性能，平滑过渡的动画效果。

安装

npm install animejs

bower install animejs

在页面中引入 anime.min.js 文件。

HTML 结构

初始化插件

通过anime() 方法来构造一个对象实例，以json 对象的方式传入需要的参数：

var myAnimation = anime({

targets: ['.blue'],

translateX: '13rem',

rotate: 180,

borderRadius: 8,

duration: 2000,

loop: true

});

配置参数

微信截图_20201222214345.png

参数使用教程

动画的目标对象(targets)

CSS选择器

不可使用伪元素

anime({

targets: '.css-selector-demo .el',

translateX: 250

});

DOM元素 /元素序列

使用DOM节点或节点的集合作为动画目标

var elements = document.querySelectorAll('.dom-node-demo .el');

anime({

targets: elements,

translateX: 270

});

JAVASCRIPT对象

以JavaScript对象作为动画目标，这个对象必须含有至少一个数字属性。

var logEl = document.querySelector('.battery-log');

var battery = {

charged: '0%