SVGアニメーション – Web Animations API を使う – Element.animate()メソッドの options – easing の ease-in について
前回の投稿に続き、Element.animate()メソッド の options の easing について試してみます。
easingプロパティ – ease-in について
ease-in は「最初はゆっくり、最後に加速して終わる」変化をします。
前回の投稿と同様に、keyframesにeasingプロパティを記載する形で試してみます。
以下、サンプル全体です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<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_recttest = document.querySelector("#recttest");
// keyframesの定義
const keyframes = [
{x:'0px' , fill:'#999999', easing: 'ease-in'}, // グレー
{x:'100px', fill:'#3399FF', easing: 'ease-in'}, // ブルー
{x:'400px', fill:'#FF9900', easing: 'ease-in'}, // オレンジ
];
// アニメーション処理のタイミングプロパティを定義
const options = {
duration: 5000,
direction: 'alternate',
iterations: Infinity
};
dom_recttest.animate(keyframes, options);
</script>
</body>
</html>
画面にアクセスすると「最初はゆっくり、最後に加速して終わる」という動きが確認できます。