使用JavaScript 实现简单的移动和缓动的动画效果

一、H5的简单布局

    <div class="box box1"></div>
    <div class="box box2"></div>

二、css的布局

简易的布局出两个不同颜色的‘盒子’。

        <style type="text/css">
            *{
                padding:0px;
                margin:0px;
            }
         .box{
             width: 200px;
             height: 200px;
             background: blue;
             position: absolute;
             left:0px
         }
         .box2{
             background: red;
             margin-top: 210px;
         }
         </style>

三、获取元素

        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');

四、使用js来实现‘盒子’移动

可以使用函数封装，来实现，修改调用，不需要在代码中修改，可以减少出错的几率。

function myRun(box,h1,h2){  //封装函数
var myInter = setInterval(function(){
var offsetLeft = box.offsetLeft;
var num = h1;     //每次都移动h1个像素
var target = h2;  //一共移动的距离
if(offsetLeft==target){  //通过if来判断，到达了设定距离，就会删除间隔函数
        clearInterval(myInter);
    }else{
        box.style.left = offsetLeft+num+'px';//没有达到距离，一直赋值给‘盒子’左边距
                }
    },1000)}
    box1.onclick=function(){
    myRun(this,50,200); } //给‘盒子’设计点击事件，点击才会出现移动，this指向box1，里面是所调用的值，可以直接在里面修改，移动一次的距离，一共移动的距离
            

效果展示

五、使用js来实现缓动效果

依旧可以使用函数来封装，达到简洁的效果

大致代码与js移动相同，中间判断与上文稍微有些不同，其中的含义是，第一次移动取移动距离的十分之一，接下来的每一次移动，都是取省下来还剩多少距离的十分之一，取整是为了，在无线接近于所设置的距离可以移动。

             function move(obj,sum){
                var liLi = setInterval(function(){
                    var offsetLeft =obj.offsetLeft;
                    var num  = (sum - offsetLeft)/10;
                    num > 0 ?  Math.ceil(num):Math.floor(num);
                    if(offsetLeft==sum){
                        clearInterval(liLi);
                    }else{
                        obj.style.left = offsetLeft+num+'px';
                    }
                },1000)
             }   box2.onclick=function(){
                    move(this,200);
            }

效果展示

六、完整代码评论区自取