动画原理

动画原理

动画的基本原理 ： 让盒子的 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; // 因为他们的差值不会超过5
5              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      }