SVGアニメーション – Web Animations API を使う – KeyFrameEffectのプロパティを確認する
前回投稿したAnimationの第一引数「keyframes_test」は
animation の基本構文
var animation = new Animation([effect][, timeline]);
のeffectにあたり、KeyFrameEffectオブジェクトと言えます。
このオブジェクトのプロパティを出力して調べてみます。
前回のスクリプトにconsole.logを追加し、KeyFrameEffectオブジェクトの下記のプロパティを出力してみます。
target pseudoElement iterationComposite composite
サンプル全体はこちら
<!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>
<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();
console.log("anim_test effect -> " + anim_test.effect);
console.log("anim_test target -> " + anim_test.effect.target);
console.log("anim_test pseudoElement -> " + anim_test.effect.pseudoElement);
console.log("anim_test iterationComposite -> " + anim_test.effect.iterationComposite);
console.log("anim_test composite -> " + anim_test.effect.composite);
}, false);
</script>
</body>
</html>
実行して内容を確認すると
anim_test effect -> [object KeyframeEffect] anim_test target -> [object HTMLDivElement] anim_test pseudoElement -> null anim_test iterationComposite -> undefined anim_test composite -> replace
という出力になります。