SVGアニメーション – Web Animations API を使う – Element.animate()メソッドの options – iterationStart
Element.animate()メソッド の options の iterationStart について試してみます。
iterationStart は、アニメーションの開始秒数を指定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.params_box {
font-size : 0.8em;
}
.range {
width: 400px;
}
.code_view {
font-size : 0.8em;
padding : 5px;
margin : 20px 0;
color : #ffffff;
background-color: #000000;
}
.code_view_str {
color: #ff0000;
}
.status_view {
margin-bottom: 20px;
}
#start_animation {
margin: 0px 0px 30px 0px;
}
#status_message1 {
color : #ff0000;
font-weight: bold;
}
</style>
</head>
<body>
<div class="status_view">
<div>ステータス1：<span id="status_message1"></span></div>
</div>
<div>
<input type="button" id="start_animation" value="アニメーション開始">
</div>
<div>
<div class="params_box">
<span>iterationStart : </span><span class="params" id="range1_value"></span>
<div><input type="range" class="range" id="range1" value="0" max="1" step="0.1"></div>
</div>
</div>
<div class="code_view">
const options = {<br />
duration : <span class="code_view_str">5000</span><br />
iterationStart : <span class="code_view_str" id="code_view1"></span><br />
iterations : <span class="code_view_str">Infinity</span><br />
};
</div>
<svg xmlns="http://www.w3.org/2000/svg"
width = "500"
height = "100"
viewBox = "0 0 500 100"
>
<rect
id = "recttest"
x = "0"
y = "0"
width = "100"
height = "50"
/>
</svg>
<script>
// アニメーション対象のDOM要素を取得
let dom_rect = document.querySelector("#recttest");
// ステータス表記
let status_message1 = document.querySelector('#status_message1');
let animation1;
// アニメーション1 keyframesの定義
const keyframes1 = [
{width:'100px', height:'50px', fill:'#FF6600'}, // オレンジ
{width:'50px' , height:'50px', fill:'#FFFF00'}, // イエロー
{width:'450px', height:'50px', fill:'#FF0000'} // レッド
];
// スライダの要素を取得し、イベントを付与する
let dom_range1 = document.querySelector('#range1');
// 各スライダーごとのイベントに、共通の関数を割り当てて処理する
dom_range1.addEventListener('input', change_range_slider);
// スライダーを動かした時の処理
function change_range_slider()
{
if (animation1) {
animation1.pause(); // アニメーション1を一時停止
}
status_message1.innerHTML = '';
// アニメーションのオプションを取得
const currentOptions = {
duration : 5000,
iterationStart : dom_range1.value,
iterations : Infinity
};
// オプションを再設定する
animation1 = dom_rect.animate(keyframes1, currentOptions);
// アニメーション1の再生と停止
animation1.play();
status_message1.innerHTML = 'アニメーション1 再生';
// パラメータ値をHTML出力
let range1_value_dom = document.querySelector('#range1_value');
range1_value_dom.innerHTML = dom_range1.value;
let code_view1_dom = document.querySelector('#code_view1');
code_view1_dom.innerHTML = dom_range1.value;
}
// ボタン要素のDOMを取得
let dom_start_animation = document.getElementById('start_animation');
// イベントを付与
dom_start_animation.addEventListener('click', StartAnimation, false);
// ボタン押下時の処理
function StartAnimation()
{
console.log("ボタン押下時の処理 ");
status_message1.innerHTML = '';
// パラメータ値をHTML出力
let range1_value_dom = document.querySelector('#range1_value');
range1_value_dom.innerHTML = dom_range1.value;
// アニメーションのオプションを取得
const currentOptions = {
duration : 5000,
iterationStart : dom_range1.value,
iterations : Infinity
};
// アニメーション1 生成
animation1 = dom_rect.animate(keyframes1, currentOptions);
// アニメーション1 再生
animation1.play();
status_message1.innerHTML = 'アニメーション1 再生';
let code_view1_dom = document.querySelector('#code_view1');
code_view1_dom.innerHTML = dom_range1.value;
}
</script>
</body>
</html>
スライダーの iterationStart の値を指定し、アニメーション開始ボタンを押下すると、スライダの値(0.0～1.0)に応じた値で、アニメーションの開始タイミングが決定されます。