js动画效果之缓冲动画

此案例基于之前的案例，上两个例子两个物体所做的都是匀速运动，就像火车进站一样，如果在快到达目的地时速度慢下来，视觉效果会更好，就之前的代码稍微改革速度就好了~下面是效果图对比：（由于上传的是.gif格式的图片，可能效果看起来不是很明显，可以自己试下）


js代码实现改动部分（其他与之前相同）

var speed=Math.floor((iTarget-odiv.offsetLeft)/15);
                   if(odiv.offsetLeft==iTarget){
                    clearInterval(timer);
                   }else{
                    odiv.style.left=odiv.offsetLeft+speed+'px';
                   }

实现回到顶部效果使用缓冲的效果优势就更加明显了，以下是回到顶部按钮的js代码以供参考：

window.onload = function(){
    var obtn = document.getElementById('btn');//获取按钮
    var clientHeight = document.documentElement.clientHeight;   //获取当前可视区高度
    var timer = null;                  //定义定时器
    var isTop = true;
    window.onscroll = function(){     
        var osTop = document.documentElement.scrollTop+document.body.scrollTop;//兼容chrome与IE方法之一，可用其他方法获取滚动条当前高度
        if(osTop >=clientHeight){//在滚动条超过第一页时显示按钮，否则隐藏
            obtn.style.display = 'block';
        }else{
            obtn.style.display = 'none';
        }
        if(!isTop){    //判断是否到顶部
            clearInterval(timer);
        }
        isTop = false;
    };
    obtn.onclick = function(){
        console.log(1);
        timer = setInterval(function(){
            var osTop = document.documentElement.scrollTop+document.body.scrollTop;
           var v = Math.floor(-osTop/12);//向下取整，否则滑不到最顶部
            document.documentElement.scrollTop = osTop+v;
            document.body.scrollTop=osTop+v; 
            isTop = true;
            if(osTop == 0){
                clearInterval(timer);
            }
        },30); 

    }
};