首页 > 代码库 > 动画原理

动画原理

动画原理

动画的基本原理 让盒子的 offsetLeft   +  步长  

 

 原理

技术分享

 

 

匀速运动封装函数

1   function animate(obj,target){2          var speed = obj.offsetLeft < target ? 5 : -5;  // 用来判断 应该 +  还是 -3          obj.timer = setInterval(function() {4              var result = target - obj.offsetLeft; // 因为他们的差值不会超过55              obj.style.left = obj.offsetLeft + speed + "px";6              if(Math.abs(result)<=5)  // 如果差值不小于 5 说明到位置了7              {8                  clearInterval(obj.timer);9                  obj.style.left = target + "px";  // 有5像素差距  我们直接跳转目标位置10              }11          },30)12      }

  

动画原理