js定时器实现匀速动画函数

js定时器实现匀速动画函数

定时器的使用

1.setInterval

//参数1：函数
//参数2：时间，1000ms=1s
//执行过程：加载完毕后每过一秒执行一次
//返回值：定时器的名字
//设置定时器
 var timeId = setInterval(function(){},1000);
//清理定时器
clearInterval(timeId);

2.setTimeout

//参数1：函数
//参数2:时间
//特性：一次性定时器，使用完后就不再有效
//设置定时器
var timeId = window.setTimeout(function(){},1000);
//清理定时器
clearTimeout(timeId);

代码

<script>
//animate函数调用
animate(document.getElementById("需要创建动画的id名")，400)；

//animate函数
//enement是获取的元素，target是你需要移动的目标位置
function animate(element,target){
//此时每次调用函数时都会产生一个定时器，所以首先需要将定时器删除。确保只会产生一个定时器
//element.timeId是定时器的名字
  clearInterval(element.timeId);
//创建定时器 
//element.timeId每点击一次不是再开辟新的空间而是改变了指向的位置
  element.timeId=setInterval(function(){
   //首先获取当前所在的位置
   var left = element.offsetLeft;//此时的返回值是数字类型没有px
   //在这里不能使用left是因为，left无法直接获取style标签中的值，只能获取style属性的值
   //设置移动的步数
   var step=10;
   //设置左移还是右移
   //判断当前的位置是否小于目标，如果小于则为正数，否则为负数
   step = left < target ? step : -step;
   //每次移动后的距离
   left+=step; //left=left+step;
   //如果距离目标位置的步数大于每次移动的步数，则一步一步移动；如果距离目标位置的步数小于每次移动的步数，则直接移动到目标位置
   if(Math.abs(target-left)>Math.abs(step)){//Math.abs()加绝对值
   element.style.left=left+"px";
   }else{
     clearInterval(element.timeId);
     element.style.left=target+"px";//直接移动到目标位置
   }
  },20)

}
</script>