扫一扫分享
Aanime.js 是一款功能强大的Javascript 动画库插件。anime.js 可以和css3 属性,SVG,dom 元素和JS 对象一起工作,制作出各种高性能,平滑过渡的动画效果。
npm install animejs
bower install animejs
或者下载anime.js 的文件包
在页面中引入anime.min.js 文件。
<script type="text/javascript" src="js/anime.min.js"></script>
以动画两个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) |
手机预览