JQuery如何做动画?

时间:2012-03-28 22:13:35

标签: javascript jquery jquery-animate

JQuery是用Javascript编写的。作为每个人都知道一点的人,我不得不想知道他们是如何写出一些的。你如何在纯Javascript中为HTML元素制作动画?是否只是使用标准DOM操作重复更新要动画的CSS属性,并使用回调使其异步?还是更复杂的东西?

4 个答案:

答案 0 :(得分:16)

jQuery动画只是在定期计时器上更新CSS属性(这使得它异步)。

他们还实现了补间算法,该算法可以跟踪动画是提前还是落后于计划,并且他们会在每个步骤中调整动画中的步长以根据需要赶上或减速。这允许动画在指定的时间内完成,无论主机的速度有多快。缺点是计算机缓慢或繁忙会显示更多不稳定的动画。

它们还支持缓动函数,这些函数控制动画加速的时间/形状。 Linear表示速度恒定。 Swing是一个更典型的,开始缓慢,在中间加速到最大速度然后缓慢结束。

因为动画是异步的,所以jQuery还实现了一个动画队列,这样你就可以指定你想要看到的多个动画一个接一个地执行。第二个动画在第一个动画结束时开始,依此类推。 jQuery还提供了一个完成函数,所以如果你想在动画完成时运行一些自己的代码,你可以指定一个回调函数,在动画完成时调用它。这允许您在动画完成时执行某些操作,例如启动某些其他对象的动画,隐藏对象等等。

仅供参考,如果您需要更多详细信息,jQuery javascript source code完全可用。这项工作的核心是一个名为doAnimation()的本地函数,尽管大部分工作都在名为stepupdate的函数中完成,可以在jQuery.fx.prototype的定义中找到}。

答案 1 :(得分:2)

就是这样:一个普通的setInterval和一些DOM操作。

当然,代码比这复杂一点。

看看:http://code.jquery.com/jquery-latest.js,靠近文件的末尾。搜索jQuery.fx.prototype。

答案 2 :(得分:1)

在jQuery动画期间检查元素时,几乎总是会更改CSS代码,该代码通过jQuery分配给元素,而jQuery并非真正从您编写的HTML中分配。如果您没有Firefox,请获取FireBug并检查动画执行时发生的情况。

答案 3 :(得分:1)

在没有自己阅读代码的情况下,根据我的理解,它确实使用标准的Javascript方法和属性来定期更新DOM元素和CSS样式(“ticks”),它使用标准setInterval()完成和setTimeout()方法。