SVGアニメーション – Web Animations API を使う – Element.animate()メソッドの options – easing について

前回の投稿に続き、Element.animate()メソッドの options の easing について試してみます。

options – easing について

options の easing はアニメーションの速度変化を指定します。

cssにも同じ easing という名称のcssアニメーション制御用のプロパティが存在するので注意が必要です。
本投稿では javascript の easing を取り扱います。

指定する名称は下記のものがあります。

linear                      一定の速度で変化（デフォルト）
ease                        急速に加速してゆっくり終わる
ease-in                     最初はゆっくり、最後に加速して終わる
ease-out                    最初は速く、最後はゆっくり終わる
ease-in-out                 ゆっくり入り、加速し、ゆっくり終わる
steps(count, start|end)     ステップごとに等分に区切って変化させる
cubic-bezier(x1,y1,x2,y2)   3次ベジェ曲線による変化

easingプロパティを書く場所

easingプロパティを書く場所は、options に記載します。
また、keyframes ごとに記載することもできます。

keyframesにeasingの定義を書いた例です。

// keyframesの定義
const keyframes = [
    {left:'0px'  , fill:'#999999', easing: 'ease'       }, // グレー
    {left:'300px', fill:'#3399FF', easing: 'ease-in-out'}, // ブルー
    {left:'450px', fill:'#FF9900', easing: 'ease-out'   }, // オレンジ
];

上記の例をoptionsに書いた例です。

// アニメーション処理のタイミングプロパティを定義
const options = {
    duration: 5000,
    iterations: Infinity,
    easing: ['ease', 'ease-in-out', 'ease-out']
};

easingプロパティ – linear について

linear は一定の速度で変化します。

easing が無指定の場合は、デフォルト値として linear が指定されます。

以下 easingプロパティ – linear のサンプルです。

アニメーションの定義はkeyframesに記載し、3つの状態(サンプルの場合、SVG要素の「x座標」と「色要素」)を変化させています。
また、easing には明示的に’linear’を指定して、一定の速度で変化するようにしています。

// keyframesの定義
const keyframes = [
    {x:'0px'  , fill:'#999999', easing: 'linear'}, // グレー
    {x:'300px', fill:'#3399FF', easing: 'linear'}, // ブルー
    {x:'450px', fill:'#FF9900', easing: 'linear'}, // オレンジ
];

以下、サンプル全体です。

<!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: 'linear'}, // グレー
    {x:'100px', fill:'#3399FF', easing: 'linear'}, // ブルー
    {x:'400px', fill:'#FF9900', easing: 'linear'}, // オレンジ
];

// アニメーション処理のタイミングプロパティを定義
const options = {
    duration: 5000,
    direction: 'alternate',
    iterations: Infinity
};

dom_recttest.animate(keyframes, options);

</script>

</body>
</html>

サーバ上のHTMLはこちら(test1.html)

画面にアクセスすると、rectのSVG要素が x座標の 0 → 100 → 400 へと変化し、
同時に色がグレー → ブルー → オレンジへと一定の速度で変化していることがわかります。

次回以降、easingプロパティの別な設定について確かめてみます。

propansystem プロパンシステム

SVGアニメーション – Web Animations API を使う – Element.animate()メソッドの options – easing について