原生js实现完美运动框架

封装获取行内样式

function getStyle(obj,attr){
	return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}

实现完美运动框架

function sport(obj,json,fn){
	clearInterval(obj.timer);  //解决多物体运动问题
	obj.timer = setInterval(function(){
		let flag = true; //声明变量用来判断是否执行完毕
		for(let attr in json){
			//判断传入需改变数据，获取当前值
			let current = attr === 'opacity' ? Math.floor(parseFloat(getStyle(obj,attr)) * 100) : parseInt(getStyle(obj,attr);
			//设置速度，除数可根据速度不同进行改变
			let speed = (json[attr] - current ) / 8;
			//解决运动物体无法准确到达目的的
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
			//判断是否达到目的的
			if(json[attr] !== current){
				flag = false;
			}
			//实现物体运动
			if(attr === 'opacity'){
				obj.style.opacity = (current + speed) / 100;
				obj.style.filter = 'alpha(opacity =' + (current + speed) + ')';
			}else{
				obj.style[attr] = current + speed + 'px';
			}
		}
		if(flag){//判断是否执行完毕
			clearInterval(obj.timer);
			if(fn instanceof Function){//判断是否存在回调函数
				fn();
			}
		}
	},30)
}