WebアニメーションAPIでページを実現します

この記事は、ゲスト著者のDudley Storeyによると、ダイナミックでパフォーマンスのあるWebアニメーションを作成するための強力なツールであるWeb Animations APIを探ります。 SitePointのゲスト投稿は、大手JavaScriptの専門家から魅力的なコンテンツを提供することを目指しています。

キーハイライト：

WebアニメーションAPIは、CSS遷移、Smil、JavaScript、およびJavaScriptアニメーションフレームワークの最良の側面を統合し、制限を克服し、Webアニメーションに標準化されたアプローチを提供します。 CSSアニメーションのパフォーマンスに一致するキーフレーム、緩和、およびJavaScriptベースの要素コントロールをネイティブにサポートします。

このAPIは、従来のCSSメソッドと比較して、より動的で表現力豊かで効率的なアニメーションを可能にします。 新しい構文を必要とせずに任意のDOM要素をアニメーション化します
• アニメーションはJavaScript内で直接作成および管理されており、柔軟性と制御が強化されています。キーフレームはオブジェクト内の配列として表され、明示的な「」または「From」の必要性を排除します。
ほとんどの最新のブラウザ（Chrome、Firefox、Safari）は、WebアニメーションAPIをサポートしています。サポートされていないブラウザでは、堅牢なポリフィルが利用できます。 SVGとReactと互換性があります
• すべてのアニメーションの単一のAPI：
Webアニメーションは、4つの異なる方法で歴史的に断片化されてきました。

CSSトランジションとアニメーション：

非常にパフォーマンスを発揮し、キーフレームをサポートしますが、複雑なアニメーションの構築は時間がかかり、CSSおよびJavaScriptの制御は制限されています。 これらは、多くの場合、単純なUI応答、ループ、ページロードアニメーションに使用されます。 SMIL（同期されたマルチメディア統合言語）：

構文は強力だが複雑で、完全なブラウザのサポートがありません。 SVG要素に制限されています

javascript：

は直接的な要素制御を提供しますが、キーフレームと緩和のサポートが組み込まれており、そのパフォーマンスはCSSほど最適化されていません。 Canvas APIは優れていますが、アニメーションの基礎がなく、任意のDOM要素をアニメーション化することはできません。
• JavaScriptアニメーションフレームワーク（Greensockなど）：アドレスJavaScriptのアニメーションの制限がありますが、フレームワークのオーバーワーク（ページの負荷、パフォーマンス、学習曲線）を紹介します。
• Web Animations APIは、これらのメソッドの最良の機能を統合仕様に組み合わせて、それらの欠点を削除することを目的としています。キーフレーム、緩和、およびJavaScript要素コントロールをネイティブサポートし、CSSと同じオンスクリーンパフォーマンスを実現します。 ブラウザのサポートの成長と信頼性の高いポリフィルにより、魅力的なWebアニメーションを作成するための説得力のあるオプションです。 JavaScriptのキーフレーム：キーフレーム：

• 簡単な例で説明しましょう：画面全体に赤いボールをアニメーション化します。 HTMLと初期のCSSは同じままです：

  <code class="language-html"><div id="redball"></div></code>

  <code class="language-css">body { margin: 0; background: #000; overflow: hidden; min-height: 100vh; }
  #redball { background: red; width: 30vmin; height: 30vmin; border-radius: 50%; }</code>

  ボールを動かすためのCSSアニメーション：

  <code class="language-css">@keyframes moveBall { from { transform: translateX(-20vw); } to { transform: translateX(100vw); } }
  #redball { animation: moveBall 3s infinite; }</code>

  同等のWebアニメーションAPI JavaScript：

  <code class="language-javascript">var moveBall = document.getElementById('redball').animate([{ transform: 'translateX(-20vw)' }, { transform: 'translateX(100vw)' }], { duration: 3000, iterations: Infinity, easing: 'ease' });
  moveBall.play();</code>

  オブジェクト内のキーフレーム配列と、ミリ秒の使用に注意してください。 将来のブラウザの更新により、キーフレームの構文が簡素化されます

  画像処理：

  

  記事は、より複雑な例を示します。一連の画像をページにアニメーション化し、取引カードをシミュレートします。 これは、動的でランダム化されたアニメーションを処理するAPIの能力を紹介します。 コードは

  を使用して、アニメーションを開始する前にすべての画像がロードされていることを確認します。 アニメーションには、ランダムな位置付け、回転、フェージング効果が含まれます imagesLoaded

  将来と結論：

  Web Animations APIは積極的に開発中であり、ブラウザーのサポートが増加し、すぐに入手可能なポリフィルがあります。 この記事は、APIの利点を強調することで締めくくります。CSSアニメーションの宣言的性質からJavaScriptの動的制御への移行、より表現力豊かでパフォーマンスのあるアニメーションを可能にします。

  よくある質問（FAQ）：

  この記事は、その定義、CSSアニメーションとの違い、使用法、アニメーションコントロール、利点、ブラウザーサポート、SVGアニメーション、アニメーション、反応統合、学習など、WebアニメーションAPIのさまざまな側面をカバーする包括的なFAQセクションで終了します。リソース。

以上がWebアニメーションAPIでページを実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。