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

前回の投稿では、Element.animate()メソッドのサンプルを書いて動きを試してみました。

その際に、javascriptの記述は下記のように書きました。

[js]
<script>

// アニメーション対象のDOM要素を取得
let dom_rect = document.querySelector("#recttest");

// keyframesの定義
const keyframes = [
{width:’100px’},
{width:’50px’},
{width:’450px’},
{width:’0px’},
{width:’300px’}
];

// optionsの定義
const options = {
duration: 5000
}

// アニメーション処理の開始
dom_rect.animate(keyframes, options);

</script>
[/js]

前回の投稿では options の値は「duration: 5000」とだけ指定しました。(durationは必須)

ここでは、さらに options について詳しく試してみます。

options に記述できる項目

options に記述できる項目は、以下のものがあります。

[js]
delay
direction
duration
easing
fill
iterations
[/js]

以下、ひとつひとつ試してみます。

options – delay について

options の delay について試します。

delayは、アニメーションの開始時間を「どれくらい遅らせるか」をミリ秒で指定します。

初期値は 0 なので、指定しない場合はすぐにアニメーションが開始されます。

前回のサンプルをもとに、options に delay を記載した形で試してみます。

また、5段階のアニメーションの変化がわかりやすいように、DOM要素の「高さ」と「背景色」も動的に変更しています。
[js]
{width:’100px’, height:’70px’, fill:’#999999′}, // グレー
{width:’50px’ , height:’5px’ , fill:’#3399FF’}, // ブルー
{width:’450px’, height:’80px’, fill:’#FF9900′}, // オレンジ
{width:’0px’ , height:’0px’ , fill:’#00CC00′}, // グリーン
{width:’100px’, height:’70px’, fill:’#FF3300′} // レッド
[/js]

全体のコードは以下になります。
[js]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>

</head>
<body>

// アニメーション対象のDOM要素を取得
let dom_rect = document.querySelector("#recttest");

// keyframesの定義
const keyframes = [
{width:’100px’, height:’70px’, fill:’#999999′}, // グレー
{width:’50px’ , height:’5px’ , fill:’#3399FF’}, // ブルー
{width:’450px’, height:’80px’, fill:’#FF9900′}, // オレンジ
{width:’0px’ , height:’0px’ , fill:’#00CC00′}, // グリーン
{width:’100px’, height:’70px’, fill:’#FF3300′} // レッド
];

// optionsの定義
const options = {
duration: 10000,
delay: 3000
}

// アニメーション処理の開始
dom_rect.animate(keyframes, options);

</script>

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

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

画面にアクセスすると、delay で 3000 と指定しているので、3秒後にアニメーションが開始されることがわかります。

DOM要素の背景色も

グレー → ブルー → オレンジ → グリーン → レッド

の順に変化することがわかります。(同時に、幅widthや、高さheightも変化します)

options – direction について

options の direction について試します。

direction は、アニメーションを「実行する方向」を指定します。

指定値は以下のものがあります。

[js]
normal
alternate
reverse
alternate-reverse
[/js]

上記の指定値の違いをみるため、サンプルを書いて動きを試してみます。
全体のコードは以下になります。

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

</head>
<body>

<div>
<input type="radio" name="direction" value="normal" checked>normal
<input type="radio" name="direction" value="alternate">alternate
<input type="radio" name="direction" value="reverse">reverse
<input type="radio" name="direction" value="alternate-reverse">alternate-reverse
</div>

// アニメーション対象のDOM要素を取得
let dom_rect = document.querySelector("#recttest");

// ラジオボタンの変更イベントリスナーを設定
const radioButtons = document.querySelectorAll(‘input[name="direction"]’);
radioButtons.forEach(radioButton => {
radioButton.addEventListener(‘change’, () => {
const options = {
duration: 10000,
direction: radioButton.value,
iterations: Infinity
};
dom_rect.animate(keyframes, options);
});
});

// 初期のアニメーション処理を実行
const initialDirection = document.querySelector(‘input[name="direction"]:checked’).value;
const options = {
duration: 10000,
direction: initialDirection
};
dom_rect.animate(keyframes, options);

</script>

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

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

画面にアクセスすると、normal、alternate、reverse、alternate-reverse のラジオボタンが表示され、
初期表示時には normal の指定でアニメーションの動作を行います。

また、今回は便宜上「iterations: Infinity」指定をして、アニメーションの動作を無限ループする指定にしています。

normal は、keyframes で指定した順の下記の色で変化します。

[js]
グレー
↓
ブルー
↓
オレンジ
↓
グリーン
↓
レッド
[/js]

alternate では、一度、keyframesの指定順で最後のレッドまで変化した後、折り返す形で最初の色(グレー)まで戻ります。
一番最初のグレーまで戻ったあと、また同じアニメーション変化を繰り返します。

[js]
グレー
↓
ブルー
↓
オレンジ
↓
グリーン
↓
レッド
↓
グリーン
↓
オレンジ
↓
ブルー
↓
グレー

(以下、最初に戻り、繰り返す)
[/js]

reverseは、keyframesの記述を逆順のレッドから進み、最後にグレーに戻ります。
グレーになったあとは、またレッドから逆順にループします。

[js]
レッド
↓
グリーン
↓
オレンジ
↓
ブルー
↓
グレー
[/js]

alternate-reverse は、alternateの逆順に変化します。逆順にグレーまで変化した後、折り返す形で最初の色まで戻ります。
一番最初のレッドまで戻ったあと、また同じアニメーション変化を繰り返します。

[js]
レッド
↓
グリーン
↓
オレンジ
↓
ブルー
↓
グレー
↓
ブルー
↓
オレンジ
↓
グリーン
↓
レッド

(以下、最初に戻り、繰り返す)
[/js]

ここまでで、delay と direction の動きを試してみました。

次回以降、以下のoptions指定の項目を試して理解を深めようと思います。

[js]
duration
easing
fill
iterations
[/js]

propansystem[プロパンシステム]

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