缓动动画步长取整问题

     function animate(obj,target){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var step=(target-obj.offsetLeft)/10;//可能出现小数的情况 要取整 正数向上取整  负数向下取整 (往下取整 后面步长越来越小 出现的小数只能是0 还是有误差  往上取 会出现1 慢慢填成500)
                console.log(step);
                step=step>0?Math.ceil(step):Math.floor(step);
                if(obj.offsetLeft==target){
                    clearInterval(obj.timer);
                }

                obj.style.left=obj.offsetLeft+step+'px';//1的位置加一个逐渐变小的值可以实现缓动 步长公式:(目标值-现在的位置)/10  10越大停的越慢
            },15)
        }

如果步长是正数的话,向下取整会造成后面的步长减到小于1时,之后的值都为0,所以还是会产生定位位置的误差(移动距离小于目标位置大小)。如果向上取整会将后面的小于1的步长都变成1,再慢慢的填到target,直到移动距离等于目标位置。理论上,步长后面除数字很大的话,会造成整个运动看起来像匀速运动(不断的用1来填  这样来想选10还是有道理的)。

核心:步长为正 向上取整 步长为负 向下取整

   

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值