🚀

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

2022/05/23に公開

CSS

前回、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() とするとドキュメントに表示されているアニメーションオブジェクトが以下のように表示されます。

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