SVGアニメーション – Web Animations API を使う – アニメーション実行中のplayStateの値について
アニメーション実行中にanimationしているオブジェクトのplayStateプロパティを参照することで、実行状態が見えます。
playStateは以下のものがあります。
開始 一時停止 逆再生 終了 停止
実際にサンプルを用意して確かめてみると、逆再生の時の値は「running」と表示され、通常の開始と同じ値になります。(ただしDIVのアニメーションの動きは逆です)
以下に簡単なサンプルを用意しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
#bottomStart {
margin-bottom : 10px;
}
#test1_dom {
color : #5f5d5d;
background-color : #eeeeee;
font-size : 1.1rem;
width : 150px;
}
</style>
</head>
<body>
<!-- 開始ボタン -->
<div id="bottomStart">
<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 -->
<div id="test1_dom">TEST1 (<span id="display"></span>)</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 animation1;
// keyframes定義
const keyframes1 = [
{transform: 'translateX(0px)' },
{transform: 'translateX(200px)'},
];
// option定義
const options1 = {
duration : 10000
};
animation1 = test1_dom.animate(keyframes1, options1);
animation1.cancel(); // 初期値は停止
// アニメーション開始
start_animate_dom.addEventListener('click', (e) => {
//animation1 = test1_dom.animate(keyframes1, options1);
animation1.play();
display_dom.innerHTML = animation1.playState;;
}, false);
// アニメーション一時停止
pause_animate_dom.addEventListener('click', (e) => {
//animation1 = test1_dom.animate(keyframes1, options1);
animation1.pause();
display_dom.innerHTML = animation1.playState;;
}, false);
// アニメーション逆再生
reverse_animate_dom.addEventListener('click', (e) => {
//animation1 = test1_dom.animate(keyframes1, options1);
animation1.reverse();
display_dom.innerHTML = animation1.playState;;
}, false);
// アニメーション終了
finish_animate_dom.addEventListener('click', (e) => {
//animation1 = test1_dom.animate(keyframes1, options1);
animation1.finish();
display_dom.innerHTML = animation1.playState;;
}, false);
// アニメーション停止
cancel_animate_dom.addEventListener('click', (e) => {
//animation1 = test1_dom.animate(keyframes1, options1);
animation1.cancel();
display_dom.innerHTML = animation1.playState;;
}, false);
</script>
</body>
</html>