javascript缓动动画的js代码

仟橙

已于 2022-06-09 17:07:22 修改

阅读量140

点赞数 2

分类专栏： javascript js 代码文章标签： javascript 前端 js

于 2022-06-07 10:40:27 首次发布

本文链接：https://blog.csdn.net/aptx_4869_x/article/details/125160826

版权

代码同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

函数

animate（移动对象，目标位置，回调函数）

animate ( obj , target , callback )

原理

速度越来越慢

// 1 移动距离越来越小

// 2 设置步长（目标位置-当前位置）/10

// 3 步长每次不一样，写在定时器里

代码部分

function animate(obj,target,callback){
        clearInterval(obj.timer)
        obj.timer=setInterval(function(){
        
            var step=(target-obj.offsetLeft)/10
            step= step>0 ? Math.ceil(step) : Math.floor(step)
            if(obj.offsetLeft==target){
                clearInterval(obj.timer)
//              if(callback){
//                  callback()
//              }
                callback&&callback();
            }
            obj.style.left=obj.offsetLeft+step+'px'
        },15)

}

希望对您有帮助！记得点赞、收藏、关注哦！