Javript动画引擎anime.js

所属分类:其他-动画效果

 6861  77  查看评论 (4)
Javript动画引擎anime.js ie兼容10

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 (动画)


相关插件-动画效果

数字滚动插件

实现数字从0递增到想要的数字的效果
  动画效果
 4959  35

jQuery温度计

jQuery目标动态温度计是一款基于jquery+css3实现的动态温度计特效。
  动画效果
 12925  18

jQuery数据滚动

当页页滚动到一定位置时,数值自动增加动态效果
  动画效果
 10111  136

3D云 (酷!)

3D云在云端!
  动画效果
 16372  393

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    四季豆好吃 0
    2016/12/29 1:12:54

    如何换自己的文字呢

    回复
    strength 0
    2016/12/27 17:12:24
    -怪异 0
    2016/12/21 17:12:24

    真的很想知道在哪里可以把字换点

    回复
    mote 0
    2016/12/14 15:12:05
取消回复
    PROMULGATOR

    命定迷伤

    广东省深圳市