javascript animateを逆に再生させる

作成日 2023.01.04
javascript
javascript

javascriptで、animateを使用して画像スクロールを作成するサンプルコードを記述してます。animateを生成したオブジェクトに対して「reverse()」を実行することで可能です。

1. 環境
2. 逆に再生
3. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 108.0.5359.125

Javascript サンプル集はこちら

逆に再生

逆に再生するには、
1.　生成した「animate」を変数に代入
2.　代入した変数に「reverse()」を使用
することで可能です。
※もう一度「reverse()」を実行すると、元に戻ります。

<style>
.box {
  width: 500px;
  height: 150px;
  background-size: 50%;
  background: url('https://mebee.info/wp-content/uploads/2019/08/mebee_logo.png') repeat-x;
}
</style>

<div class="box"></div>

<button id="btnRev">Rev</button>

<script>

let obj = document.getElementsByClassName('box')[0].animate(
  // 変化させるスタイル
  [
    { backgroundPosition: '0 0' },
    { backgroundPosition: '-100% 0' }
  ],
  // プロパティ
  {
    duration: 3000,
    iterations: Infinity
  }
);

document.getElementById('btnRev').addEventListener('click', function() {
  obj.reverse() = 0;
});

</script>

実行結果をみると「Rev」ボタンを押すと逆に再生されていることが確認できます。

ちなみに、「animate」のプロパティに設定できる値は、以下となります。

プロパティ名	内容	値
duration	再生時間（ミリ秒）	ミリ秒を指定
delay	再生までの待機時間（ミリ秒）	ミリ秒を指定(デフォルトは0)
direction	再生方向	“normal” 0%から100%へ(デフォルト) “reverse” 100%から0%へ “alternate” 0%から100%→100%から0%で再生 “alternate-reverse” alternateの逆方向
easing	アニメーション変化方法	“linear” 一定の速度で変化(デフォルト) “ease” 開始時と終了時は緩やかに変化 “ease-in” 最初はゆっくり、だんだん速く “ease-in-out” 最初は速く、だんだんゆっくり “ease-out” 開始時と終了時はかなり緩やか “step-start”最初に100%の状態に変化 “steps( 引数1 , 引数2 )” 数値により段階的 “step-end” 0%の状態から、最後に100% “cubic-bezier( 引数1 , 引数2 , 引数3 , 引数4)” ベジエ曲線の座標で変化
endDelay	再生終了後の待機時間	ミリ秒(規定値は0)
fill	アニメーション前後の状態	“none” cssのみ(デフォルト) “forwards” 終了状態を維持 “backwards” 開始時の状態を適用 “both” forwardsとbackwardsの両方
iterationStart	再生開始タイミング「0.5」だと 50% の位置から始まり1周	0以上の小数(デフォルトは0)
iterations	再生回数	0以上の小数(デフォルトは1) 無限ループは「Infinity」
id	識別ID	文字列で指定
composite	アニメーションの状態と処理	“replace” 現在の状態で置き換え(デフォルト) “add” 状態にアニメーションの状態を追加 “accumulate” 状態にアニメーションの状態を累積
iterationComposite	繰り返し時の状態	“replace” 現在の状態で置き換え “accumulate” これまでの状態を累積

サンプルコード

以下は、
「実行」ボタンをクリックすると、画像がスクロールを開始して「戻す」ボタンをクリックすると逆再生される
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>mebeeサンプル</title>
    <!-- MDB -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>
<style>
    .box {
        width: 500px;
        height: 150px;
        background-size: 50%;
        background: url('https://mebee.info/wp-content/uploads/2019/08/mebee_logo.png') repeat-x;
    }
</style>

<body>
    <div class="container text-center w-25" style="margin-top:150px">

        <div class="box"></div>

        <button id="btn" type="button" class="btn btn-raised btn-info">
            実行
        </button>
        <button id="btnRev" type="button" class="btn btn-raised btn-warning">
            戻す
        </button>

    </div>

    <script>

        let obj;

        // クリックイベントを登録
        btn.onclick = () => {

            obj = document.getElementsByClassName('box')[0].animate(
                // 変化させるスタイル
                [
                    { backgroundPosition: '0 0' },
                    { backgroundPosition: '-100% 0' }
                ],
                {
                    duration: 3000,
                    iterations: Infinity
                }
            );

        };

        btnRev.onclick = () => {
            obj.reverse();
        };

    </script>
</body>

</html>

逆再生されていることが確認できます。