Javript动画引擎anime.js

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

 7826  84  查看评论 (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 (动画)


相关插件-动画效果

  动画效果
 15250  143

消失在宇宙星空中的404页面

宇宙星空404页面
  动画效果
 9697  67

jQuery树叶掉落特效

jQuery不同树叶掉落特效代码,点击“添加更多树叶按钮”可以在顶部添加叠加更多的树叶,点击树叶会立刻掉落,兼容IE9-10,Chrome,Safari,Firefox等浏览器
  动画效果
 11981  28

超酷jQuery水波倒影特效插件

lake.js是一款可以制作水波倒影特效jQuery插件。
  动画效果
 4768  43

讨论这个项目(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
取消回复