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变量也不能共用？

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

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

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

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

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

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

巴特西

day40—JavaScript多物体运动框架

最新文章

热门文章