Anime.js 轻量的 JavaScript 动画库

Question

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 文件。

<script type="text/javascript" src="js/anime.min.js"></script>

HTML结构

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

<article>
  <div class="blue"></div>
  <div class="green"></div>
</article>

初始化插件

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

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});

配置参数

Anime.js 动画库插件的可用配置参数有：

参数	默认值	取值
delay	0	number, function (el, index, total)
duration	1000	number, function (el, index, total)
autoplay	true	boolean
loop	false	number, boolean
direction	'normal'	'normal', 'reverse', 'alternate'
easing	'easeOutElastic'	console log anime.easings to get the complete functions list
elasticity	400	number (higher is stronger)
round	false	number, boolean
begin	undefined	function (animation)
update	undefined	function (animation)
complete	undefined	function (animation)

相关链接

• 官网：https://animejs.com/
• Anime.js 中文文档 https://www.wenjiangs.com/docs/anime-js
• 在线示例