Javript动画引擎anime.js

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

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


相关插件-动画效果

ios页面过渡效果插件Kontext

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

jquery添加商品至购物车特效

jquery添加商品至购物车特效,带飞入效果
  动画效果
 2670  29

html5酷炫购物车结算动画特效

动画效果蛮好可以学习
  动画效果
 7972  40

jquery交互式3D

jQuery的交互式3D让您创建一个使用多个图像帧允许用户拖动和处理图像的3D互动对象。
  动画效果
 14774  33

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