animejs走马灯_Anime.js 轻量的 JavaScript 动画库 - 文章

Anime.js (/ˈæn.ə.meɪ/) 是一个轻量的 JavaScript 动画库， 拥有简单而强大的 API。可对 CSS 属性、 SVG、 DOM 和 JavaScript 对象进行动画。

anime.js 的内置交错系统使复杂的动画和重叠动画变得简单。它可以用于时间和属性，可以动画在多个 CSS 在单个 HTML 元素上同时使用不同的时序转换属性，使用完整的内置回调和控制功能，同步播放，暂停，控制，反向和触发事件。

Anime.js适用于任何网络。CSS，SVG，DOM 属性和 JavaScript 对象：使用单个统一 API 为所有内容设置动画。

使用方法

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

安装 Anime.js

npm install animejs

bower install animejs

或者下载 anime.js 的文件包

使用方法

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

HTML结构

以动画两个div 元素为例，HTML 结构如下：

初始化插件

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

var myAnimation = anime({

targets: ['.blue', '.green'],