day38—JavaScript的运动基础-匀速运动

转行学开发，代码100天——2018-04-23

 

一、运动基础框架

JavaScript的运动可以广义理解为渐变效果，直接移动效果等，图网页上常见的“分享到”，banner，透明度变化等。其实现的基本方法就是利用前面学到的定时器。

通过学习，总结一下基本的运动实现——运动框架。

 

运动框架可以理解为实现元素运动的流程。比如让一个div盒子运动起来，即给其left样式加一个定时器即可。

<input type="button" value="开始运动" id="btn">
    <div id="div1"></div>

<script type="text/javascript">
    var timer =null;
    window.onload = function () {
        var speed =6;//设置移动速度
        var oDiv = document.getElementById('div1');
        var oBtn = document.getElementById('btn');
        oBtn.onclick =function(){
            clearInterval(timer);  //运动前需要关闭其他所以定时器
            timer =  setInterval(function(){
                if(oDiv.offsetLeft>300) {  //在指定范围内移动
                    clearInterval(timer);
                }else
                oDiv.style.left = oDiv.offsetLeft+speed+"px";
            },200);
        }
    }
</script>

 

 注意：

1、实现运动时，往往要设置一个速度变量speed，用来控制物体的运动速度。

2、这里能实现在指定范围内的移动，但这里存在一个移动的问题，按照 距离= 速度x时间 ，往往不会恰好在指定位置停止。所以需要设置好停止条件。

3、如果在按钮事件—开始运动之时，连续点击"开始运动“，若没有关闭其他定时器，DIV盒子会越来越快，这就不符合设计要求了。所以在运动前需要添加 

clearInterval(timer);

4、这种固定速度的运动方式可以成为匀速运动。
5、运动的实现，需要物体绝对定位。position:absolute;top:0;left0;


二、应用案例

2.1 网页“分享到”“反馈”等侧边栏效果。

当鼠标移动到“分享到”区域时，div盒子向左伸出，移开鼠标时，回到原位。

按照前面对运动框架的分析，我们同样需要写一个运动的框架，将其放置到鼠标onmouseover和onmouseout事件中。

 CSS样式设置：

*{margin: 0;padding: 0;}

 #div1{width: 160px;height: 260px;background: #666;position: absolute;top: 200px;left: -160px;}
 #div1 span{width: 20px;height: 60px;font-size:12px;color:#fff;background: blue;line-height:20px;position: absolute;left:160px; top: 120px;}

        //右移
        function startMove1(){
            var odiv = document.getElementById("div1");
            clearInterval(timer);
            timer= setInterval(function(){
                if (odiv.offsetLeft==0) {
                    clearInterval(timer);
                }else
                {
                    odiv.style.left = odiv.offsetLeft+10+"px";
                }
            },200);
        }
            //左移
            function startMove2(){
                var odiv = document.getElementById("div1");
                clearInterval(timer);
                timer= setInterval(function(){
                    if (odiv.offsetLeft==160) {
                        clearInterval(timer);
                    }else
                    {
                        odiv.style.left = odiv.offsetLeft-10+"px";
                    }
                },200);
            }

然后在鼠标事件中添加事件

 var oDiv = document.getElementById("div1");
          
              //鼠标移入
              oDiv.onmouseover = function(){
                  startMove1();
              };
              //鼠标移出
              oDiv.onmouseout = function(){
                  startMove2();
              };

这样就实现了这个侧边栏的移出移进的动作。

但这并不意为着代码的结果，观察“左移”和“右移”的代码，高度相似，不同之处仅仅在于“偏移量”和“移动速度”。因此，可以考虑将这两种实现方式通过传参来进行优化。

增加参数1：iTarget 目标位置 ;参数2：speed 移动速度

 

 var timer = null; //设置定时器变量
        var speed = 10; //设置速度变量
        function startMove(iTarget,speed){
            var odiv = document.getElementById("div1");
            clearInterval(timer);
            timer= setInterval(function(){
                if (odiv.offsetLeft==iTarget) {
                    clearInterval(timer);
                }else
                {
                    odiv.style.left = odiv.offsetLeft+speed+"px";
                }
            },200);
        }

             //鼠标移入
              oDiv.onmouseover = function(){
                  // startMove1();
                  startMove(0,10);
              };
              //鼠标移出
              oDiv.onmouseout = function(){
                  // startMove2();
                  startMove(-160,-10);
              };

如此，既能满足基本的功能效果，又能大量优化代码。

哈哈~大功告成啦！

大功告成？NO,还可以继续优化。

上文中优化的代码，有两个参数，能否进一步精简呢？结合现实，能否通过基本的生活常识，推断出移动的速度呢？

答案是可以的，当目 前点位置-当前位置>0,则速度为正，前点位置-当前位置<0,则速度为父，如此我们可以根据这个基本判断，将速度参数省去。不妨一试。

 

 

    window.onload =function(){
              var oDiv = document.getElementById("div1");
          
              //鼠标移入
              oDiv.onmouseover = function(){
                  // startMove1();
                  // startMove(0,10);
                  startMove(0);
              };
              //鼠标移出
              oDiv.onmouseout = function(){
                  // startMove2();
                  // startMove(-160,-10);
                  startMove(-160);
              };
        };
        var timer = null; //设置定时器变量
        var speed = 10; //设置速度变量
        function startMove(iTarget,speed){
            var odiv = document.getElementById("div1");
            clearInterval(timer);
            timer= setInterval(function(){
                if (odiv.offsetLeft<iTarget) { //右移
                    speed=10;
                }else
                {
                    speed =-10;
                }

                if (odiv.offsetLeft==iTarget) {
                    clearInterval(timer);
                }else
                {
                    odiv.style.left = odiv.offsetLeft+speed+"px";
                }
            },200);
        }

这样一来，对代码已足够优化了，可以放心学习其他功能了。

 

 2.2 图片的淡入淡出效果——透明度设置

图片的淡入淡出，即通过定时器设置物体的透明度值来体现，其实现过程与上述的侧边栏功能非常相似。

如：

上述div盒子，鼠标移入时，其透明度值越来越大（增大到最大值100），鼠标移出时，透明度值越来越小（回到初始值）

css实现过程：

<style type="text/css">
    #div1{width: 300px;height: 300px; background: red;filter: alpha(opacity:30); opacity:0.3;}
</style>

JavaScript实现：

<script type="text/javascript">
        window.onload = function(){
           var odiv = document.getElementById("div1");
           odiv.onmouseover = function(){
              startMove(100);
           }
           odiv.onmouseout = function(){
                startMove(30);
           }
        };
        var timer =null;//定时器变量
        var speed =0;
        var alpha =30;//透明度变量
        function startMove(iTargert){

           var oDiv = document.getElementById("div1");
           clearInterval(timer);
           
           timer = setInterval(function(){
                   if (alpha<iTargert) {
                   speed = 10;
               }else
               {
                   speed=-10;
               }
               if (alpha==iTargert) {
                   clearInterval(timer);
               }else
               {
                   alpha+=speed;//物体的透明度值的变化
                   //设置透明度样式
                   oDiv.style.filter = 'alpha(opacity:'+alpha+')';
                   oDiv.style.opacity = alpha/100;
               }
           },1000);
        }
    </script>

可以看出，上述的实现过程，增加了一个透明度值变量（因为无法直接获取透明度样式的值），通过设置该值的变化速度，来实现物体淡入淡出的效果，其实现原理与侧边栏效果基本一致，也就是所谓的运动框架不变。

总结：通过本次课程的学习，进一步了解定时器的应用，以及常见网页上的运动效果的实现过程。对于基本功能实现的代码，要注意代码的优化，尽量减少重复的代码编写，减少参数设置。此外，要学会通过变量的设置来对问题进行转化，也应认识到高级程序的编写终究落脚到对变量值的处理（老师说的，日后深刻体会吧....）。