iarco-animate

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