1.   阿里云服务器1888元代金券领取
  2.   本网站所有源码包解压密码:www.youhutong.com
登录  帮助问答

Javript动画特效插件anime.js

小川 特效组件
查看演示  

效果图:

001.gif

002.gif

描述说明:

anime.js 

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

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

特征

  •  具体的动画参数

  •  具体目标值

  •  多个定时值

  •  播放控制

  •  运动路径

例如动画

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

在CodePen活生生的例子

浏览器支持

  •  Chrome

  •  Safari

  •  Opera

  •  Firefox

  • ? IE 10+

快速开始

npm install animejs/ bower install animejs或下载

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

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

或者在你的JavaScript导入

import anime from 'animejs'

API

目标

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

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

参数

名称默认类型
延迟delay0number,function(EL,指数,总)
为期 duration1000number,function(EL,指数,总)
自动播放autoplaytrueboolean
循环loopfalsenumber, boolean
方向direction'normal''normal','reverse','alternate'
缓解easing'easeOutElastic'控制台日志anime.easings以获得完整的功能列表
弹性elasticity400number (更高更强)
回合roundfalsenumber, boolean
开始beginundefinedfunction (动画)


 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
查看演示  

转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/418.html

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情