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

扫地机器人动画原理

时间:2015-11-29 00:35:38      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:

  使用jQuery制作一个扫地机器人动画。动画效果是画面的左边是一些垃圾,然后画面左右是一个扫地机器人,扫地机器人从右边移动到左边,然后被扫过的垃圾就会被吸到扫地机器人里面而消失掉。

  理论原理:通过判断垃圾元素的坐标与扫地机器人的坐标的关系来判断垃圾是否被扫地机器人扫过,然后被扫过的垃圾就要被隐藏掉。

  实现原理:使用jQuery的animate()函数进行小幅度的移动,然后使用animate()的callback回调函数,每移动一次就判断一次垃圾是否已经被扫地机器人扫过,扫过的垃圾就要被隐藏。然后将该函数放到一个定时器里面执行,使用setInterval函数,可以自行调整时间使动画流畅进行。如果扫地机器人完成扫地则关掉定时器。

  备注:如果要求该动画执行完之后需要从头开始重复执行,那么要注意上一次清理掉的定时器在第二次运行时能够正常打开。

 

扫地机器人动画原理

标签:

原文地址:http://www.cnblogs.com/wangyangdaying/p/5003790.html

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