转行学开发,代码100天——2018-04-25
今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用。
首先来看一个简单的例子。如下图,要使图中3个红色盒子实现鼠标移入变宽,移出缩回的动作。
<div id="div1"></div> <div id="div2"></div> <div id="div3"></div>
<style type="text/css"> div{ width: 100px; height: 20px; background-color: red; margin-top: 10px; } </style>
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementsByTagName("div"); for (var i = 0; i < oDiv.length; i++) { oDiv[i].onmouseover = function(){ startMove(this,400); } oDiv[i].onmouseout = function(){ startMove(this,30); } } }; //多物体运动框架 var timer = null; function startMove(obj,iTarget) { clearInterval(timer); timer = setInterval(function(){ var speed = (iTarget-obj.offsetWidth)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth ==iTarget){ clearInterval(timer); }else{ obj.style.width = obj.offsetWidth+speed+"px"; } },300); } </script>
可以看到,我们期望通过一个函数startMove函数实现鼠标的移入移出事件,同时给三个盒子添加这种效果。
但稍微留意,发现这里明显存在一个问题,即当鼠标快速在三个盒子上移动时,鼠标离开的盒子宽度并不会缩小到指定值,而是停留在某一位置。
这种效果显然不是我们期待的效果。那....哪里出错了呢?
查看startMove函数,发现这种基本逻辑并没有什么问题,但是将这个函数同时应用与多个物体,就出了问题。
原来是因为多物体共用一个定时器的原因。
于是将公有定时器取消,将每个物体分配一个定时器,简单地说就是给每个物体添加一个定时器属性,修改如下:
//多物体运动框架 // var timer = null; function startMove(obj,iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (iTarget-obj.offsetWidth)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth ==iTarget){ clearInterval(obj.timer); }else{ obj.style.width = obj.offsetWidth+speed+"px"; } },300); }
如此,便不会出现上述问题了。
很好,“各回各家,各找各妈”,互不干扰。
至此,一个多物体运动的框架也基本形成了。
上述的示例是通过对公有定时器变量私有化,即对多物体对象添加定时器属性的方式,实现多物体调用同一函数时互不相扰。(生活中类似的例子也很常见,比如两个小孩同时喜欢一个玩具,一个想这样玩,另一个想那样玩,两人互不相让最终。。。。所以,给他们一人一个玩具,各玩各的,就会和谐很多~~)。
见到了定时器变量不能公有化使用的例子,如果是修改其他变量呢?
不妨对样式透明度属性值修改来看看究竟。
如下4个红盒子,当鼠标移入移出时要求其透明度变化,实现淡入淡出的效果。
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementsByTagName("div"); for (var i = 0; i < oDiv.length; i++) { oDiv[i].onmouseover = function(){ console.log("mouseover"); startMove(this,100); } oDiv[i].onmouseout = function(){ console.log("mouseout"); startMove(this,30); } } // 渐变函数 var alpha =30; function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed =(iTarget-alpha)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if (alpha ==iTarget) { clearInterval(obj.timer); }else{ alpha+=speed; obj.style.filter ="alpha(opacity:"+alpha+")"; obj.style.opacity = alpha/100; } },100); } }; </script>
这段代码中,先将定时器私有化,但是在移动鼠标时,方盒的颜色变化并不理想。
这...难道alpha变量也不能共用?
是的,在多物体运动中避免使用公共变量。
多物体中避免使用公共变量。!!!
多物体中避免使用公共变量。!!!
多物体中避免使用公共变量。!!!
(重要的事情说三遍...)
简单的处理就是将变量私有化,即作为多物体对象的一个属性处理。
这样就不会出现之前的问题了。
总结一下:多物体运动中所有变量均不能共用。变量要作为物体的属性处理。