原生JS封装运动框架(二)

大家好,我们又见面了,昨天我们封装了一个简单的运动框架,今天 来完善一下,如下:

昨天我们传入了一堆的参数,我来改善一下,把name和value变成一个json传进去,把dur,easing,fn三个参数变成一个完整的一个对象传进去.

//dur,easing,fn
function move(obj,json,complete) {
// 用计时器前先清除,防止多次点击
　　clearInterval(obj.timer);
// 设置complete的默认值
//如果有就是用户传入的值,否则就是一个空对象
　　var complete=complete||{};
//时间:如果有就是用户传入的值,否则默认2000
　　complete.dur=complete.dur||2000;
//运动方式:如果有就是用户传入的值,否则默认匀速
　　complete.easing=complete.easing||"linear";
// 总步数=总时间÷计时器设定的时间
　　var count = parseInt(complete.dur / 30);
// 起始位置,先定义一个json
　　var start={};
// 总距离=传入的距离-起始距离
　　var dis={};
// 因为传入了多个起始目标和多个终点目标,所以先循环
　　for(name in json){
　　　　start[name]=parseFloat(setStyle(obj,name));
　　　　dis[name]=json[name]-start[name];
　　}
// 每步运动的距离=总距离÷总步数
//　　 var spen = dis[name] / count;
// 定义起始步数
　　var n = 0;
　　obj.timer = setInterval(function () {
　　n++;
　　for(name in json){
// 　　 console.log(name);

到这里我们要做一些简单的运动方式,我们可以自己模拟数学函数

 

　　var a=n/count;
　　switch(complete.easing){
　　　　case "linear":
//起始位置+当前运动的距离*总距离÷总步数,因为数学中先乘后除或先除后乘结果都一样
　　　　var cur=start[name] + a * dis[name];
　　　　break;
　　　　case "ease-in":
//匀加速=a*a*a;
　　　　var cur=start[name] + Math.pow(a,3) * dis[name];
　　　　break;
　　　　case "ease-out":
　　　　var a=1-n/count;
// 匀减速=1-a*a*a;
　　　　var cur=start[name] +(1-Math.pow(a,3)) * dis[name];
　　　　break;
　　};
// 判断属性是不是透明度,透明度不用加单位
　　if(name=='opacity'){
　　　　obj.style[name]=cur;
// 兼容IE低版本,IE的透明度是1到100
　　　　obj.style.filter='alpha('+cur*100+')';
　　}else {
　　　　obj.style[name] = cur + "px";
　　};
}

// 判断运动是否完成
　　if (n == count) {
// 完成后清除定时器,停止运动
　　　　clearInterval(obj.timer);
// 判断用户是否传入回调函数
　　　　complete.fn && complete.fn();
　　　};
　　}, 30);
};
// 获取非行间样式
function setStyle(obj,name){
// 考虑兼容性问题
　　if(obj.currentStyle){//不兼容火狐和谷歌
　　　　return obj.currentStyle[name];
　　　}else{
　　　　return getComputedStyle(obj,false)[name];//不兼容IE
　　};
};

原生JS我们就封装到这里了,但我们写的这个运动框架不是万能的,有需要还是要自己想办法的,再见了!