JQuery 是如何做动画的？

Posted 2023-05-08

【中文标题】JQuery 是如何做动画的？

【英文标题】：How does JQuery do animations?

【发布时间】：2012-04-12 13:42:35

【问题描述】：

JQuery 是用 javascript 编写的。作为一个对每一个都了解一点的人，我不得不想知道他们是如何写的。如何在纯 Javascript 中为 html 元素设置动画？是否只是使用标准 DOM 操作重复更新要动画的 CSS 属性，并使用回调使其异步？还是更复杂的东西？

【问题讨论】：

您确实意识到您可以打开任何 Jquery.js 文件并亲自查看，对吗？以下是完整的官方源代码：github.com/jquery/jquery/tree/master/src

Why not have a look yourself?

@asawyer 是的，但来源不提供技术解释。它只是显示了它是如何下降的，而不是为什么它会这样做，以及类似的事情在理论上是如何运作的。

【参考方案1】：

jQuery 动画只是在循环计时器上更新 CSS 属性（使其异步）。

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

它们还支持控制动画加速时间/形状的缓动函数。 Linear 表示恒速。 Swing 比较典型，开始慢，中间加速到最大速度，然后慢慢结束。

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

仅供参考，如果您想了解更多详细信息，jQuery javascript source code 完全可用。工作的核心是在一个名为doAnimation() 的本地函数中，尽管大部分工作是在名为step 和update 的函数中完成的，它们可以通过jQuery.fx.prototype 的定义找到。

【参考方案2】：

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

当然，代码比这要复杂一些。

看：http://code.jquery.com/jquery-latest.js，在文件末尾附近。搜索 jQuery.fx.prototype 。

【参考方案3】：

在 jQuery 动画期间检查元素时，它几乎总是会更改您的 CSS 代码，这些代码是通过 jQuery 分配给元素的，而实际上并不是从您编写的 HTML 中分配的。如果您在 firefox 上没有 FireBug，请获取 FireBug，并检查动画执行时发生的情况。

【参考方案4】：

没有自己阅读代码，据我了解，它确实使用标准的 Javascript 方法和属性定期更新 DOM 元素和 CSS 样式（“记号”），它使用标准 setInterval() 和 @ 来完成987654322@方法。