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

javascript

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>

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

実行して内容を確認すると

anim_test effect             -> [object KeyframeEffect]
anim_test target             -> [object HTMLDivElement]
anim_test pseudoElement      -> null
anim_test iterationComposite -> undefined
anim_test composite          -> replace

という出力になります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です