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