2012-03-28 8 views
7

JQueryはJavascriptで書かれています。それぞれのことを少しずつ知っている人として、私は彼らがどのようにそれを書いたのか疑問に思います。純粋なJavascriptでHTML要素をどのようにアニメーション化しますか?標準的なDOM操作を使用して、非同期にするコールバックを使用して、アニメーション化するCSSプロパティを繰り返し更新していますか?それとももっと洗練されたものなのでしょうか?JQueryはどのようにアニメーションを行いますか?

+1

あなたはJquery.jsファイルを開いて、あなた自身が正しく見えることが分かりますか?ここに正式なソースコードがあります:https://github.com/jquery/jquery/tree/master/src – asawyer

+0

[自分自身を見てみませんか?](http://code.jquery.com/jquery- 1.7.2.js) –

+3

@asawyerはい、ソースは技術的な説明を提供していません。それは単にそれがどのようにダウンしているのか、それがなぜそのように行われているのか、そしてそのようなものはどのように理論​​的に働くのかを示しています。 –

答えて

16

jQueryアニメーションは、反復タイマー(非同期にする)でCSSプロパティを更新するだけです。

また、アニメーションがスケジュールより遅れているのか遅れているのかを追跡し、必要に応じて各ステップでアニメーションのステップサイズを調整して追いつくか、遅くするトゥイーンアルゴリズムを実装しています。これにより、ホストコンピュータの速度に関係なく、指定された時間内にアニメーションを終了することができます。欠点は、遅いまたは忙しいコンピュータがより不安定なアニメーションを表示することです。

アニメーションの加速の時間/形を制御するイージング機能もサポートしています。 Linearは一定速度を意味します。 Swingがより典型的ですが、遅く始まり、途中で最高速度に加速してゆっくりと終了します。

アニメーションは非同期であるため、jQueryはアニメーションキューも実装しているため、複数のアニメーションを順番に実行するように指定できます。 2番目のアニメーションは、最初のアニメーションが終了すると開始されます。 jQueryには完了関数も用意されているので、アニメーションが完了したときに独自のコードを実行したい場合は、アニメーションが完了したときに呼び出されるコールバック関数を指定できます。これは...など、オブジェクトを非表示にし、他のオブジェクトのアニメーションを開始するとアニメーションが完了するようになっているとき、あなたには、いくつかの操作を実行することができますあなたはより多くの細部をしたい場合

はFYI、 jQuery javascript source codeは完全に利用可能です。作業の多くは jQuery.fx.prototypeの定義を発見することができ stepupdateと呼ばれる機能で行われているが仕事のコアは、 doAnimation()と呼ばれるローカル関数です。

1

jQueryアニメーション中に要素を検査すると、ほとんどの場合、あなたが書いたHTMLから実際に割り当てられていないjQueryを通じて要素に割り当てられたCSSコードが変更されます。 FireBugを持っていない場合はFireBugを入手し、アニメーションの実行中は何が起こっているのかを調べます。私は実際にそれが標準setInterval()setTimeout()メソッドを使用して実現され、定期的(「ティック」)でDOM要素とCSSスタイルを更新するために、標準のJavaScriptのメソッドとプロパティを使用している理解して何からのコード自分自身を読んでなくても、

2

それは普通の古いsetIntervalとDOM操作です。もちろん

、コードは少し複雑よりもあります。

Look:http://code.jquery.com/jquery-latest.js、ファイルの末尾付近。 jQuery.fx.prototypeを検索します。

関連する問題