Javript动画引擎anime.js

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

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


相关插件-动画效果

HTML5 Canvas粒子效果文字动画特效(酷!)

HTML5 Canvas粒子效果文字动画特效
  动画效果
 36861  419

ios页面过渡效果插件Kontext

灵感来自于iOS, Kontext是context-shift过渡。使用JavaScript创建,CSS 3d变换和CSS动画
  动画效果
 15150  57

18种垂直分页导航按钮动画特效

这是一组效果非常炫酷的垂直分页导航按钮动画特效。这组特效通用18种效果,可以用于制作幻灯片、页面切换和其它容器组件切换的分页导航按钮
  动画效果
 5436  55

SVG文字变形动画特效

这是一款使用效果非常炫酷的HTML5 SVG文字变形动画特效。该特效使用SVG和anime.js,通过SVG描边动画来完成各种漂亮的字母动画特效。
  动画效果
 7220  86

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