JQuery如何做動畫？

JQuery是用Javascript編寫的。作爲每個人都知道一點的人，我不得不想他們是如何寫出一些的。你如何在純Javascript中爲HTML元素添加動畫？它只是反覆更新要動畫的CSS屬性，使用標準的DOM操作，使用回調使其異步？還是更復雜一些？JQuery如何做動畫？

來源

2012-03-28 McGarnagle

你知道你可以打開任何Jquery.js文件並親自體驗它嗎？這是官方的源代碼完整的：https：//github.com/jquery/jquery/tree/master/src – asawyer 2012-03-28 22:16:25

[爲什麼不看看自己？]（http://code.jquery.com/jquery- 1.7.2.js） – 2012-03-28 22:16:40

@asawyer是的，但來源不提供技術解釋。它只是表明它是如何下降的，而不是它爲什麼這樣做，以及這樣的理論上是如何工作的。 – 2012-03-28 22:32:08

jQuery動畫只是更新循環定時器的CSS屬性（這使得它是異步的）。

他們還實現了補間算法，該算法可以跟蹤動畫是提前還是落後於計劃，並且可以根據需要調整每個步驟的動畫步長以趕上或減慢。這允許動畫在指定的時間內完成，而不管主機有多快。不足之處在於慢速或繁忙的計算機會顯示更多不連貫的動畫。

它們還支持控制動畫加速的時間/形狀的緩動功能。 Linear意味着恆定的速度。 Swing是一個比較典型的，啓動緩慢，中間加速到最大速度，然後慢慢結束。

由於動畫是異步的，因此jQuery還實現了一個動畫隊列，以便您可以指定要看到的多個動畫。第二個動畫從第一個動畫完成時開始，等等。 jQuery還提供了一個完成函數，所以如果你想在動畫完成時運行一些你自己的代碼，你可以指定一個回調函數，當動畫完成時這個函數會被調用。這允許您在動畫完成時執行一些操作，例如開始其他對象的動畫，隱藏對象等等。

僅供參考，如果您需要更多詳細信息，請參閱jQuery javascript source code。這項工作的核心是一個名爲doAnimation()的本地函數，儘管大部分工作都是在step和update函數中完成的，可以在jQuery.fx.prototype的定義中找到。

來源

2012-03-28 22:16:31 jfriend00