安装
npm install animejs
引入
var anime = require("animejs/lib/anime");
使用
anime(options);
例: 对一个id为 example 的 dom
高度进行从0 到 100的动画
anime({
targets: '#example',
height: [0, 100],
duration: 300,
easing: "easeInOutQuad"
});
options动画参数
名称 | 默认值 | 说明 |
---|---|---|
targets | null | 作用动画的目标。可以是任意的选择器例:targets:'.example' 或targets:'#example1' ,也可以是数组字符多个对象[‘.example','#example1'] |
duration | 1000 | 动画完成所需时间 |
delay | 0 | 延时,经过多长时间才开始动画 |
easing | easeOutElastic | 时间曲线,即一个动画以什么样的速率去完成、匀速、非匀速,弹跳甚至自定义等等。具体效果:传送门或传送门 |
loop | false | 是否重复动画 |
css属性 | - | 各类css属性 如:backgroundColor,height,widht、top等等 |
CSS的transforms属性动画 | translateX 、translateY、translateZ、rotate 、rotateX、scale等等。。 |
…
更多
更多用法 到animejs[中文]、animejs英文