SVGアニメーション – Web Animations API を使う – Element.animate()メソッドの options について
前回の投稿では、Element.animate()メソッド のサンプルを書いて動きを試してみました。
その際に、javascriptの記述は下記のように書きました。
<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>
前回の投稿では options の値は「duration: 5000」とだけ指定しました。(durationは必須)
ここでは、さらに options について詳しく試してみます。
options に記述できる項目
options に記述できる項目は、以下のものがあります。
delay direction duration easing fill iterations
以下、ひとつひとつ試してみます。
options – delay について
options の delay について試します。
delayは、アニメーションの開始時間を「どれくらい遅らせるか」をミリ秒で指定します。
初期値は 0 なので、指定しない場合はすぐにアニメーションが開始されます。
前回のサンプルをもとに、options に delay を記載した形で試してみます。
また、5段階のアニメーションの変化がわかりやすいように、DOM要素の「高さ」と「背景色」も動的に変更しています。
{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'} // レッド
全体のコードは以下になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
width = "500"
height = "300"
viewBox = "0 0 500 300"
>
<rect
id = "recttest"
x = "0"
y = "0"
width = "100"
height = "70"
fill = "#999"
/>
</svg>
<script>
// アニメーション対象の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>
画面にアクセスすると、delay で 3000 と指定しているので、3秒後にアニメーションが開始されることがわかります。
DOM要素の背景色も
グレー → ブルー → オレンジ → グリーン → レッド
の順に変化することがわかります。(同時に、幅widthや、高さheightも変化します)
options – direction について
options の direction について試します。
direction は、アニメーションを「実行する方向」を指定します。
指定値は以下のものがあります。
normal alternate reverse alternate-reverse
上記の指定値の違いをみるため、サンプルを書いて動きを試してみます。
全体のコードは以下になります。
<!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>
<svg xmlns="http://www.w3.org/2000/svg"
width = "500"
height = "300"
viewBox = "0 0 500 300"
>
<rect
id = "recttest"
x = "0"
y = "0"
width = "100"
height = "70"
fill = "#999"
/>
</svg>
<script>
// アニメーション対象の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'} // レッド
];
// ラジオボタンの変更イベントリスナーを設定
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>
画面にアクセスすると、normal、alternate、reverse、alternate-reverse のラジオボタンが表示され、
初期表示時には normal の指定でアニメーションの動作を行います。
また、今回は便宜上「iterations: Infinity」指定をして、アニメーションの動作を無限ループする指定にしています。
normal は、keyframes で指定した順の下記の色で変化します。
グレー ↓ ブルー ↓ オレンジ ↓ グリーン ↓ レッド
alternate では、一度、keyframesの指定順で最後のレッドまで変化した後、折り返す形で最初の色(グレー)まで戻ります。
一番最初のグレーまで戻ったあと、また同じアニメーション変化を繰り返します。
グレー ↓ ブルー ↓ オレンジ ↓ グリーン ↓ レッド ↓ グリーン ↓ オレンジ ↓ ブルー ↓ グレー (以下、最初に戻り、繰り返す)
reverseは、keyframesの記述を逆順のレッドから進み、最後にグレーに戻ります。
グレーになったあとは、またレッドから逆順にループします。
レッド ↓ グリーン ↓ オレンジ ↓ ブルー ↓ グレー
alternate-reverse は、alternateの逆順に変化します。逆順にグレーまで変化した後、折り返す形で最初の色まで戻ります。
一番最初のレッドまで戻ったあと、また同じアニメーション変化を繰り返します。
レッド ↓ グリーン ↓ オレンジ ↓ ブルー ↓ グレー ↓ ブルー ↓ オレンジ ↓ グリーン ↓ レッド (以下、最初に戻り、繰り返す)
ここまでで、delay と direction の動きを試してみました。
次回以降、以下のoptions指定の項目を試して理解を深めようと思います。
duration easing fill iterations