封装动画函数

最新推荐文章于 2022-03-02 10:42:17 发布

原创最新推荐文章于 2022-03-02 10:42:17 发布 · 351 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #javascript

该博客探讨了JavaScript中如何使用animate函数实现对象的平滑移动，通过目标距离和定时器控制动画效果。文章重点在于清除旧定时器、设置步长以及判断动画结束时调用回调函数。内容适合前端开发者了解JavaScript动画原理和实践。

// obj是移动对象 target是目标距离 callback回调函数

//前提：obj要带定位

function animate(obj,target,callback){

// 先清除以前的定时器，只保留一个定时器

clearInterval(obj.timer);

// obj是个对象，利用对象来添加定时器，实现给不同元素添加不同的定时器

obj.timer=setInterval(function(){

// 匀速动画当前位置+固定的值

// 缓动动画当前位置+变化值

// 缓动动画核心算法步长=(目标距离-当前位置)/10 步长变化

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();

}

}

obj.style.left=obj.offsetLeft+step+'px';

},30)

}