SVGアニメーション – Web Animations API を使う – CSSアニメーション再生時のgetAnimations()の取得について
前回の投稿(https://propansystem.net/blog/10005)のサンプルをもとに、
CSSアニメーション再生時のgetAnimations()の取得について試してみます。
SVGでのアニメーション再生中のオブジェクトの情報をgetAnimations()で
取得できることがわかりました。
同様にcssアニメーション中のdivタグの情報をgetAnimations()で取得してみます。
cssのアニメーションは指定オブジェクトを左から右へ500px移動するシンプルなものにしました。
@keyframes cssAnimation {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(500px);
}
}
このcssアニメーション中にgetAnimations()を実行し、取得した結果を画面に出力するサンプルを用意しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.bottom {
margin-bottom : 10px;
}
#test1_dom {
color : #5f5d5d;
background-color : #eeeeee;
font-size : 1.1rem;
width : 150px;
animation : cssAnimation 10s ease-out 0s forwards;
}
@keyframes cssAnimation {
0% {
transform : translateX(0px);
}
100% {
transform : translateX(500px);
}
}
</style>
</head>
<body>
<!-- ボタン -->
<div class="bottom">
<input type="button" id="getAnimations" value="getAnimations情報の取得と出力">
</div>
<!-- アニメーション用DIV -->
<div id="test1_dom">TEST1</div>
<!-- getAnimationsの取得結果 -->
<div class="params" id="getAnimationsVal"></div>
<script>
// DOM要素取得
let test1_dom = document.querySelector("#test1_dom" );
let getAnimations_dom = document.querySelector("#getAnimations" );
let getAnimationsVal_dom = document.querySelector("#getAnimationsVal");
// getAnimationsの実行と画面出力
getAnimations_dom.addEventListener('click', (e) => {
let animations = test1_dom.getAnimations();
let animations_display_value = '';
// 各アニメーションの詳細を表示
animations.forEach((animation, index) => {
animations_display_value += 'Animation :' + index + '<br />';
animations_display_value += 'Play State :' + animation.playState + '<br />';
animations_display_value += 'Start Time :' + animation.startTime + '<br />';
animations_display_value += 'Current Time :' + animation.currentTime + '<br />';
animations_display_value += 'Duration :' + animation.effect.getTiming().duration + '<br />';
animations_display_value += 'Animation ID :' + animation.id + '<br />';
});
// 画面内のDOMへ出力する
getAnimationsVal_dom.innerHTML = animations_display_value;
}, false);
</script>
</body>
</html>
画面にアクセスするとcssアニメーションが再生されます。
再生中に「getAnimations情報の取得と出力」ボタンを押下すると、
SVG再生中に取得表示した時と同様に、cssアニメーション再生中の情報も取得できることがわかります。