SVGアニメーション – Web Animations API を使う – Element.animate()メソッドの options – easing の cubic-bezier
Element.animate()メソッド の options の easing の cubic-bezier について試してみます。
cubic-bezierはメソッドとして指定し、cubic-bezier()の引数を指定して、
3次ベジェ曲線を定義し、その3次ベジェ曲線の変化量をアニメーションに反映させてアニメーション変化をします。
引数は4つあり、下記の値を指定します。
第1制御点の x座標 第1制御点の y座標 第2制御点の x座標 第2制御点の y座標
値はnumber型として指定します。
イージング関数の変化量は下記サイトで代表的なものが確認できます。
https://easings.net/ja
以下、前回のサンプルをもとに、変化量をcubic-bezierで指定したサンプルです。
<!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: 'cubic-bezier(0.23, 1, 0.32, 1)'}, // グレー
{x:'100px', fill:'#3399FF', easing: 'cubic-bezier(0.23, 1, 0.32, 1)'}, // ブルー
{x:'400px', fill:'#FF9900', easing: 'cubic-bezier(0.23, 1, 0.32, 1)'}, // オレンジ
];
// アニメーション処理のタイミングプロパティを定義
const options = {
duration: 5000
};
dom_recttest.animate(keyframes, options);
}
</script>
</body>
</html>