javascript animateを使用して画像の拡大・縮小を行う

作成日 2023.02.24
javascript
javascript

javascriptで、animateを使用して画像の拡大・縮小を行うサンプルコードを記述してます。「animate」を使用して「style」に「width・height」で拡大・縮小したいサイズを指定することで可能です。

1. 環境
2. 画像の拡大・縮小
3. サンプルコード

環境

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

Javascript サンプル集はこちら

画像の拡大・縮小

画像の拡大・縮小を行うには、
1.　「animate」で変化させる「style」に「width・height」を指定
することで可能です。

<style>
.box {
  width: 160px;
  height: 50px;
}
</style>

<img class="box" src="https://mebee.info/wp-content/uploads/2019/08/mebee_logo.png" />

<script>

document.getElementsByClassName('box')[0].animate(
  [
    { width: '160px', height: '50px' },
    { width: '320px', height: '100px' },
  ],
  {
		duration: 1000,
		iterations: Infinity,
		direction: 'alternate'
  }
);

</script>

実行結果

「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” これまでの状態を累積

サンプルコード

以下は、
「実行」ボタンをクリックすると、画像をanimateを使って拡大・縮小する
サンプルコードとなります。

※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: 160px;
    height: 50px;    
  }
</style>

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

    <img class="box" src="https://mebee.info/wp-content/uploads/2019/08/mebee_logo.png" />

    <button id="btn" type="button" class="btn btn-raised btn-info">
      実行
    </button>

  </div>

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

      document.getElementsByClassName('box')[0].animate(
        // 変化させるスタイル
        [
          { width: '80px', height: '25px' },
          { width: '320px', height: '100px' }
        ],
        {
          duration: 3000,
          iterations: Infinity
        }
      );

    };
  </script>
</body>

</html>

拡大・縮小されていることが確認できます。