JavaScript を使用した動的な値に基づいたキーフレームのアニメーション化

JavaScript を使用してキーフレーム値を計算およびアニメーション化する方法

動的な Web アプリケーションを構築する場合、JavaScript と CSS アニメーションを組み合わせると、スムーズで視覚的に魅力的な遷移を作成できます。よくある課題の 1 つは、リアルタイム データ値に基づいて要素をアニメーション化することです。良い例は、SVG とストローク ダッシュ オフセットを使用して、プログレス バーの現在のパーセンテージを反映するキーフレーム アニメーションを作成することです。

この手法は、購読者数がリアルタイムで更新されるこの例のように、購読者数などの動的な値を表示する場合に特に役立ちます。アニメーションをシームレスに動作させるには、この数値をパーセンテージに変換し、CSS アニメーションに直接適用します。

ただし、JavaScript は CSS アニメーションを扱う場合、特にキーフレームを効果的に操作するためにパーセンテージなどの値を計算する場合に混乱を招く可能性があります。この場合、アニメーションに正しい値が反映されるようにするには、JavaScript を使用して動的データを抽出および操作する方法を理解することが重要です。

この記事では、JavaScript を使用して数値データを削除し、パーセンテージを計算し、ストローク-ダッシュオフセット プロパティを使用してそれらをキーフレームに適用する方法を説明します。最後には、JavaScript と CSS がどのように連携して応答性の高いアニメーションを作成できるかを明確に理解できるようになります。

指示	使用例
fetch()	fetch() メソッドは、リソース (テキスト ファイル、API など) からデータをリクエストするために使用されます。このスクリプトでは、進行状況バーで処理するためにテキスト ファイルからサブスクライバ データをフェッチするために使用されます。
parseInt()	parseInt() 関数は文字列を整数に変換します。ここでは、スラッシュの前の値 (例: 42/50) を取り除いて、現在の加入者数を取得します。
split()	Split() メソッドは、区切り文字に基づいて文字列を配列に分割します。この場合、「/」を使用して現在の購読者数と目標 (42 から 42/50) を区切ります。
strokeDashoffset	ストロークDashoffsetは、ストロークの描画方法を制御するSVG属性です。ここでは、サブスクリプションの割合に基づいて SVG サークルの塗りつぶしを動的に変更するために操作されます。
setTimeout()	このメソッドは、指定された遅延の後に関数を呼び出します。ここではラベルを回転する間隔を設定するために使用され、数秒後に新しいラベルが表示されるようになります。
cloneNode()	cloneNode(true) は、子を含むノードのコピーを作成するために使用されます。これは、ラベル テンプレートを複製して DOM に動的に追加するために不可欠です。
visibility	この CSS プロパティは JavaScript を介して制御され、ラベルを表示または非表示にします。これにより、回転中に一度に 1 つのラベルだけが表示されるようになります。
strokeDasharray	ストロークDasharrayは、SVGストローク内のダッシュとギャップのパターンを定義します。これは、ストロークDashoffsetでアニメーション化される円の円周に一致するように特定の値(450)に設定されます。

JavaScript を使用した SVG サークルのアニメーション化: ステップバイステップ ガイド

この例では、JavaScript と CSS を組み合わせて SVG 円の動的なアニメーションを作成しました。主な目標は、サークルの進行状況をアニメーション化して、サブスクリプション数をリアルタイムで視覚的に表現することです。サークルが使用しているのは、 CSS プロパティ。円のストロークをどの程度表示するかを制御します。 JavaScript を使用して進行状況のパーセンテージを取得して計算し、その値をストロークに適用することで、リアルタイム データに基づいたスムーズなアニメーションが可能になります。

重要なコンポーネントの 1 つは、 ファイルまたはサーバーからデータ (この場合はサブスクリプション数) を取得する関数。スクリプトは、次のような文字列操作メソッドを使用してデータの数値部分を抽出します。 、結果を使用可能な数値に変換します。 。現在のサブスクリプション数を目標で割ることにより、進捗状況を小数点 (パーセンテージ) として計算します。このパーセンテージは、 ストロークダッシュオフセット 視覚効果を作成します。

2 番目のスクリプトはラベルの回転を処理し、表示に動的コンテンツのレイヤーを追加します。ラベルは、次のコマンドを使用して DOM に追加されます。 メソッド。既存のラベル テンプレートを複製します。各ラベルは、設定された間隔で回転されます。この間隔は、 関数。このメソッドは、指定された遅延の後に回転をトリガーし、ユーザーの操作を必要とせずにラベル間のスムーズな移行を作成します。

の組み合わせ サークルの場合、ラベル回転スクリプトは魅力的なユーザー インターフェイスを作成します。サークルの進行状況と表示されるラベルの両方を動的に変更することで、ユーザーにリアルタイムで進行状況を視覚的に表示します。また、コードがモジュール化されているため、これらの機能を他のデータ駆動型アプリケーションに簡単に適合させることができ、動的な UI 要素の実装を検討している開発者にとって柔軟なソリューションになります。

// HTML and SVG structure
<div id="labels"></div>
<svg width="200" height="200">
<circle id="circle" cx="100" cy="100" r="90" />
</svg>
// JavaScript to animate stroke-dashoffset
let labels = document.getElementById("labels");
const SubGoal = 50; // Total subscription goal
function updateProgress(data) {
  const SubCount = parseInt(data.split('/')[0]); // Extract number
  const SubPercent = SubCount / SubGoal; // Calculate percentage
  const SubPercentStroke = 450 - 450 * SubPercent; // Set stroke offset
  document.getElementById('circle').style.strokeDashoffset = SubPercentStroke;
}
// Example usage
fetch('subscribers.txt').then(response => response.text())
.then(data => updateProgress(data));

// Label rotation logic
var displaySettings = "RotatingDisplays";
var displayRotationSeconds = 2;
var displayRotationIndex = 0;
function rotateLabelDisplay() {
  if (displayRotationIndex >= labels.children.length) {
    displayRotationIndex = 0;
  }
  for (const label of labels.children) {
    label.style.visibility = 'hidden';
  }
  let label = labels.children[displayRotationIndex];
  label.style.visibility = 'visible';
  displayRotationIndex++;
  setTimeout(rotateLabelDisplay, displayRotationSeconds * 1000);
}
// Trigger rotation if display setting is enabled
if (displaySettings === "RotatingDisplays") {
  rotateLabelDisplay();
} else {
  labels.children[0].style.visibility = "visible";
}

JavaScript および CSS 変数を使用してアニメーションを強化する

使用上の重要な側面の 1 つは、 アニメーションを制御するには、以下と対話する機能が必要です。 。これらの変数を使用すると、開発者はより再利用可能で保守が容易なコードを作成できます。たとえば、ストローク-ダッシュオフセットなどのアニメーション値を JavaScript に直接ハードコーディングする代わりに、それらを CSS 変数として定義し、JavaScript を使用して操作できます。これにより、アニメーション プロパティを管理するためのよりクリーンな方法が提供され、コードがよりモジュール化され、スケーラブルになります。

JavaScript と CSS を組み合わせるときのもう 1 つの強力な機能は、イベント リスナーの使用です。イベント駆動型アニメーションは、ボタンのクリックやページの下へのスクロールなどのユーザー操作に基づいてトリガーできます。この例では、インタラクティブ性を追加することでアニメーションを強化できます。たとえば、ユーザーがサブスクライブするか別のアクションを実行するたびに、ストローク ダッシュ オフセットを再計算して動的に適用できます。これにより、リアルタイム データに応答する、非常に魅力的でインタラクティブなエクスペリエンスが作成されます。

さらに、組み合わせると、 キーフレームを使用することは、スムーズで効率的なアニメーションを作成するもう 1 つの方法です。このメソッドにより、ブラウザの最適な再描画サイクル中にアニメーションが確実に実行され、従来の setInterval または setTimeout と比較してパフォーマンスが向上します。この手法は、ユーザー インターフェイスの速度が低下する可能性がある、頻繁なアニメーションや負荷の高い JavaScript プロセスを処理する場合に特に役立ちます。

1. どのようにして SVGアニメーションに影響しますか？
2. の SVG パス ストロークをどの程度表示するかを制御します。値を変更すると、進行状況のようなスムーズなアニメーションが可能になります。
3. の役割は何ですか リアルタイムアニメーションでは？
4. API またはファイルからデータを取得するために使用されます。アニメーションでは、これは購読者数などの動的な値をロードし、画面上でアニメーション化できるようにするのに役立ちます。
5. できる アニメーションの間隔を制御するために使用されますか?
6. はい、 ラベルを一定間隔で回転させるなど、アニメーションに遅延を導入するために使用できます。
7. 目的は何ですか JavaScript アニメーション スクリプトで?
8. 文字列 (「42/50」など) を整数に変換します。これは、ダイナミック アニメーションでパーセンテージを計算するために必要です。
9. なぜ使用する必要があるのか の代わりに ?
10. アニメーション用に最適化されており、ブラウザの再描画サイクルと同期することでスムーズな遷移が保証されます。

組み合わせる CSS を使用すると、リアルタイム データに応答できる強力でダイナミックなアニメーションが可能になります。パーセンテージなどの値を計算し、キーフレーム アニメーションに適用する方法を理解することで、ライブの進行状況やデータの更新を反映する、魅力的で応答性の高いユーザー インターフェイスを作成できます。

このガイドで説明されているテクニックを使用すると、次のようなプロパティを簡単に操作できます。 SVG アニメーションの場合は要素を動的に回転させます。この組み合わせにより、リアルタイム データ入力を使用してダイナミック アニメーションをプロジェクトに統合したいと考えている開発者に、スケーラブルなソリューションが提供されます。