animejs基本使用

文章

• • • 安装
    • 引入
    • 使用
    • options动画参数
    • 更多

安装

npm install animejs 
           

引入

使用

例: 对一个

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	延时，经过多长时间才开始动画
easing	easeOutElastic	时间曲线，即一个动画以什么样的速率去完成、匀速、非匀速，弹跳甚至自定义等等。具体效果：传送门或传送门
loop	false	是否重复动画
css属性	-	各类css属性 如：backgroundColor，height，widht、top等等
CSS的transforms属性动画	translateX 、translateY、translateZ、rotate 、rotateX、scale等等。。

…

更多

更多用法 到animejs[中文]、animejs英文