SVGアニメーション – Web Animations API を使う – KeyFrameEffectのプロパティをgetKeyframesを使って確認する

javascript

SVGアニメーション – Web Animations API を使う – KeyFrameEffectのプロパティをgetKeyframesを使って確認する

KeyFrameEffectのプロパティをgetKeyframesを使って取得できるので、その内容がどうなっているのかを確認します。

前回のサンプルを少し変えて、getKeyframesで取得した値を画面に出力するものを用意しました。
サンプル全体はこちら

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>

<style>
.animate_timeline_dom {
    background-color: #cccccc;
    width: 150px;
}
</style>

</head>
<body>

<input type="button" id="button_1" value="animate timline test">
<div class="animate_timeline_dom">Test DOM</div>

<div class="KeyframeEffectDom">
    <div>getKeyframes -> </div>
    <div id="KeyframeEffectDom1"></div>
</div>

<script>

button_1.addEventListener('click', () => {

    // DOM要素を取得
    let animate_timeline_dom = document.querySelector(".animate_timeline_dom");

    let keyframes_test = new KeyframeEffect(
        animate_timeline_dom,
        [
            {transform: "translateX(0px)"  },
            {transform: "translateX(200px)"},
            {transform: "translateY(100px)"},
            {transform: "scale(2)"         },
        ],
        { duration: 5000 },
    );
    
    let anim_test = new Animation(
        keyframes_test,
        document.timeline,
    );

    // アニメーションの再生
    anim_test.play();
    
    // 画面表示用DOMを取得する
    let keyframeeffectdom1 = document.querySelector("#KeyframeEffectDom1");

    let keyframeeffectdom1obj = anim_test.effect.getKeyframes();

    // DOMに取得内容を出力する
    keyframeeffectdom1obj.forEach(function(_x) {
        for(var key in _x){
            keyframeeffectdom1.innerHTML += key + ' -> ' + _x[key] + '<br />';
        }
        keyframeeffectdom1.innerHTML += '----------------<br />';
    });

}, false);
</script>
 
</body>
</html>

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

実行して内容を確認すると、画面上には以下の出力になります。

getKeyframes ->
offset -> null
easing -> linear
composite -> auto
transform -> translateX(0px)
computedOffset -> 0
----------------
offset -> null
easing -> linear
composite -> auto
transform -> translateX(200px)
computedOffset -> 0.3333333333333333
----------------
offset -> null
easing -> linear
composite -> auto
transform -> translateY(100px)
computedOffset -> 0.6666666666666666
----------------
offset -> null
easing -> linear
composite -> auto
transform -> scale(2)
computedOffset -> 1
----------------

という出力になります。

この結果から KeyframeEffectで指定した4つのプロパティ

{transform: "translateX(0px)"  },
{transform: "translateX(200px)"},
{transform: "translateY(100px)"},
{transform: "scale(2)"         },

がそれぞれ取得していることがわかります。