码迷,mamicode.com
首页 > 其他好文 > 详细

动画原理

时间:2016-10-05 15:11:51      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:

动画原理

动画的基本原理 让盒子的 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      }

  

动画原理

标签:

原文地址:http://www.cnblogs.com/Abner5/p/5932185.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!