javascript - 原生JS运动框架性能优化问题???
PHP中文网
PHP中文网 2017-04-10 14:22:06
0
0
693

这个运动框架在性能方面有没有修改优化的地方呢,比如 for/in 能不能换成普通的for循环,如果可以该如何换? setInterval能不能换成setTimeout ,如果可以,该如何换?

框架示例源码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>运动框架性能优化</title>



<script> window.onload=function(){ var ob=document.getElementById('b1'); startMove(ob,{"width":700,"height":700}); // 框架使用方法 } // end onload function getStyle(obj,name){ // 获取属性值 用于运动框架里 if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } //end getStyle function startMove(obj,json){ var totalOk, // totalOk 为是否到达目标值 判断 curr当前对象的 要变化的属性值 curr, speed, attr; clearInterval(obj.timer); //先清空定时器 obj.timer=setInterval(function(){ totalOk=true; // 是否到达目标 判断 变量 for(attr in json){ //遍历 传进来的属性 {"height":xx,"width":xxx} curr=0; if(attr=='opacity'){ // 透明度变化 与 宽高 等这些值变化 不一样 所以做个判断 curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=Math.round(parseInt(getStyle(obj,attr))); } // 取属性值 speed=(json[attr]-curr)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); // 定义运动形式 及 初始化运动值 if(curr!=json[attr]) // 如果 没到达 目标 为false; totalOk=false; if(attr=='opacity'){ // 透明度变化 与 宽高 等这些值变化 不一样 所以做个判断 obj.style.filter='alpha(opacity:'+(curr+speed)+')'; //兼容IE6 obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+'px'; } // 计算运动 } // end for/in //循环结束后 判断所有动画是否已经执行到位 如果到位 则关闭定时器 否则继续执行动画 不关闭定时器 if(totalOk){ // 如果到达目标 关闭定时器 clearInterval(obj.timer); }; },10); } // end startMove; </script>

</head>

<body>


<p id="b1" style="width:100px;height:100px;background:#0099FF;"></p>



</body>
</html>
PHP中文网
PHP中文网

认证高级PHP讲师

reply all(0)
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template