SVGアニメーション – Web Animations API を使う – Element.animate()メソッドの options – endDelay

Element.animate()メソッドの options の endDelay について試してみます。

endDelayはアニメーション終了後の処理完了までの遅延時間として指定します。

アニメーションは再生開始 → 再生中 → 再生終了の一連の動きとみることができますが、
画面では見えないですが、再生終了の後に処理完了のタイミングがあります。

この処理完了は animate で生成したインスタンスに対し finished メソッドを記述することで
処理完了時のイベントを書くことができます。

また、endDelay の時間指定はミリ秒で指定し、再生終了から処理完了までの時間を制御することができます。

遅延時間を把握しやすいように、下記にサンプルコードを用意しました。

[js]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>

</head>
<body>

<div class="status_view">
<div>ステータス1：<span id="status_message1"></span></div>
<div>ステータス2：<span id="status_message2"></span></div>
</div>

<div>
<div class="params_box">
<span>duration (処理全体の秒数) : </span><span class="params" id="range1_value"></span>
<div><input type="range" class="range" id="range1" value="0" max="10000"></div>

<span>endDelay (終了後の待機秒数) : </span><span class="params" id="range2_value"></span>
<div><input type="range" class="range" id="range2" value="0" max="10000"></div>
</div>
</div>

<div class="code_view">
// アニメーション処理を実行 (animation1、animation2 共通で設定される)<br />
const options = {<br />
     duration: "<span id="code_view1" class="code_view_str">4000</span>"<br />
     endDelay: "<span id="code_view2" class="code_view_str">4000</span>"<br />
};<br /><br />
dom_rect.animate(keyframes, options);<br />
</div>

// ステータス表記
let status_message1 = document.querySelector(‘#status_message1’);
let status_message2 = document.querySelector(‘#status_message2′);

let animation1;
let animation2;

// アニメーション1 keyframesの定義
const keyframes1 = [
{width:’100px’, height:’50px’, fill:’#B0E0E6′}, // LightBlue
{width:’50px’ , height:’50px’, fill:’#6495ED’}, // CornflowerBlue
{width:’450px’, height:’50px’, fill:’#00008B’} // DarkBlue
];
// アニメーション1 オプション定義
const options1 = {
duration: 5000,
endDelay: 4000
};

// アニメーション2 keyframesの定義
const keyframes2 = [
{width:’100px’, height:’50px’, fill:’#F08080′}, // LightCoral
{width:’550px’, height:’50px’, fill:’#FFA07A’}, // LightSalmon
{width:’300px’, height:’50px’, fill:’#FF0000′} // Red
];
// アニメーション2 オプション定義
const options2 = {
duration: 5000,
endDelay: 4000
};

// スライダの要素を取得し、イベントを付与する
let dom_range1 = document.querySelector(‘#range1’);
let dom_range2 = document.querySelector(‘#range2’);

// 各スライダーごとのイベントに、共通の関数を割り当てて処理する
dom_range1.addEventListener(‘input’, change_range_slider);
dom_range2.addEventListener(‘input’, change_range_slider);

// スライダーを動かした時の処理
function change_range_slider()
{

if (animation1) {
animation1.pause(); // アニメーション1を一時停止
}
if (animation2) {
animation2.pause(); // アニメーション2を一時停止
}

status_message1.innerHTML = ”;
status_message2.innerHTML = ”;

// アニメーションのオプションを取得
const currentOptions = {
duration: parseInt(dom_range1.value),
endDelay: parseInt(dom_range2.value)
};

// オプションを再設定する
animation1 = dom_rect.animate(keyframes1, currentOptions);

// アニメーションの再生と停止
animation1.play();
status_message1.innerHTML = ‘アニメーション1 再生’;

animation1.finished.then(() => {
console.log("アニメーション1 再生終了");
status_message1.innerHTML = ‘アニメーション1 再生終了’;

// アニメーション2 生成
animation2 = dom_rect.animate(keyframes2, options2);

// アニメーション2 再生
animation2.play();
status_message2.innerHTML = ‘アニメーション2 再生’;

// アニメーション2 再生終了時
animation2.finished.then(() => {

// アニメーション2 再生終了ログ
console.log("アニメーション2 再生終了");
status_message2.innerHTML = ‘アニメーション2 再生終了’;
});

});

// パラメータ値をHTML出力
let range1_value_dom = document.querySelector(‘#range1_value’);
let range2_value_dom = document.querySelector(‘#range2_value’);
range1_value_dom.innerHTML = (dom_range1.value / 1000) + "秒";
range2_value_dom.innerHTML = (dom_range2.value / 1000) + "秒";

let code_view1_dom = document.querySelector(‘#code_view1’);
let code_view2_dom = document.querySelector(‘#code_view2’);
code_view1_dom.innerHTML = dom_range1.value;
code_view2_dom.innerHTML = dom_range2.value;

}

//————————————–
// 初期処理
//————————————–

// アニメーション1 生成
animation1 = dom_rect.animate(keyframes1, options1);

// アニメーション1 再生
animation1.play();
status_message1.innerHTML = ‘アニメーション1 再生’;

// アニメーション1 再生終了時
animation1.finished.then(() => {

// アニメーション1 再生終了ログ
console.log("アニメーション1 再生終了");
status_message1.innerHTML = ‘アニメーション1 再生終了’;

// アニメーション2 生成
animation2 = dom_rect.animate(keyframes2, options2);

// アニメーション2 再生
animation2.play();
status_message2.innerHTML = ‘アニメーション2 再生’;

// アニメーション2 再生終了時
animation2.finished.then(() => {

// アニメーション2 再生終了ログ
console.log("アニメーション2 再生終了");
status_message2.innerHTML = ‘アニメーション2 再生終了’;
});

});

</script>

</body>
</html>
[/js]

サーバ上のHTMLはこちら(test1.html)

画面にはアニメーションの定義が2つ用意しており、わかりやすいようにrect(矩形)の色が変化と幅が変化します。

アニメーション1 (寒色系の色で変化)
LightBlue
↓
CornflowerBlue
↓
DarkBlue

アニメーション2 (暖色系の色で変化)
LightCoral
↓
LightSalmon
↓
Red

また、endDelay の値をスライダーで動的に指定することができます。

動きとしては、
アニメーション1 の「再生 → 再生中 → 再生終了」後に、アニメーション2の「再生 → 再生中 → 再生終了」
という動作をしますが、

スライダーで値を調整すると、アニメーション1 の終了後に、処理終了までの遅延時間が調整され、アニメーション2 の再生開始のタイミングに影響していることがわかります。

実行例

スライダーの値をデフォルト、endDelayが短い場合、長めの場合、でそれぞれ実行例を示します。

実行例1.スライダーはデフォルト(4.0秒)の状態で実行

実行例2.処理全体の秒数を1.224秒、endDelayの待機秒数を2.656秒に設定した場合

実行例3.処理全体の秒数を1.224秒、endDelayの待機秒数を5.443秒に設定した場合

それぞれのパターンの例をみると、endDelayの指定秒数により、アニメーション1が終わり、アニメーション2が始まるまでに遅延時間が変化することがわかります。

propansystem[プロパンシステム]

SVGアニメーション – Web Animations API を使う – Element.animate()メソッドの options – endDelay