SVGアニメーション – Web Animations API を使う – Element.animate()メソッドを使う
まず、前者のanimate()メソッドを使う方法では、第一引数に動かす内容、キーフレームを指定します。
構文は以下になります。
let animation = Element.animate(keyframes, options);
それぞれの意味は
Element :アニメーション対象の要素
keyframes :キーフレームオブジェクト(どんな動きにするかを定義)
options :アニメーションの動作の詳細を定義
keyframesは、以下のように書きます。
const keyframes = [
{プロパティー1:"開始の値"},
{プロパティー1:"終了の値"}
・
・
・
(以下、必要な数だけ記載)
];
keyframesの具体的な例は、下記のように書きます。
const keyframes = [
{width:'100px'},
{width:'300px'}
];
この例では、指定DOM要素の widthを 100pxから300pxに変更しています。
また、widthと同時に、heightも変更する場合は下記のように書きます。
const keyframes = [
{width:'100px', height:'50px'},
{width:'300px', height:'200px'},
];
optionsはアニメーション動作のタイミングについて指定します。
optionsに指定できるプロパティは複数ありますが、direction(再生時間) は必須項目です。
const options = {
direction: 1000
};
ここまででElement.animate()メソッドを使った実際の動きを確かめることができます。
下記のサンプルを用意しました。
<!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'},
{width:'300px'}
];
// optionsの定義
const options = {
duration: 5000
}
// アニメーション処理の開始
dom_rect.animate(keyframes, options);
</script>
</body>
</html>
画面にアクセスすると、SVGのrect要素が出力され、.animate()メソッドにより、
keyframes と options の定義にもとづいたアニメーションが再生されます。
今回のサンプルでは、再生回数は特に指定しておらず、1回のみ再生されます。
また、keyframesの定義は、
const keyframes = [
{width:'100px'},
{width:'300px'}
];
上記のように書くと、「width:’100px’」は0%の状態を示し、「width:’300px’」は100%の状態を示します。
サンプルでは、「options」の duration を 5000(ミリ秒) と指定しているので、5秒かけて 0%の状態から100%の状態に変化します。
また、keyframesについては、状態を複数指定することができます。
サンプルの記述を、下記にして動作を見てみます。
const keyframes = [
{width:'100px'},
{width:'50px'},
{width:'450px'},
{width:'0px'},
{width:'300px'}
];
この場合は、状態が全部で5つあります。
1つめは0%、2つめは25%、3つめは50%、4つめは75%、5つめは100%の状態とし、
全体で5秒の時間をかけてアニメーションします。
全体のコードは以下になります。
<!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'},
{width:'50px'},
{width:'450px'},
{width:'0px'},
{width:'300px'}
];
// optionsの定義
const options = {
duration: 5000
}
// アニメーション処理の開始
dom_rect.animate(keyframes, options);
</script>
</body>
</html>
画面にアクセスすると、5秒かけて keyframes で指定した5つの状態に変化(この場合、width)することがわかります。
このkeyframesの書き方で記述したアニメーション表現は、前回までblogに書いていた setInterval の方法では実現しにくいと言えます。