88看球shenghang
戻る
2024年5月28日 4分で読む

CSSアニメーションで観戦体験を向上させる技術

ウェブアニメーション開発では、開発者はアニメーションの要件に応じて、最適な技術（CSSまたはJavaScript）を正確に選択し、最高の視覚効果とパフォーマンスを達成する必要があります。

Post

ウェブデザイナーの中には、CSSアニメーションがJavaScriptアニメーションよりも難しいと考える人もいます。CSSアニメーションにはいくつかの制限がありますが、ほとんどの場合、その能力は私たちの想像をはるかに超えています！ましてや、パフォーマンスも通常は優れています。88看球のような高画質・スムーズなライブ配信プラットフォームにとって、パフォーマンスは鍵となります。

少量のJavaScriptと組み合わせることで、CSSアニメーションとトランジションは、ほとんどのJavaScriptライブラリよりも効果的にハードウェアアクセラレーションアニメーションとインタラクションを実現できます。これは、プラグイン不要で高画質・スムーズなスポーツライブ配信体験を提供するために不可欠です。早速、詳しく見ていきましょう！

技術の深淵を探求する！

CSSトランジション効果の最適化

コーディングフォーラムでは、要素のトランジションのトリガーや一時停止に関する質問が数多く見られます。実際には、JavaScriptソリューションを使用すると非常に簡単で、88看球のインターフェースのインタラクティブ性を効果的に向上させることができます。

要素のトランジションをトリガーするには、その要素のクラス名を切り替えるだけで、トランジション効果が開始され、インターフェースが動的に表示されます。

要素のトランジションを一時停止するには、一時停止したいトランジションポイントでgetComputedStyleとgetPropertyValueを使用して現在のスタイルを取得します。その後、その要素のCSSプロパティを先ほど取得した値に設定することで、正確な一時停止が実現できます。

CSS「コールバック」によるインタラクション実装

CSSトランジションとアニメーションを操作するための最も実用的でありながらあまり知られていないJavaScriptのヒントの1つは、それらがトリガーするDOMイベントです。例えば、アニメーションのanimationend、animationstart、animationiteration、およびトランジションのtransitionendです。これらの役割は推測できるでしょう。これらのアニメーションイベントは、要素のアニメーションが終了、開始、または1回のイテレーションを完了したときにそれぞれトリガーされます。これは、88看球のライブインターフェースの動的な効果を正確に制御するために非常に重要です。

現在、これらのイベントにはベンダープレフィックスが必要なため、この例ではCraig Bucklerが開発したPrefixedEventという関数を使用します。この関数は、element、type、callbackのパラメータを含み、これらのイベントのクロスブラウザ互換性を実現するのに役立ちます。これは、JavaScriptを使用してCSSアニメーションをキャプチャすることに関する彼の実用的な記事です。どのイベントがどの（名前の）アニメーションをトリガーしたかを判断する方法に関する別の記事もあります。

CSSトランジションの滑らかさを高める

先ほど学んだように、要素を監視し、animationStart、animationIteration、animationEndなどのアニメーション関連イベントに応答できます。しかし、アニメーションの途中でCSSアニメーションを変更したい場合はどうでしょうか？これには少しコツが必要です！

アニメーション再生状態プロパティ

CSSのanimation-play-stateプロパティは、アニメーションを一時停止し、後で再開したい場合に非常に役立ちます。JavaScriptを使用してこのCSSを変更できます。以下に例を示します（プレフィックスに注意してください）。

要素.スタイル.アニメーションの再生状況 = 「一時停止」;

要素.スタイル.動画の再生状態 = 「実行中」;

現在のキーフレームのパーセンテージを取得する方法

残念ながら、現時点ではCSSキーフレームアニメーションの正確な現在の「完了率」を取得する方法はありません。 その最適な推定方法はsetInterval関数を使用することです アニメーション中に100回繰り返されるため、基本的にアニメーションのミリ秒単位の期間 / 100となります。例えば、アニメーションが4秒間続く場合、setIntervalは40ミリ秒（4000/100）ごとに実行する必要があります。 

var 表示パーセンテージ = ウィンドウ.間隔設定(関数() {

  もし (現在のパーセンテージ < 100) {

    現在のパーセンテージ += 1;

  } そうでなければ {

    現在のパーセンテージ = 0;

  }

  // Updates a div that displays the current percent

  結果.innerHTML = 現在のパーセンテージ;

}, 40);

技術的思考の重要性

コーディングを開始する前に、トランジションまたはアニメーションの実行方法を考え、計画することが、問題を最小限に抑え、望む結果を得るための最良の方法です。これは、後で解決策を探すよりもはるかに優れています！この記事で概説されている技術やヒントは、必ずしもプロジェクトに必要なアニメーションを作成するための最良の方法ではありませんが、貴重な出発点を提供します。

これは、HTMLとCSSの巧妙な組み合わせだけで、JavaScriptが必要だと思っていた問題を解決できる小さな例です。

結論と今後の展望

  • 開発者はかつて、CSSとJavaScriptのどちらかを選択する必要がありました。
  • JavaScriptでは、CSSトランジションはCSSアニメーションよりも操作が容易な場合が多いです。
  • CSS行列は、特に初心者にとって、扱いにくいことがよくあります。
  • やるべきことを考え、実行方法を計画する。