SVGアニメーション – Web Animations API を使う – アニメーション実行中の再生倍率について
前回の投稿(https://propansystem.net/blog/9978)で、逆再生を行う方法としてplaybackRateプロパティを使用する方法をとりあげました。
ここでは、playbackRateについて再生倍率を制御する目的で試してみます。
簡単なサンプルを書いて試してみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
#bottomStart {
margin-bottom : 10px;
}
#test1_dom {
color : #5f5d5d;
background-color : #cccccc;
font-size : 1.1rem;
width : 150px;
}
.range {
width: 100%; /* スライダーの幅を画面最大に */
}
</style>
</head>
<body>
<!-- 開始ボタン -->
<div id="bottomStart">
<input type="button" id="start_animate" value="アニメーション開始">
<input type="button" id="cancel_animate" value="アニメーション停止">
</div>
<!-- スライダ -->
<div class="params_box">
<span class="param_title">再生倍率調整</span>
<div><input type="range" class="range" id="range1" value="0" max="1000"></div>
<span class="params" id="range1_value"></span>
</div>
<!-- アニメーション用DIV -->
<div id="test1_dom">TEST1 (<span id="display"></span>)</div>
<script>
// DOM要素取得
let start_animate_dom = document.querySelector("#start_animate" );
let cancel_animate_dom = document.querySelector("#cancel_animate");
let display_dom = document.querySelector("#display" );
let test1_dom = document.querySelector("#test1_dom" );
let range1_dom = document.querySelector("#range1" );
// アニメーション用オブジェクト
let animation1;
// keyframes定義
const keyframes1 = [
{transform: 'translateX(0px)' },
{transform: 'translateX(500px)'},
];
// option定義
const options1 = {
duration : 100000, // 100秒で一周
iterations : Infinity
};
animation1 = test1_dom.animate(keyframes1, options1);
animation1.cancel(); // 初期値は停止
// アニメーション開始
start_animate_dom.addEventListener('click', (e) => {
animation1.play();
display_dom.innerHTML = animation1.playState;
}, false);
// アニメーション停止
cancel_animate_dom.addEventListener('click', (e) => {
animation1.cancel();
display_dom.innerHTML = animation1.playState;
}, false);
// スライダの要素を取得し、再生速度調整用のイベントを付与する
range1_dom.addEventListener('input', change_range_slider);
function change_range_slider()
{
// パターン内のDOM情報を取得する
let set_param_value = range1_dom.value;
// アニメーションの再生速度(playbackRate)を変更する
animation1.playbackRate = set_param_value;
// 設定値を画面出力
document.getElementById('range1_value').innerHTML = range1_dom.value + '倍';
}
</script>
</body>
</html>
画面にアクセスして「アニメーション開始」ボタンを押下したあと、「再生倍率調整」のスライダを動かすと再生時の倍率を1～1000で変更することができます。
アニメーションは「DIVタグをx軸法j広告に100秒かけて500px移動する」というシンプルなもので、optionsで「iterations : Infinity」を指定して無限に繰り返すようになっています。
アニメーション開始ボタンを押下して、スライダを動かすと再生倍率が変わりDIVタグの移動スピードが変化することがわかります。
これはあくまでも再生倍率なので、divタグの移動スピードを早めている訳ではないことに注意が必要です。