JQueryはJavascriptで書かれています。それぞれのことを少しずつ知っている人として、私は彼らがどのようにそれを書いたのか疑問に思います。純粋なJavascriptでHTML要素をどのようにアニメーション化しますか?標準的なDOM操作を使用して、非同期にするコールバックを使用して、アニメーション化するCSSプロパティを繰り返し更新していますか?それとももっと洗練されたものなのでしょうか?JQueryはどのようにアニメーションを行いますか?
答えて
jQueryアニメーションは、反復タイマー(非同期にする)でCSSプロパティを更新するだけです。
また、アニメーションがスケジュールより遅れているのか遅れているのかを追跡し、必要に応じて各ステップでアニメーションのステップサイズを調整して追いつくか、遅くするトゥイーンアルゴリズムを実装しています。これにより、ホストコンピュータの速度に関係なく、指定された時間内にアニメーションを終了することができます。欠点は、遅いまたは忙しいコンピュータがより不安定なアニメーションを表示することです。
アニメーションの加速の時間/形を制御するイージング機能もサポートしています。 Linear
は一定速度を意味します。 Swing
がより典型的ですが、遅く始まり、途中で最高速度に加速してゆっくりと終了します。
アニメーションは非同期であるため、jQueryはアニメーションキューも実装しているため、複数のアニメーションを順番に実行するように指定できます。 2番目のアニメーションは、最初のアニメーションが終了すると開始されます。 jQueryには完了関数も用意されているので、アニメーションが完了したときに独自のコードを実行したい場合は、アニメーションが完了したときに呼び出されるコールバック関数を指定できます。これは...など、オブジェクトを非表示にし、他のオブジェクトのアニメーションを開始するとアニメーションが完了するようになっているとき、あなたには、いくつかの操作を実行することができますあなたはより多くの細部をしたい場合
はFYI、 jQuery javascript source codeは完全に利用可能です。作業の多くはjQuery.fx.prototype
の定義を発見することができ
step
と
update
と呼ばれる機能で行われているが仕事のコアは、
doAnimation()
と呼ばれるローカル関数です。
jQueryアニメーション中に要素を検査すると、ほとんどの場合、あなたが書いたHTMLから実際に割り当てられていないjQueryを通じて要素に割り当てられたCSSコードが変更されます。 FireBugを持っていない場合はFireBugを入手し、アニメーションの実行中は何が起こっているのかを調べます。私は実際にそれが標準setInterval()
とsetTimeout()
メソッドを使用して実現され、定期的(「ティック」)でDOM要素とCSSスタイルを更新するために、標準のJavaScriptのメソッドとプロパティを使用している理解して何からのコード自分自身を読んでなくても、
、 。
それは普通の古いsetIntervalとDOM操作です。もちろん
、コードは少し複雑よりもあります。
Look:http://code.jquery.com/jquery-latest.js、ファイルの末尾付近。 jQuery.fx.prototypeを検索します。
- 1. jqueryにアニメーションを正確に並列に実行させるにはどうすればよいですか?
- 2. すべてのjqueryアニメーションをどのように高速化できますか?
- 3. 私はリンクされたウェブサイト、css3またはjqueryでアニメーションがどのように行われたかを理解しようとしていますか?
- 4. 行アニメーションがTableHeaderViewをスクロールしないようにするにはどうすればよいですか?
- 5. このjQueryアニメーションをIE(7,8,9)でどのように表示できますか?
- 6. ノッチはミニクラフトでどのようにアニメーションをしますか?
- 7. jQueryの - どのように数学的なアニメーションでは、
- 8. 60Hzのアニメーションはどのように機能しますか?
- 9. JQuery Sortableでどのようにリセットを実行しますか
- 10. どうすればいいですか? - 引用者アニメーション - JQueryの
- 11. アップルはどのようにiBooks 2フラッシュカードのアニメーションをやっていますか?
- 12. このJavascript/jQueryアニメーションをより良くするにはどうすればよいですか?
- 13. MemoryCacheはいつ/どのようにハウスキーピングを行いますか?
- 14. jqueryはjsオブジェクトをどのように扱いますか
- 15. jQueryはどのようにコメント要素を扱いますか?
- 16. どのようにフェードインとアニメーションを同時にしますか?
- 17. Jquery - どのようにボタンのクリックでアニメーション機能を制御するには?
- 18. jQueryアニメーションが終了するまでスクリプトを待機させるにはどうすればよいですか?
- 19. イメージやImageViewのアニメーションをアニメーションに滑らかに変換するにはどうすればよいですか?
- 20. 私はアニメーションが進行しているので、contentInsetをどのように変更できますか?
- 21. このウェブサイトはどのようにページ読み込みアニメーションを行いますか?
- 22. イメージはjqueryでアニメーションのサイズ変更とブラーを行います
- 23. jqueryアニメーションを別のポイントから開始するにはどうすればよいですか?
- 24. このjqueryにアニメーションを追加するにはどうすればよいですか?
- 25. Jqueryアニメーション中にテキストの移動を停止するにはどうすればよいですか?
- 26. 1つの項目にjqueryアニメーションを適用するにはどうすればよいですか?
- 27. どのようにZeptoアニメーションを停止できますか?
- 28. FB.Canvas.scrollToをどのようにアニメーション化しますか?
- 29. 私のcss3アニメーションはJQueryではどうして動かないのですか?
- 30. Orchard CMSはどのようにロギングを行いますか?
あなたはJquery.jsファイルを開いて、あなた自身が正しく見えることが分かりますか?ここに正式なソースコードがあります:https://github.com/jquery/jquery/tree/master/src – asawyer
[自分自身を見てみませんか?](http://code.jquery.com/jquery- 1.7.2.js) –
@asawyerはい、ソースは技術的な説明を提供していません。それは単にそれがどのようにダウンしているのか、それがなぜそのように行われているのか、そしてそのようなものはどのように理論的に働くのかを示しています。 –