js运动基础之匀速运动
单个属性匀速运动
1 /** 2 * 单属性匀速运动 3 */ 4 function fnSingleUniformMove(oDom, sAttr, iTarget, fn){ 5 var iSpeed, iCur; 6 clearInterval(oDom.timer); // 开启定时器前先清除定时器，避免动画重复叠加 7 oDom.timer = setInterval(function(){ 8 9 // 计算当前值 10 if(sAttr == 'opacity'){ 11 iCur = Math.round(fnGetStyle(oDom, sAttr) * 100); 12 }else{ 13 iCur = parseInt(fnGetStyle(oDom, sAttr)); 14 } 15 16 // 设置速度 17 if(iTarget < iCur){ 18 iSpeed = -10; 19 }else{ 20 iSpeed = 10; 21 } 22 23 // 当目标点和当前值差值小于速度时速度等于差值 24 if(Math.abs(iTarget - iCur) < Math.abs(iSpeed)){ 25 iSpeed = iTarget - iCur; 26 } 27 28 // 运动停止判断 29 if(iTarget == iCur){ 30 clearInterval(oDom.timer); 31 fn&&fn(); 32 }else{ 33 if(sAttr == 'opacity'){ 34 oDom.style.opacity = ( iCur + iSpeed ) / 100; 35 oDom.style.filter = 'alpha(opacity: ' + (iCur + iSpeed) + ')'; 36 }else{ 37 oDom.style[sAttr] = iCur + iSpeed + 'px'; 38 } 39 } 40 }, 30); 41 };
多属性同时改变的匀速运动
1 /** 2 * 多属性匀速运动 3 */ 4 function fnMultiUniformMove(oDom, json, fn){ 5 var iSpeed, iCur, bStop; 6 clearInterval(oDom.timer); // 开启定时器前先清除定时器，避免动画重复叠加 7 oDom.timer = setInterval(function(){ 8 bStop = true; // 进行for in 循环前为true，如果有一个没达到目标点下面就会让他变为false，最后判断该值是否为true来决定是否关闭定时器 9 for(var sAttr in json){ 10 // 计算当前值 11 if(sAttr == 'opacity'){ 12 iCur = Math.round(fnGetStyle(oDom, sAttr) * 100); 13 }else{ 14 iCur = parseInt(fnGetStyle(oDom, sAttr)); 15 } 16 17 // 设置速度 18 if(json[sAttr] < iCur){ 19 iSpeed = -10; 20 }else{ 21 iSpeed = 10; 22 } 23 24 // 当目标点和当前值差值小于速度时速度等于差值 25 if(Math.abs(json[sAttr] - iCur) < Math.abs(iSpeed)){ 26 iSpeed = json[sAttr] - iCur; 27 } 28 29 // 单属性运动停止判断 30 if(json[sAttr] != iCur){ 31 bStop = false; 32 if(sAttr == 'opacity'){ 33 oDom.style.opacity = ( iCur + iSpeed ) / 100; 34 oDom.style.filter = 'alpha(opacity: ' + (iCur + iSpeed) + ')'; 35 }else{ 36 oDom.style[sAttr] = iCur + iSpeed + 'px'; 37 } 38 } 39 } 40 41 // 整体运动停止的判断 42 if(bStop){ 43 clearInterval(oDom.timer); 44 fn&&fn(); 45 } 46 }, 30); 47 };
获取元素样式的方法
1 // 获取元素的某个样式的值 2 function fnGetStyle(oDom, sAttr){ 3 if(getComputedStyle){ 4 return getComputedStyle(oDom, null)[sAttr]; // getComputedStyle获取自定义值时返回undefined 5 }else{ 6 return oDom.currentStyle[sAttr]; // currentStyle和getAttribute一样可以读取自定义的值（这样opacity的值才能被获取） 7 }; 8 };
