雷尚
戻る
2024年6月18日 5分読了

JavaScriptでCSSアニメーションを制御する方法

ウェブアニメーションを開発する際、開発者はCSSとJavaScriptのどちらが要件に合致するかを慎重に判断する必要があります。

Post

ウェブデザイナーは、CSSでのアニメーションがJavaScriptよりも難しいと考えることがあります。CSSアニメーションにはいくつかの制限があるものの、実際には思われている以上に多くのことが可能です。さらに、通常はより高いパフォーマンスを発揮します。

早速始めましょう！

JavaScriptを少し加えることで、CSSアニメーションとトランジションは、ほとんどのJavaScriptライブラリよりも効率的にハードウェアアクセラレーションされたアニメーションやインタラクションを実現できます。早速見ていきましょう！

CSSトランジションの操作

コーディングフォーラムには、要素のトランジションをトリガーしたり一時停止したりすることに関する無数の質問があります。JavaScriptを使えば、その解決策は実は非常にシンプルです。

要素のトランジションをトリガーするには、その要素にトランジションを起動するクラス名を切り替えます。

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

CSS「コールバック関数」の活用

CSSトランジションとアニメーションを操作する上で最も有用でありながらあまり知られていないJavaScriptのトリックの1つは、それらが発火するDOMイベントです。例えば、アニメーションにはanimationend、animationstart、animationiteration、トランジションにはtransitionendがあります。これらが何をするかは想像できるでしょう。これらのアニメーションイベントは、要素のアニメーションが終了したとき、開始したとき、または1回の反復を完了したときにそれぞれ発火します。

これらのイベントは現時点ではベンダープレフィックスが必要なため、このデモではCraig Bucklerが開発したPrefixedEventという関数を使用しています。この関数はelement、type、callbackをパラメータとして持ち、これらのイベントをクロスブラウザで利用できるようにします。彼のJavaScriptでCSSアニメーションをキャプチャする方法に関する有用な記事はこちらです。そして、どの（名前の）アニメーションがイベントを発火しているかを判断する別の記事はこちらです。

CSSアニメーションの高度なテクニック

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

animation-play-state プロパティ

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

要素.スタイル.eスポーツの興奮を日常に。 = 「一時停止」;

要素.スタイル.最先端のeスポーツ体験をあなたに。 = 「実行中」;

現在のキーフレーム進行状況の取得

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

showPercent を表示 = ウィンドウ.setInterval(関数() {

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

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

  } その他 {

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

  }

  // Updates a div that displays the current percent

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

}, 40);

設計思想の重要性

コーディングを始める前に、トランジションやアニメーションがどのように実行されるべきかを考え、計画することが、問題を最小限に抑え、望む効果を得るための最善の方法です。後で解決策をGoogleで検索するよりもずっと良いでしょう！この記事で概説したテクニックやトリックが、プロジェクトに必要なアニメーションを作成するための常に最善の方法であるとは限りません。

ここでは、HTMLとCSSだけで賢く問題を解決できる小さな例を紹介します。JavaScriptに頼る必要があると考えたかもしれません。

結論として

  • 開発者はかつて、CSSとJavaScriptのどちらかを選ぶ必要がありました。
  • JavaScriptでは、CSSトランジションはCSSアニメーションよりも一般的に扱いやすいです。
  • CSSマトリックスは、特に初心者にとっては、一般的に扱うのが困難です。
  • 何を行うべきかを考え、その方法を計画すること。