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 |