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

javascript

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

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

サンプル全体はこちら

<!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>getComputedTiming -> </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,
            delay   : 100,
            endDelay: 300
        }
    );
    
    let anim_test = new Animation(
        keyframes_test,
        document.timeline,
    );

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

    let keyframeeffectdom1obj = anim_test.effect.getComputedTiming();

    for(var key in keyframeeffectdom1obj){
        keyframeeffectdom1.innerHTML += key + ' -> ' + keyframeeffectdom1obj[key] + '<br />';
    }

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

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

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

getKeyframes ->
delay -> 100
direction -> normal
duration -> 5000
easing -> linear
endDelay -> 300
fill -> none
iterationStart -> 0
iterations -> 1
activeDuration -> 5000
currentIteration -> null
endTime -> 5399.999999999999
localTime -> 0
progress -> null

という出力になります。

この結果から KeyframeEffectのタイミングプロパティで指定した3つのプロパティ

duration: 5000,
delay   : 100,
endDelay: 300

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