SVGアニメーション – Web Animations API を使う – CSSアニメーション再生時のgetAnimations()の取得について

javascript

SVGアニメーション – Web Animations API を使う – CSSアニメーション再生時のgetAnimations()の取得について

前回の投稿(https://propansystem.net/blog/10005)のサンプルをもとに、
CSSアニメーション再生時のgetAnimations()の取得について試してみます。

SVGでのアニメーション再生中のオブジェクトの情報をgetAnimations()で
取得できることがわかりました。

同様にcssアニメーション中のdivタグの情報をgetAnimations()で取得してみます。

cssのアニメーションは指定オブジェクトを左から右へ500px移動するシンプルなものにしました。

@keyframes cssAnimation {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(500px);
    }
}

このcssアニメーション中にgetAnimations()を実行し、取得した結果を画面に出力するサンプルを用意しました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.bottom {
    margin-bottom    : 10px;
}
#test1_dom {
    color            : #5f5d5d;
    background-color : #eeeeee;
    font-size        : 1.1rem;
    width            : 150px;
    animation        : cssAnimation 10s ease-out 0s forwards;
}
@keyframes cssAnimation {
    0% {
        transform        : translateX(0px);
    }
    100% {
        transform        : translateX(500px);
    }
}
</style>
</head>
<body>
<!-- ボタン -->
<div class="bottom">
    <input type="button" id="getAnimations" value="getAnimations情報の取得と出力">
</div>
<!-- アニメーション用DIV -->
<div id="test1_dom">TEST1</div>
<!-- getAnimationsの取得結果 -->
<div class="params" id="getAnimationsVal"></div>

<script>
// DOM要素取得
let test1_dom            = document.querySelector("#test1_dom"       );
let getAnimations_dom    = document.querySelector("#getAnimations"   );
let getAnimationsVal_dom = document.querySelector("#getAnimationsVal");

// getAnimationsの実行と画面出力
getAnimations_dom.addEventListener('click', (e) => {
    let animations = test1_dom.getAnimations();
    let animations_display_value = '';
    // 各アニメーションの詳細を表示
    animations.forEach((animation, index) => {
        animations_display_value += 'Animation    :' + index                                 + '<br />';
        animations_display_value += 'Play State   :' + animation.playState                   + '<br />';
        animations_display_value += 'Start Time   :' + animation.startTime                   + '<br />';
        animations_display_value += 'Current Time :' + animation.currentTime                 + '<br />';
        animations_display_value += 'Duration     :' + animation.effect.getTiming().duration + '<br />';
        animations_display_value += 'Animation ID :' + animation.id                          + '<br />';
    });
    // 画面内のDOMへ出力する
    getAnimationsVal_dom.innerHTML = animations_display_value;
}, false);
</script>
</body>
</html>

サーバ上のHTMLはこちら(test1.html)

画面にアクセスするとcssアニメーションが再生されます。
再生中に「getAnimations情報の取得と出力」ボタンを押下すると、
SVG再生中に取得表示した時と同様に、cssアニメーション再生中の情報も取得できることがわかります。

コメントを残す

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