js动画效果之缓冲动画

来源：互联网发布：京东抢单软件编辑：程序博客网时间：2024/06/07 02:39

此案例基于之前的案例，上两个例子两个物体所做的都是匀速运动，就像火车进站一样，如果在快到达目的地时速度慢下来，视觉效果会更好，就之前的代码稍微改革速度就好了~下面是效果图对比：（由于上传的是.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);     }};

0 0