转行学开发，代码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变量也不能共用？
是的，在多物体运动中避免使用公共变量。
多物体中避免使用公共变量。！！！
多物体中避免使用公共变量。！！！
多物体中避免使用公共变量。！！！
（重要的事情说三遍...）
简单的处理就是将变量私有化，即作为多物体对象的一个属性处理。
这样就不会出现之前的问题了。
总结一下：多物体运动中所有变量均不能共用。变量要作为物体的属性处理。