Javript动画引擎anime.js

查看演示立即下载

插件描述：灵活的轻型Javript动画库。

anime.js是一个灵活的轻型JavaScript动画库。

它与CSS，个别变换，SVG，DOM属性和JS对象。

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});

在CodePen活生生的例子

1	`npm install animejs/ bower install animejs或下载`

然后插入anime.min.js你的HTML：

1	`<script` `src="anime.min.js"></script>`

或者在你的JavaScript导入

1	`import anime from 'animejs'`

目标

定义元素或JS对象设置动画。

接受	例子
CSS选择 CSS Selectors	'div'，'.thing'，'path'
DOM元素 DOM Element	document.querySelector('.thing')
节点列表 Nodelist	document.querySelectorAll('.thing')
JavaScript对象 JavaScript Object	{prop1: 100, prop2: 200}
JavaScript的数组 JavaScript Array	['.thing-1', 'div']

名称	默认	类型
延迟delay	0	number，function（EL，指数，总）
为期 duration	1000	number，function（EL，指数，总）
自动播放autoplay	true	boolean
循环loop	false	number， boolean
方向direction	'normal'	'normal'，'reverse'，'alternate'
缓解easing	'easeOutElastic'	控制台日志anime.easings以获得完整的功能列表
弹性elasticity	400	number （更高更强）
回合round	false	number， boolean
开始begin	undefined	function （动画）

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com