day40—JavaScript多物体运动框架

转行学开发，代码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变量也不能共用？

是的，在多物体运动中避免使用公共变量。

多物体中避免使用公共变量。！！！

多物体中避免使用公共变量。！！！

多物体中避免使用公共变量。！！！

（重要的事情说三遍...）

简单的处理就是将变量私有化，即作为多物体对象的一个属性处理。

这样就不会出现之前的问题了。

总结一下：多物体运动中所有变量均不能共用。变量要作为物体的属性处理。