コアポイント

• jQueryのanimate()関數(shù)は実用的ですが、高性能アニメーションエンジンではありません。これは、メモリ消費とフレームレートの低い問題につながる可能性があります。ただし、CSSアニメーションやクロスブラウザーの互換性を求めている開発者にとっては、実行可能なオプションのままです。
• CSSアニメーションは通常、jqueryのアニメーションよりも高速で効率的です。これは、主にGPU加速のおかげです。ただし、インターネットエクスプローラーの古いバージョンとの互換性の問題や、アニメーション期間を決定する時間ではなく依存関係の割合など、いくつかの制限があります。
• velocity.jsは、コードを大幅に変更することなく、jQueryアニメーションのパフォーマンスを大幅に向上させるjQueryプラグインです。 $.animate()を$.velocity()に置き換えることにより、開発者はより高いフレームレートを取得し、jQueryのチェーンコール特性を維持できます。

jQueryのanimate()関數(shù)を使用して、Webページに優(yōu)れた効果を生み出しました。その後、CSS3の導入と臺頭により、コードはひどいと言われました。彼らは、すべてのjQueryベースのアニメーション（および通常はJavaScriptベースのアニメーション）を放棄し、代わりにCSSベースのアニメーションを使用することを提案します。この変更により、多くのブラウザ（in）互換性の問題と機能の欠如は言うまでもありません。 CSSアニメーションはJavaScriptアニメーションよりも高速であるため、この痛みは妥當です。少なくともそれは彼らが私たちに言ったことです。これは本當ですか？ jqueryのanimate()機能は本當に遅いですか？コードを変更せずに簡単に強化する方法はありますか？答えはイエスです。この記事では、アニメーションを作成する2つの方法の制限のいくつかを理解し、jQueryコードでより良いパフォーマンスを得る方法を理解します。

jQueryの問題は何ですか？

私たちは皆、jQueryを知っていて愛しています（実際にはそれが好きではありません）。 HTMLクライアントスクリプトを簡素化するように設計されたこのライブラリは、世界中の數(shù)十萬人の開発者を支援してきました（実際のデータではありません）。 HTMLドキュメントの通過と操作、イベントの取り扱い、Ajaxなどを簡単にし、すべてのブラウザーの非互換性とエラーを処理する負擔を緩和します。その機能の中でも、jQueryはアニメーションとエフェクトの作成も許可しています。それを使用して、CSSプロパティをアニメーション化し、要素を非表示にし、要素をフェードアウトし、その他の同様のエフェクトができます。ただし、JQueryの設計目標は、パフォーマンスの高いアニメーションエンジンになることはなく、真に複雑でCPU/GPUを提供するアニメーションをサポートすることを意図したことはありません。この事実の証拠として、jQueryの記憶消費はしばしばゴミ収集を引き起こし、アニメーションを実行するときに問題を引き起こします。さらに、jQueryはsetInterval()（requestAnimationFrame()の詳細を読む）の代わりにrequestAnimationFrame()を使用して、アニメーションを実行するために使用します。これらの要因のため、「誰が最もよく知っている」は、AnimationとEffectsを作成するためにCSSの使用を提唱しています。

cssアニメーションとトランジション

明確にしましょう：CSSアニメーションはjQueryアニメーションよりも優(yōu)れています。アニメーションに関しては、jQueryはCSSの數(shù)倍遅い場合があります。 CSSアニメーションとトランジションには、GPUハードウェアによって加速されるという利點があります。これは、移動するピクセルに関しては優(yōu)れています。この要因は、特にモバイルデバイスなどのパフォーマンスが重要な狀況では、大きな改善のようです。これは素晴らしいですね。真実は、このすべてに制限と問題があるということです。最初の制限は、すべてのCSSプロパティをGPUを通じて改善できるわけではないことです。したがって、CSSアニメーションを使用すると常に勝つと考えるのは間違っています。もう1つの問題は、CSSアニメーションがポータブルではなく、少なくともターゲットにする可能性のあるすべてのブラウザーではないことです。たとえば、移行はインターネットエクスプローラー9以下では機能しません。さらに悪いことに、CSSのアニメーションは現(xiàn)在、時間（秒またはミリ秒）ではなくパーセンテージに基づいています。これは、アニメーションの終了後にアニメーションの持続時間を変更すると、SASS以下のようなプリプロセッサを使用しない限り、アニメーションが非常に痛みを伴う可能性があることを意味します。最後に、CSSアニメーションでは、多數(shù)のベンダープレフィックスを入力する必要があります。はい、それらを処理するためのツールを委任できますが、それは心配するもう1つのことです。

以前の考慮事項に加えて、jQueryアニメーションを無視すべきではない他の正當な理由があります。それらは、テクノロジー自體の弱點よりもスキルの不足に関連していますが、それでも言及する価値があります。開発者がjQueryを使用してアニメーションを作成することに慣れている場合、開発者が同じタスクを実行するためにCSSを使用できない可能性が高くなります。開発者がCSSで同じ効果を生み出すのに長い時間がかかるかもしれないので、その努力は利益の価値がありません。または、開発者は、高度にカスタマイズ可能なアニメーションを作成するための別のテクニックを學びたくない場合があります。恥ずべきことは何もありません。誰もが特定の分野に獨自の制限を持っています。ここでのポイントは、jQueryで作成されたアニメーションがパフォーマンスを向上させることを望んでいるため、CSSアニメーションに変換する必要はないということです。幸いなことに、解決策があります。

jquery

のanimate()関數(shù)を改善します jQueryアニメーションの問題を解決するための答えは、velocity.jsと呼ばれます。 Velocity.jsは、IEの古いバージョンを使用するjQuery 1.xとは異なり、velocityはIE8と互換性があります。これは、ほとんどのプロジェクトにとって大きな問題ではありません。この時點で、velocity.jsを使用するとコードベースにどのように影響するか疑問に思うかもしれません。答えは「非常にばかげた方法で」です。 Velocity.jsを統(tǒng)合するには、それをダウンロードして使用するWebページに含めるだけです。最後のステップは、パラメーターを変更せずに

、

に表示される<q cite="https://github.com/julianshapiro/velocity">一個 jQuery 插件，它重新實現(xiàn)了 $.animate() 以產生更高的性能（使 Velocity 也比 CSS 動畫庫更快），同時包含了改進動畫工作流程的新功能。</q>を置き換えることです。この変更は、私たちが選択したテキストエディターまたはIDEで検索と交換を実行するのと同じくらい簡単です。完了すると、アニメーションのパフォーマンスはすぐに改善されます。コードベースにあまり影響を與えずに知識を再利用できるため、これは素晴らしいことです。さらに、チェーンコールを維持するJQueryプラグインであるため、jQueryの典型的な「メソッドコールチェーン」を作成し続けることができます。 $.animate() $.velocity()結論

この記事では、jQueryアニメーションに影響を與えるいくつかの問題について説明します。 CSSアニメーションが過去數(shù)年間にJQueryに代わるために大幅に促進された理由について説明します。次に、CSSのいくつかの制限とパフォーマンスの欠點を強調しました。最後に、ソースコードを変更せずにJavaScriptアニメーションとエフェクトのパフォーマンスを改善できるjQueryプラグインであるVelocity.jsを簡単に紹介します。この記事は、JQuery、CSS、JavaScriptアニメーションの比較の紹介にすぎません。このトピックを掘り下げたい場合は、GSAP Authors and Velocity.jsの著者によって書かれた以下の記事を読むことを強くお勧めします。

jQueryアニメーションの改善に関するFAQ

jQueryアニメーションを遅くする方法は？

アニメーションの期間を増やすことで、jQueryアニメーションを遅くすることができます。期間は、.animate()メソッドのミリ秒で指定されています。たとえば、アニメーションを遅くして5秒間続く場合は、$(selector).animate({params}, 5000);を記述する必要があります。數(shù)が大きいほど、アニメーションが遅くなります。

jQueryアニメーションにおける緩和の役割は何ですか？

jQueryアニメーションの緩和とは、その期間中のさまざまなポイントでのアニメーションの進行の速度を指します。 jQueryは、「スイング」と「線形」の2つの組み込み式緩和方法を提供します。 「スイング」はデフォルトの緩和方法であり、最初と端でアニメーションの進行が遅くなり、中央で速くなります。一方、「線形」は、プロセス全體でアニメーションが一定であることを保証します。

jQueryアニメーションのパフォーマンスを改善する方法は？

jQueryアニメーションのパフォーマンスを改善する方法はたくさんあります。 1つの方法は、一般にjQueryアニメーションよりも優(yōu)れたパフォーマンスを発揮するため、可能な限りCSSトランジションを使用することです。別の方法は、同時に実行されるアニメーションの數(shù)を制限することです。また、ブラウザがよりスムーズなアニメーションのアニメーションを最適化できるようにするrequestAnimationFrameメソッドを使用することもできます。

jqueryアニメーションの実行を停止する方法は？

.stop()メソッドを使用して、実行中のjqueryアニメーションを停止できます。このメソッドは、選択した要素で現(xiàn)在実行されているアニメーションを停止します。たとえば、$(selector).stop();は、選択した要素のアニメーションを停止します。

jQueryで複數(shù)のアニメーションをリンクする方法は？

同じ要素で複數(shù)のアニメーションメソッドを呼び出すだけで、複數(shù)のjQueryアニメーションをリンクできます。たとえば、$(selector).fadeIn().slideUp();は最初に選択した要素にフェードしてから、上向きにスライドします。 jQueryは、アニメーションがコールの順に実行されることを保証します。

jQueryで複數(shù)の屬性を同時にアニメーション化する方法は？

.animate()メソッドにアニメーション化するプロパティを含むオブジェクトを渡すことにより、jQueryで複數(shù)のプロパティを一度にアニメーション化できます。たとえば、$(selector).animate({height: "300px", width: "200px"});は、選択した要素の高さと幅を同時にアニメーション化します。

jQueryアニメーションでコールバック関數(shù)を使用する方法は？

jQueryアニメーションのコールバック関數(shù)は、アニメーションが完了した後に実行される関數(shù)です。コールバック関數(shù)を2番目のパラメーターとして.animate()メソッドに渡すことができます。たとえば、$(selector).animate({params}, function(){ /* 動畫完成后要執(zhí)行的代碼 */ });。

jQueryでカスタムアニメーションを作成する方法は？

.animate()メソッドを使用して、jqueryでカスタムアニメーションを作成できます。この方法では、CSSプロパティをアニメーション化できます。たとえば、選択した要素を右に50ピクセルに移動します。 $(selector).animate({left: " =50px"});

jQueryアニメーションでキューとデキューのメソッドを使用する方法は？

jQueryのキューとdequeueメソッドは、アニメーションの実行を制御するために使用されます。キューメソッドを使用すると、選択した要素で実行されるアニメーションキューに新しいアニメーションを追加できます。 Dequeueメソッドを使用すると、キューの次の関數(shù)を削除および実行できます。

jQueryアニメーションで.delay()メソッドを使用する方法は？

jQueryの

メソッドは、キュー內の後続のプロジェクトの実行を遅らせるために使用されます。通常、遅延アニメーションに使用されます。たとえば、.delay()はFadeinアニメーションを500ミリ秒遅らせます。 $(selector).delay(500).fadeIn();

以上がjQueryアニメーションを簡単に改善しますの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。