JQuery如何制作动画? [英] How does JQuery do animations?

问题描述

JQuery用Javascript编写.作为每个人都了解不多的人，我不得不怀疑他们是如何编写其中一些内容的.如何在纯Javascript中设置HTML元素的动画?是否只是使用标准的DOM操作通过回调反复更新要动画化的CSS属性，以使其变为异步状态?还是更复杂?

JQuery is written in Javascript. As someone who knows a little of each, I have to wonder how they wrote some of it. How do you animate HTML elements in pure Javascript? Is it just repeatedly updating the CSS property that is to be animated, using standard DOM manipulation, with callbacks to make it asynchronous? Or is it something more sophisticated?

推荐答案

jQuery动画只是在循环计时器上更新CSS属性(这使其异步).

jQuery animations are just updating CSS properties on a recurring timer (which makes it asynchronous).

他们还实现了补间算法，该算法可跟踪动画是提前还是落后于进度，并在每个步骤中调整动画的步长以根据需要加快或减慢速度.这样，无论主机有多快，动画都可以在指定的时间内完成.不利之处是慢速或繁忙的计算机将显示更多断断续续的动画.

They also implement a tweening algorithm which keeps track of whether the animation is ahead of schedule or behind schedule and they adjust the step size in the animation at each step to catch up or slow down as needed. This allows the animation to finish in the time specified regardless of how fast the host computer is. The downside is that slow or busy computers will show more choppy animations.

它们还支持缓动功能，该功能控制动画加速的时间/形状. Linear表示恒定速度. Swing是更典型的，开始缓慢，在中间加速到最大速度，然后缓慢结束.

They also support easing functions which control the time/shape of the acceleration of the animation. Linear means a constant speed. Swing is a more typical, start slow, accelerate to max speed in the middle and then end slowly.

由于动画是异步的，jQuery还实现了动画队列，因此您可以指定多个动画，这些动画要一个接一个地执行.当第一个动画结束时，第二个动画开始，依此类推. jQuery还提供了完成功能，因此，如果您希望在动画完成时运行一些自己的代码，则可以指定在动画完成时将调用的回调函数.这样，您可以在动画制作完成后执行一些操作，例如启动其他对象的动画，隐藏对象等.

Because animations are asynchronous, jQuery also implements an animation queue so that you can specify multiple animations that you want to see execute one after the other. The 2nd animation starts when the first animation finishes and so on. jQuery also offers a completion function so if you want some of your own code to run when an animation is complete, you can specify a callback function that will get called when the animation completes. This allows you to carry out some operation when the animation is complete such as start the animation of some other object, hide an object, etc...

仅供参考，如果您需要更多详细信息，则 jQuery javascript源代码完全可用.这项工作的核心是在名为doAnimation()的局部函数中，尽管许多工作是在名为step和update的函数中完成的，这些函数可以在jQuery.fx.prototype的定义中找到.

FYI, the jQuery javascript source code is fully available if you want more details. The core of the work is in a local function called doAnimation(), though much of the work is done in functions called step and update which can be found with the definition of jQuery.fx.prototype.

这篇关于JQuery如何制作动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！