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>
実行して内容を確認すると、画面上には以下の出力になります。
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
がそれぞれ取得していることがわかります。