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

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

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

環境

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

画像の拡大・縮小

画像の拡大・縮小を行うには、
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」を使用してます。関数はアロー関数で記述してます。

<!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>

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