anime 介绍
Aanime.js 是一款 功能 强大的JavaScript 动画库 插件 。anime.js 可以和css3 属性 ，SVG，DOM 元素和js 对象一起工作，制作出各种高 性能 ，平滑过渡的动画 效果 。
安装anime.js
npm install animejsbower 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
number,function (el,index,total)
duration
1000
number,total)
a utop lay
true
boolean
loop
false
number,boolean
direction
' nor mal'
' nor mal','reverse','alternate'
easing
'ea SEO utElastic'
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/
网站描述: 一个 轻量的JavaScript 动画库
anime官方网站
官方网站： https://animejs.com/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。