JavaScript 変数を使用して WebKit キーフレーム値を動的に設定するにはどうすればよいですか?

JavaScript を使用して Webkit キーフレーム値を変数で設定する

JavaScript で生成されたランダム値を利用しようとすると、よくある課題に直面します。 CSSアニメーション。 JavaScript 変数を CSS キーフレームに直接挿入することはできません。

代わりに、JavaScript を通じて CSS ルールを動的に作成し、CSS オブジェクト モデル (CSSOM) に挿入する必要があります。

Dynamicキーフレームの作成

キーフレームを作成および操作するには、次の手順に従います。動的:

1. window.document.createElement() メソッドを使用して、目的のキーフレーム アニメーション オブジェクトを作成します。このオブジェクトは、キーフレーム定義のコンテナとして機能します。
2. keyframes.insertRule() メソッドを使用して実際のキーフレームを定義します。このメソッドは、キーフレームの割合とその割合の CSS ルールという 2 つのパラメータを取ります。
3. sheet.insertRule() メソッドを使用して、新しく作成したキーフレーム アニメーションを CSSOM に挿入します。

例

これは、既存のファイルを動的に作成して上書きする例です。ランダムな回転値を使用したキーフレーム アニメーション:

function createRandomRotation(dogValue) {
  // Create the keyframe animation object
  let rotateAnimation = window.document.createElement('style');

  // Define the actual keyframes
  rotateAnimation.innerHTML = `
    @-webkit-keyframes rotate {
      0% {-webkit-transform: rotate(-${dogValue});}
      100% {-webkit-transform: rotate(${dogValue});}
    }

    #dog {
      -webkit-animation: rotate 5s infinite alternate ease-in-out;
    }
  `;

  // Insert the keyframe animation into the CSSOM
  window.document.head.appendChild(rotateAnimation);
}

使用法

この関数を使用すると、ランダムな値で回転キーフレームを継続的に更新できます。たとえば、クリック イベントをトリガーするボタンを使用して、新しいランダムな度数を生成し、それに応じてキーフレームを更新することができます。

dogValue をランダムに生成された度数の値に置き換えることを忘れないでください。

以上がJavaScript 変数を使用して WebKit キーフレーム値を動的に設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。