anime
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)
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/
网站描述:一个轻量的JavaScript 动画库
anime官方网站
官方网站:https://animejs.com/