JQuery动画.pdf

jQuery动画 Zengtan Email: zengtan1021@ QQ 520521086 js实现动画的原理跟动画片的制作一样.动画片是把一些差距不大的原 画以一定帧数播放.js动画是靠连续改变元素的某个css属性值,比如 left, top.达到视觉的动画效果. 这几年出现了不少优秀的js游戏, 比如前段时间的《js版植物大战僵 尸》.其实js游戏主要就是这4个部分组成. 绘图, 移动, 碰撞检测, 逻 辑设定.如果用jquery来做的话, 前三项都会变得相当容易. 去年我也用jquery写了2个小游戏(jquery坦克大战和jquery泡泡堂). 也写了自己的动画类.不过当时限于水平,没有深入分析jQuery.fx类的 实现. 这几天读过源码之后, 感受很多. jquery的fx类虽然只有600 多行代码.也没有牵涉到太高深的js知识.里面的逻辑却比较复杂,很多 处理也很精妙.当真正披荆斩棘弄懂这一部分之后,相信对javascript的 理解都会新上一层,当然也会更加喜欢jquery. 闲话少说, 在看源码之前, 先大概了解一下fx类的实现思想. fx jquery , , fx jquery , , ffxx jjqquueerryy ,, ,, 首先 类非常依赖 的队列机制没有这个东西的话一切都无从谈 . jquery , . jquery , 起有关.. jjqquueerryy队列机制 见,, /topic/783260. 回忆一下这句代码 $(‘div’).show(1000).hide(1000); 让这个div在1000ms内渐渐显示,然后再渐渐隐藏. 这2个动画是按次 序执行的.在javascript的单线程异步模式下,管理异步的函数是很难的. 在时间戳上, 既无法知道它准确的开始时间,又不能得到它准确的结束 时间. 由于可能发生线程阻塞, 这些时间并不精确. 而让它们有序的执 行, 最好的办法就是把元素上所有的动画都放入队列. 当第一个动画结 束后, 在回调函数里通知第二个动画执行. 好比有个公司招聘, 只有一个面试官,而有很多应聘者在排队等候, 一 个人面试完之后,出门的时候顺便告诉第二个人进去面试.以此反复. 而 作为面试官, 只需要通知第一个面试者. 对于jquery, 当你使用animate函数执行动画的时候,这个动画并没有 马上被执行, 它会先存入元素的队列缓存里. 然后看是不是已经有正在 执行的动画. 如果没有, 就取出队列里的第一个动画并且执行(此时队 伍里可能还有别人, 只是被stop函数暂停了), 如果有,那么要等到队列 前面的所有动画执行完之后才会被通知执行. 就好像, 现在来了一位应聘者, 他先看看是不是已经有人在里面面试. 如果没有, 那么他可以直接进去面试. 如果有, 他必须得加入到队伍的 最后一个. 等前面的人全部面试完了才轮到他. animate函数的主要功能并不是执行动画. 它只作为api的入口,修正参 数.然后把参数扔给fx类去执行动画. jquery的动画模块也并没有细化 得太离谱, 有几个方法是比较重要的. jQuery.fn.animate 修正参数 jQuery.speed 静态方法, 帮助animate修正参数, 并且重写回调函 数.重写回调函数大概就是 callback = function(){ callback(); $(this.dequeue()); } jQuery.fx 构造函数, 跟动画有关的具体操作都在这个构造函数的原 型方法里. jQuery.fx.tick 静态方法, 作为定时器的方法, 监控所有动画的执行 情况. 我们最好先抛开复杂的参数修正等枝枝叶叶.直接从主干部分下手.先分 析一下这个要使得这个动画类基本够用, 需要一些什么条件. 1 至少需要一个定时器来执行动画, 而且最好只有一个,即使有多个动 画需要同时执行. 毕竟setTimeout和setInterval的开销是巨大的. 2 需要一个