🚀

WebAnimations API で CSS アニメーションを操作してみる②

2022/05/22に公開約2,500字

前回、WebAnimations API で CSS アニメーションを操作してみるで Web Animations API のさわりを紹介しましたが、ここでは実際に CSS アニメーションを Web Animations API を使って操作をしてみます。

少しでも Web Animations API を使ってみたいと思っていただければ幸いです。

Web Animations API とは?

WebAnimations API で CSS アニメーションを操作してみる をご覧ください。

Animation オブジェクトの取得

Web Animations API 仕様書の 6.8 Animatable インターフェイス に Animatable インターフェイスに animate()getAnimations() が定義されています。

interface mixin Animatable {
    Animation animate(object? keyframes, optional (unrestricted double or KeyframeAnimationOptions) options = {});
    sequence<Animation> getAnimations(optional GetAnimationsOptions options = {});
};

この Animatable インターフェイスは同仕様書の 6.11 Element 要素の拡張 に以下のようにアニメーション対象となる DOM 要素全てに継承するように定義されています。

Element includes Animatable;

つまり、アニメーション可能な要素に対して getAnimations() を実行するとアニメーションオブジェクトを取得することができます。

const animObj = document.getElementById("target").getAnimations()[0];

以下は、CSS アニメーションオブジェクトを取得したサンプルです。アニメーション名やアニメーションのキーフレームにアクセスすることが出来ます。

また、HTML のドキュメントに対して、全てのアニメーションオブジェクトが取得できるよう、DocumentOrShadorRoot にも拡張が行われています。

partial interface mixin DocumentOrShadowRoot {
    sequence<Animation> getAnimations();
};

このインターフェイスを使うことで、ドキュメント全体のアニメーションを取得することが出来ます。

アニメーションの再生・停止をしてみる

取得したアニメーションオブジェクトを操作して、実際のアニメーションを取得して再生・停止をしてみます。

以下のサンプルアニメーションを Chrome DevTools を使ってコンソールから操作します。

上記サンプルを Chrome で開き、F12 を押してコンソールを開き、ターゲットフレームを Codepen のフレームにします。(Document.getAnimations() を使うにあたって、カレントドキュメントをフレームのドキュメントにしないとアニメーションを取得できない)
コンソールで document.getAnimations() とするとドキュメントに表示されているアニメーションオブジェクトが以下のように表示されます。


アニメーションオブジェクトの取得

ここでアニメーションを停止させてみるには以下のように pause() メソッドを実行します。

document.getAnimations()[0].pause();


アニメーションの停止

反対に再生をさせる場合には以下のように play() メソッドを実行します。

document.getAnimations()[0].play();


アニメーションの再生

次に

ここまでは CSS アニメーションなどが要素に指定されている場合のサンプルでしたが、次回以降では CSS アニメーションが指定されていない要素に Web Animations API を使ってアニメーションを追加してみます。

Discussion

ログインするとコメントできます