jQueryアニメーションを簡単に改善します-jsチュートリアル-php.cn

Easily Improving jQuery Animations

コアポイント

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

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

jQueryの問題は何ですか？

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

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

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

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

jquery

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

、

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

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

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

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

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

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

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

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

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

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

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

jQueryで複数のアニメーションをリンクする方法は？

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

jQueryで複数の属性を同時にアニメーション化する方法は？

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

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

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