SVGアニメーション – Web Animations API を使う – Element.animate()メソッドの options – easing の steps(count, start|end) について
前回の投稿に続き、Element.animate()メソッド の options の easing について試してみます。
easingプロパティ – steps(count, start|end) について
steps は「ステップごとに等分に区切って変化」をします。
例として
steps(数値)
という引数が一つのみ記載する場合と、
steps(数値, start)
または
steps(数値, end)
という二つ目の引数を書く場合があります。
まずは、前回の投稿サンプルを「steps(数値)」の形で書いて試してみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
#start_animation {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<input type="button" id="start_animation" value="アニメーション開始">
</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 = "70"
fill = "#999"
/>
</svg>
<script>
// ボタン要素のDOMを取得
let dom_start_animation = document.getElementById('start_animation');
// イベントを付与
dom_start_animation.addEventListener('click', StartAnimation, false);
// ボタン押下時の処理
function StartAnimation()
{
// アニメーション対象のDOM要素を取得
let dom_recttest = document.querySelector("#recttest");
// keyframesの定義
const keyframes = [
{x:'0px' , fill:'#999999', easing: 'steps(5)'}, // グレー
{x:'100px', fill:'#3399FF', easing: 'steps(5)'}, // ブルー
{x:'400px', fill:'#FF9900', easing: 'steps(5)'}, // オレンジ
];
// アニメーション処理のタイミングプロパティを定義
const options = {
duration: 5000
};
dom_recttest.animate(keyframes, options);
}
</script>
</body>
</html>
上記のサンプルでは、各keyframesに
steps(5)
という5という値を設定しています。
5に設定すると、アニメーションが5段階に別れた状態で変化します。
画面にアクセスすると、各keyframesで指定した開始の状態(グレー)、途中の状態(ブルー)、終了の状態(オレンジ)の各状態に対して、5段階のx軸移動と、色変化をすることがわかります。