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

javascript

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

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

easingプロパティ – ease-in-out について

ease-in-out は「ゆっくり入り、加速し、ゆっくり終わる」変化をします。

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

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

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

dom_recttest.animate(keyframes, options);

</script>

</body>
</html>

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

画面にアクセスすると「ゆっくり入り、加速し、ゆっくり終わる」という動きが確認できます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です