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:;padding:;}

 #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>

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

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

巴特西

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

最新文章

热门文章