10_4 CSS Animationsの取得

CSS Animations、つまりCSSのキーフレームを使ったアニメーションは、document.getAnimations()メソッドで取得できます。結果はAnimationオブジェクトを入れた配列として返されます。

const allAnimationsArray = document.getAnimations();

ただし、getAnimations()が取得できるのは、呼び出されたときに動いているものだけで、CSSで設定されていても実際に動作していないアニメーションは含まれません。

取得したアニメーションは、Animationオブジェクトとして、play()やpause()メソッドなどが使用できます。

動作しているアニメーションが1つだと分かっている場合には、得られた配列の最初の要素として、Animationオブジェクトが参照できます。

// Animationオブジェクトの入った配列を取得
const CSSAnimsList = document.getAnimations();
// Animationオブジェクトの数  CSSAnimsList.length
// 1個しかないので、特定できる
const anim = CSSAnimsList[0];

次の例では、取得した1つのAnimationオブジェクトのプロパティを出力しています。

CSS Animationsの取得(アニメーションが1つの場合)

動作しているアニメーションが2個だと分かっている場合には、配列に含まれる最初とその次の要素として特定できます。次の例では、特定したAnimationオブジェクトからcancel()メソッドを呼び出して一度再生前の状態に戻し、setTimeout()関数を使って、2秒後に再生を開始しています。

const CSSAnimsList = document.getAnimations();
// アニメーションの数は2つなので、それぞれ特定できる。
const anim1 = CSSAnimsList[0];
anim1.cancel();
const anim2 = CSSAnimsList[1];
anim2.cancel();

// 2秒後に再生開始
window.setTimeout(()=>{
  anim1.play();
  anim2.play();
},2000);

CSS Animationsの取得(アニメーションが2つの場合)

動作しているアニメーションがいくつか分からない場合には、document.getAnimations()で得た配列を、配列のforEach()メソッドなどで処理します。次の例では、Animationオブジェクトのreverse()を使って、3.5秒後に再生の向きを反転しています。

// getAnimations()でアニメーションの配列を取得
const CSSAnims = document.getAnimations();
// 配列のforEace()で不特定数のアニメーションを処理
// 3.5秒ごとにアニメーションを反転
window.setInterval(()=>{
  CSSAnims.forEach((anim)=>{
    anim.reverse();
  });
},3500);

CSS Animationsの取得(アニメーションがいくつか分からない場合)

取得したAnimationオブジェクトは、play()やpause()などのメソッドを使って、再生を制御することができます。次の例では、動作しているアニメーションがいくつか分からない場合、1つのボタンのクリックで、Animationオブジェクトの再生状態(playStateプロパティ)を調べ、再生中なら一時停止し、 一時停止中なら再生する、いわゆるトグル処理を行っています。

[Toggle]ボタンがクリックされたら
toggleButton.addEventListener('click',()=>{
// アニメーションの配列の各要素に対して
  CSSAnims.forEach((anim) => {
    // 今の再生状態を調べ、再生中なら一時停止し、
    // 一時停止中なら再生する
    if(anim.playState ==='running'){
      anim.pause();
    }else if(anim.playState ==='paused'){
      anim.play();
    }
  });
}, false);

CSS Animationsの取得(アニメーションがいくつか分からない場合)

なおこの例では、2つめと3つめのボールのアニメーション開始をCSSのanimation-delayプロパティを使って、少しずつずらしています。

/* 2つめのボール */
.no2{
  top:180px;
  /* 開始を0.2秒遅らせる */
  animation: ball-animation 1s infinite alternate 0.2s;
}
/* 3つめのボール */
.no3{
  top:230px;
  /* 開始を0.2秒遅らせる */
  animation: ball-animation 1s infinite alternate 0.4s;
}

getAnimations()では、CSS Transtionsアニメーションも取得できますが、取得時にアニメーションを動かしておく必要があります。CSS Transtionはそもそも、hoverなど、何らかのきっかけで動作するものなので、上記のようなボタンのクリックによる制御には向いていません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA