js变速动画函数封装

最新推荐文章于 2024-07-18 11:48:33 发布

X-Rich

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量113

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_64156125/article/details/128307993

版权

function animate(element,target){
    //清理定时器
    clearInterval(element,timeId);
    element.timeId = setInterval(function(){
        //获取元素的当前位置
        var current = element.offsetLeft;
        //移动的步数
        var step = (target-current)/10;
        //正数向上取整，负数向下取整
        step = step>0?Math.ceil(step):Math.floor(step);
        current += step;
        element.style.left = current + "px";
        if(current===target){
            //清理定时器
            clearInterval(element,timeId);
        }
        //测试代码
        console.log("目标位置：" +target+ ",当前位置：" +current+ "，每次移动步数：" +step);
    },20);
}

例

current:100 target:200

变速（缓动）效果：（target-current）/10

step=200-100=100/10=10

current=100+10=110

step=200-110=90/10=9

current=110+9=119

step=200-119=81/10=8.1---取9（取更大的，使离目标更近：正数向上取整，负数向下取整）

current=119+9=128 ...

按这种情况，当target和current之间的距离小于10时,step的绝对值肯定小于1，所以至少都能移动1px
————————————————
版权声明：本文为CSDN博主「Galaksen」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41857060/article/details/100062108