SVGアニメーション – Web Animations API を使う – アニメーション再生時のgetAnimations()について
SVGアニメーション – Web Animations API を使う – アニメーション再生時のgetAnimations()について
アニメーション再生時に、再生しているdiv要素のメソッドとして「getAnimations()」が使えます。
このメソッドは再生中のアニメーションのAnimationのオブジェクト(の配列)として取得することができます。
また、アニメーションを停止してidleになっている要素では取得できません。
css定義されたアニメーションも取得できます。
以下に簡単なサンプルを用意しました。
<!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;
}
</style>
</head>
<body>
<!-- ボタン -->
<div class="bottom">
<input type="button" id="start_animate" value="アニメーション開始" >
<input type="button" id="pause_animate" value="アニメーション一時停止">
<input type="button" id="reverse_animate" value="アニメーション逆再生" >
<input type="button" id="finish_animate" value="アニメーション終了" >
<input type="button" id="cancel_animate" value="アニメーション停止" >
</div>
<!-- ボタン -->
<div class="bottom">
<input type="button" id="getAnimations" value="getAnimationsの実行" >
</div>
<!-- アニメーション用DIV -->
<div id="test1_dom">TEST1 (<span id="display"></span>)</div>
<!-- 再生秒数 -->
<div class="params" id="currentTime_value"></div>
<!-- getAnimationsの取得結果 -->
<div class="params" id="getAnimationsVal"></div>
<script>
// DOM要素取得
let start_animate_dom = document.querySelector("#start_animate" );
let pause_animate_dom = document.querySelector("#pause_animate" );
let reverse_animate_dom = document.querySelector("#reverse_animate" );
let finish_animate_dom = document.querySelector("#finish_animate" );
let cancel_animate_dom = document.querySelector("#cancel_animate" );
let display_dom = document.querySelector("#display" );
let test1_dom = document.querySelector("#test1_dom" );
let getAnimations_dom = document.querySelector("#getAnimations" );
let getAnimationsVal_dom = document.querySelector("#getAnimationsVal");
// アニメーション用オブジェクト
let animation1;
// keyframes定義
const keyframes1 = [
{transform: 'translateX(0px)' },
{transform: 'translateX(200px)'},
];
// option定義
const options1 = {
duration: 5000
};
animation1 = test1_dom.animate(keyframes1, options1);
animation1.cancel(); // 初期値は停止
// アニメーション開始
start_animate_dom.addEventListener('click', (e) => {
animation1.play();
display_dom.innerHTML = animation1.playState;
}, false);
// アニメーション一時停止
pause_animate_dom.addEventListener('click', (e) => {
animation1.pause();
display_dom.innerHTML = animation1.playState;
}, false);
// アニメーション逆再生
reverse_animate_dom.addEventListener('click', (e) => {
animation1.reverse();
display_dom.innerHTML = animation1.playState;
}, false);
// アニメーション終了
finish_animate_dom.addEventListener('click', (e) => {
animation1.finish();
display_dom.innerHTML = animation1.playState;
}, false);
// アニメーション停止
cancel_animate_dom.addEventListener('click', (e) => {
animation1.cancel();
display_dom.innerHTML = animation1.playState;
}, false);
// 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);
// 再生秒数を定期的に更新する
setInterval(() => {
// アニメーションが再生中の場合に秒数を更新
if (animation1.playState === 'running') {
// currentTimeはミリ秒で返されるので、秒に変換して表示
let disp_sec = (animation1.currentTime / 1000).toFixed(2) + '秒';
document.getElementById('currentTime_value').innerHTML = disp_sec;
}
}, 10); // 0.01秒ごとにチェック
</script>
</body>
</html>
画面アクセスして「アニメーション開始」ボタンを押下し、
「getAnimations情報の取得と出力」ボタンを押下すると、アニメーション再生中は1つの(再生中の)オブジェクトの情報が取得できます。
ボタン押下時のイベントには、getAnimations情報の詳細を取得し、画面内のDOMに出力する処理を書いています。
// 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);
アニメーションの再生中に「getAnimations情報」を何度か押下すると、
再生中の都度の情報が取得できていることがわかります。
また、アニメーションの再生が終わると、getAnimationsの情報は取得できなくなり、
画面出力も空白になります。
