CSSとJavaScriptを使用したフレーム別のフレームアニメーションチュートリアル

このチュートリアルでは、HTML、CSS、およびJavaScriptを使用して、滑らかでパフォーマンスがあり、保守可能なフレームごとのアニメーションを作成するためのさまざまな方法を探ります。 点滅する目のアニメーションを構築し、ブラウザやデバイス全体で最適な結果を達成するためのアプローチを徐々に改良します。

重要な概念：

CSSとJavaScriptを使用したフレームごとのアニメーションテクニックは、それぞれがトレードオフを備えた多様なアプローチを提供します。 SVGのスケーラビリティと応答性により、特に複雑なまたはインタラクティブなアニメーションの場合、GIFよりも優れています。

スプライトベースのアニメーションとCSSキーフレームは、HTTPリクエストを最小限に抑え、レンダリングを改善します。
• CSS変換プロパティ、特にハードウェアアクセラレーション（
）では、塗り直しを減らして反射してパフォーマンスを最適化します。
• 適切な手法を選択することは、スケーラビリティ、応答性、パフォーマンス、保守性のニーズに依存します。
• フレームごとのアニメーションとは？ Adobeで定義されているように、
• フレームごとのアニメーションには、すべてのフレームのステージコンテンツを変更することが含まれます。 各フレームがユニークな複雑なアニメーションに最適です。 基本的に、一連の画像が動きの幻想を作成します。 このチュートリアルでは、スケーラビリティにSVG画像を使用しています。 PNG、JPEG、GIFなどの代替案については後で説明します。 JQueryを利用して、Autoprefixerが構成されていると仮定します translate3d
メソッド：

画像の変更ソース：

このシンプルな方法では、

要素の

属性を動的に変更することが含まれます。

はよりスムーズなアニメーションに使用されますが、初期のjankを防ぐために画像のプリロードが重要です。 プリロードは、画像を背景画像として添加して非表示のdivを追加することで実現されます。

長所：宣言、画像はそのまま残っています。

1. cons：

   複数のHTTP要求は、初期ページの負荷を遅くすることができます。 src <img alt="CSSとJavaScriptを使用したフレーム別のフレームアニメーションチュートリアル" >requestAnimationFrame画像の変化不透明度：

   このアプローチは、ソースの代わりに画像の不透明度を変更することにより、塗り直しを避けます。 すべての画像はプリロードされているため、パフォーマンスが向上しますが、複数の画像負荷が必要です。
   • 長所：メソッド1と比較して、レンダリングパフォーマンスの改善
   • cons：まだ複数の画像負荷が必要であり、初期ページの負荷に影響を与える可能性があります。
2. スプライト位置の変更：

   これは、すべてのアニメーションフレームを含む単一の画像であるCSSスプライトシートを使用します。 CSSアニメーションは、を変更してアニメーションを作成します。

   • 長所：単一のhttpリクエスト、javascriptは必要ありません。
   • cons：塗り直しはモバイルでJankを引き起こす可能性があります。

3. 変換でスプライトを移動：これにより、の代わりにtransform: translateXを使用してメソッド3を最適化します。 これにより、塗り直しを最小限に抑えて反射します。 アニメーションでパーセンテージ値をサポートしていない古いIEバージョンには、フォールバックが必要です。 background-positionは、ハードウェアアクセラレーションに使用されます translateX transform: translate3d(0, 0, 0)

   長所：
   単一のHTTPリクエスト、最小化された塗り直しによるモバイルのスムーズなアニメーション。
   • cons：ieフォールバックが必要です。
   インラインsvg：
svgのインランス外部ファイルを使用する代わりに、特に再訪確率が低いページでは、初期ページの読み込み時間を改善できます。

パフォーマンスの比較：パフォーマンステスト（たとえば、jsperfの使用）は、スプライト変換法（方法4）が一般的に最高のレンダリングパフォーマンスを提供することを示しています。

代替案：

gif：スケーラビリティが重要でない場合は適切ですが、アニメーションフローの制御がなく、大きくなる可能性があります。

Canvas：小さな画面に複数のアニメーションオブジェクトを使用したパフォーマンスに最適ですが、Canvas APIの知識が必要で、DOMイベントサポートがありません。
• 結論：
• 最良の方法は、プロジェクトの要件に依存します。 SVGにスケーラビリティを優先し、パフォーマンスに変換プロパティを使用し、最適な初期負荷時間についてスプライトを検討します。 パフォーマンス、保守性、開発者の親しみやすさのバランスをとる最適なアプローチを選択してください。
（画像URLは、すぐに使用可能な形式で提供されていないため、出力に含まれていません。プレースホルダーを実際の画像URLに置き換えます。

以上がCSSとJavaScriptを使用したフレーム別のフレームアニメーションチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。