安装anime.js
- 作者: 五速梦信息网
- 时间: 2026年03月19日 18:11
Aanime.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>结构
以动画两个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) |
仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!
- 上一篇: colors.js安装
- 下一篇: 可在任何地方使用的免费图片和视频






