JS小问题之——缓冲运动

Posted 2020-08-31

今天写一个实现动画缓冲的效果，源代码用到了一个小技巧，之前觉得并没有什么用，后来觉得还是很有必要的，贴上来记录一下。

代码如下：

//图片切换，淡入淡出效果
    function show(a){
        index=a
        for(i=0;i<onum.length;i++)onum[i].className="";
        onum[index].className="current";
        clearInterval(timer);
        console.log(oimg[0].offsetHeight)
        var oimgtop=-(index*oimg[0].offsetHeight)
        timer=setInterval(function(){
            var iSpeed=(oimgtop-oul[0].offsetTop)/10;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            oul[0].offsetTop==oimgtop?clearInterval(timer):oul[0].style.top=oul[0].offsetTop+iSpeed+"px"
        },30)
    }

timer指向了一个周期函数是这段代码实现缓冲效果的关键，通过每30ms计算一次oimgtop，并将其与目标值的差除以10就是我们每次需要增加/减少的量，可见每次的增加/减少量是在逐渐减少的，也就实现了缓冲效果。

但是之前我一直以为这样不是永远加不到目标值么。

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

通过Math.ceil处理我们每次的增加量，来使我们快接近目标值的时候，每次增加的量都是1或者-1，这样一步步靠近我们的目标值。

当 目标值=当前值 的时候，清除timer周期函数。这里需要注意的是，目标值应该是一个整数！