SVGアニメーション – Web Animations API を使う – Element.animate()メソッドの options – easing の steps(count, start|end) について(その2) 引数をつけた場合

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

easingプロパティ – steps(count, start|end) について

steps は「ステップごとに等分に区切って変化」をします。

前回の投稿では、下記のkeyframesの設定を試しました。

// keyframesの定義
const keyframes = [
    {x:'0px'  , fill:'#999999', easing: 'steps(5)'}, // グレー
    {x:'100px', fill:'#3399FF', easing: 'steps(5)'}, // ブルー
    {x:'400px', fill:'#FF9900', easing: 'steps(5)'}, // オレンジ
];

上記の場合「steps(5)」という設定をしているので、アニメーションの実行タイミング(区切り)は5段階で動作しました。

今回は、前回のサンプルをもとに、

steps(1, start)

のサンプルを試してみます。

引数の一つ目は「1」としていますが、これは「開始状態から終了状態まで1段階で切り替える」設定となります。

また、以下の書き方は

steps(1, start)

下記の書き方と同じ意味で動作します。

step-start

steps(1, start)について

まずは「steps(1, start)」と書いた場合です。

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

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

    dom_recttest.animate(keyframes, options);
}

</script>

</body>
</html>

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

画面にアクセスして「アニメーション開始」ボタンを押下すると、
「グレー → ブルー」まで1段階で(開始状態から終了状態に動作する)変化し、
その後に「ブルー → オレンジ」まで1段階で(開始状態から終了状態に動作する)変化することがわかります。

step-start について

上記のサンプルを下記のように変更して試してみます。

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

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

    dom_recttest.animate(keyframes, options);
}

</script>

</body>
</html>

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

画面にアクセスし「アニメーション開始」ボタンを押下すると、
上記のサンプルと同様の変化をすることがわかります。

steps(1, end) について

上記のサンプルを下記のように変更して試してみます。

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

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

    dom_recttest.animate(keyframes, options);
}

</script>

</body>
</html>

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

画面にアクセスして「アニメーション開始」ボタンを押下すると、
「グレー → ブルー」まで1段階で変化します。

ただし、steps(1, start) との違いは、アニメーションの変化として「終了になったら終了状態に変化する」という点が異なります。

その為、開始ボタンを押下した直後は、変化が何もないように見えます。

また、2つめから3つめののkeyframesの要素に変化する時は「ブルー → オレンジ」の変化をしますが、
「終了になったら終了状態に変化する」という性質上、最後のオレンジは画面からは確認できません。

これはアニメーションの終わりがoptionsの「iterations」を指定しておらず、
繰り返しアニメーションしない設定になっている為、アニメーション全体が終了して初期状態に戻る為です。

step-end について

上記のサンプルを下記のように変更して試してみます。

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

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

    dom_recttest.animate(keyframes, options);
}

</script>

</body>
</html>

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

画面にアクセスし「アニメーション開始」ボタンを押下すると、
steps(1, end) の時と同じ変化をします。

propansystem プロパンシステム

SVGアニメーション – Web Animations API を使う – Element.animate()メソッドの options – easing の steps(count, start|end) について(その2) 引数をつけた場合