扫一扫分享
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) | 
仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!
手机预览
