animejs基本使用

安装

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动画参数

名称默认值说明
targetsnull作用动画的目标。可以是任意的选择器例:targets:'.example'targets:'#example1',也可以是数组字符多个对象[‘.example','#example1']
duration1000动画完成所需时间
delay0延时,经过多长时间才开始动画
easingeaseOutElastic时间曲线,即一个动画以什么样的速率去完成、匀速、非匀速,弹跳甚至自定义等等。具体效果:传送门传送门
loopfalse是否重复动画
css属性-各类css属性 如:backgroundColor,height,widht、top等等
CSS的transforms属性动画translateX 、translateY、translateZ、rotate 、rotateX、scale等等。。

更多

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值