0.1.3 • Published 2 years ago
iarco-animate v0.1.3
js动画插件
下载安装
npm i iarco-animate -D
快速度上手
var div = document.querySelector('div')
var animate = new myPlugin.Animate({
begin:{
width:100
},
end:{
widht:500
},
onmove:function(e){
div.style.width = e.currentData.width + 'px'
}
})
animate.start()
api
api | 作用 |
---|---|
Animate | 构造函数创建实例对象--- |
----- | ---- |
Animate.prototype.start | 开始执行动画 |
Animate.prototype.stop | 停止执行动画 |
Animate
创建动画实例对象
Option参数
参数 option/object | 描述 | 类型 |
---|---|---|
Duration | 梅桢的时间间隔 | number |
Total | 动画执行总时长 | Number |
begin | 动画开始前样式 | Object |
end | 动画结束样式 | object |
Onstart | 动画开始钩子函数 | Function |
Onmove | 动画进行整钩子函数 | Function |
Onover | 动画结束钩子函数 | Function |
var animate = myPlugin.Animate({
})
start
开始执行动画
ani.start()
- 无参数
- 无返回值
stop
停止执行动画
ani.stop
- 无参数
- 无范沪指
事件
事件名 | 描述 |
---|---|
Onstart | 动画开始时候触发时间 |
Onmove | 动画进行中, 监听动画每一帧 |
Onover | 动画结束时候触发事件 |
onstart
动画开始的时间处理函数
参数
Option | Animate配置参数 | object |
---|---|---|
Num | 动画执行总次数 | Number |
currentData | 监听所有属性,每一帧变化的值 | Object |
currentNum | 当前执行到第几贞 | Number |
distant | 所有属性运行总位置 | Object |
everyDistant | 所有属性中每个属性运行的的平均值 | object |
onmove
监听动画每一帧的运动
参数
Option | Animate配置参数 | object |
---|---|---|
Num | 动画执行总次数 | Number |
currentData | 监听所有属性,每一帧变化的值 | Object |
currentNum | 当前执行到第几贞 | Number |
distant | 所有属性运行总位置 | Object |
everyDistant | 所有属性中每个属性运行的的平均值 | object |
onover
监听动画结束时间
参数
Option | Animate配置参数 | object |
---|---|---|
Num | 动画执行总次数 | Number |
currentData | 监听所有属性,每一帧变化的值 | Object |
currentNum | 当前执行到第几贞 | Number |
distant | 所有属性运行总位置 | Object |
everyDistant | 所有属性中每个属性运行的的平均值 | object |