JavaScript—封装animte动画函数

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

封装Animte 动画函数

虽然可能以后的开发中可能根本不需要自己写，Jquery 给我们封装好了，或者用CSS3的一些属性达到这样的效果可能更简单。

我比较喜欢底层的算法实现，万变不离其中，这个逻辑思路，也是需要锻炼的。也跟着做了一遍

///动画函数
//element:元素
//target:最后停止的位置
function animte(element, target) { //只有一个Timeid定时器在执行
if (element,timerId) {
clearInterval(element.timerId)
element.timerId = null
} //定时器每隔多少触发
element.timerId = setInterval(function ()
{
const step=6 //步进
const current=element.offsetLeft//盒子现在的位置 //如果现在位置>目标位置则是向左移动 left为负数
if (current>target) {
step = - Math.abs(step)
} //当快到达目标位置时则停止计时器
if (Math.abs(current-target)<=Math.abs(step)) {
//停止/
clearInterval(element.timerId)
element.style.left = target + 'px'
//退出函数
return;
}
element.style.left = (current + step) + 'px';
}, 30)
}