【JavaScript入門】.animate()によるアニメーション

　ここでは、.animate() メソッドを利用したアニメーション実装について解説します。従来の setInterval() や requestAnimationFrame() と異なり、.animate() は宣言的にキー フレームを指定して、要素のスタイルの変化を連続的に表現する新しい手法です。Animationオブジェクトを返すため、再生、停止、逆再生などの操作も容易に行えます。以下では、.animate() の基本構文や各種プロパティの指定方法、さらには具体的なサンプルコードを用いて解説を進めます。

１．.animate() メソッドの基本

1.1. .animate() メソッドの概要と構文

　.animate() メソッドは、要素に対してスタイルの変化を指定し、一定時間かけてアニメーションさせることができるメソッドです。主な使い方は、第1引数に変化させるスタイル設定、またはキー フレームの配列、第2引数に変化時間や遅延、イージングなどのオプションを指定します。以下の表は、.animate() メソッドに関する基本情報をまとめたものです。

メソッド説明
.animate(a, b)変化させるスタイル設定 a と、タイミングなどの詳細設定 b を指定し、要素にアニメーションを適用する。Animationオブジェクトを返す。

　また、.animate() には以下の 2 つの構文があります。どちらの場合も、配列の順番に基づいてスタイルが変化します。

【構文１】

element.animate([
  { スタイル名: 値, スタイル名: 値 },
  { スタイル名: 値, スタイル名: 値 },
  { スタイル名: 値, スタイル名: 値 }
], オプション);

【構文２】

element.animate({
  スタイル名: [➀値, ➁値, ➂値],
  スタイル名: [➀値, ➁値, ➂値]
}, オプション);

1.2. アニメーション設定の主要プロパティ

　アニメーションの動作に影響する設定項目には、以下のものがあります。各プロパティの意味は次の通りです。

プロパティ説明
delayアニメーション開始前の待機時間（ミリ秒）。
durationアニメーションを実行する時間（ミリ秒）。
easingアニメーションの進行カーブ（動きの滑らかさ）の指定。
endDelayアニメーション終了後に待機する時間（ミリ秒）。

また、イージングの設定については、以下の表に示す通りです。

easing の値説明
ease開始と完了が滑らか。
linear一定の速度で変化。
ease-inゆっくり開始。
ease-outゆっくり終了。
ease-in-out両端がゆっくりで、中間は速い。

　Animationオブジェクトは、以下のプロパティやメソッドを持っており、アニメーションの状態管理や制御に利用できます。

プロパティ説明
.currentTimeアニメーションの現在時刻（ミリ秒）。
.finishedアニメーション終了時に解決される Promise。
.onfinish終了イベントに対するハンドラーを設定可能。
メソッド説明
.play()アニメーションの再生または再開を行う。
.pause()再生を一時停止する。
.reverse()アニメーションを逆再生する。
.finish()変化を強制的に終了させる。
.cancel()アニメーションをキャンセルし、再生を停止する。

２．サンプルプログラムの実装と動作解説

2.1. HTML と CSS の設定

　以下は、サンプルプログラム「animateDemo.html」の全文です。タイトル部分には絵文字を含み、画面上に中央に配置された box 要素をアニメーションさせます。初期状態では四角形の box が表示され、JavaScript によって順次アニメーション処理が実行されます。

ファイル名： animateDemo.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🎬 .animate()によるアニメーション入門</title>
  <style>
    /* ページ全体の基本設定 */
    body {
      font-family: Arial, sans-serif;
      background: #f2f2f2;
      margin: 20px;
      text-align: center;
    }
    /* アニメーション対象のボックス */
    #box {
      width: 150px;
      height: 150px;
      background-color: #3498db;
      margin: 50px auto;
      border-radius: 0px;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  
  <script>
    // STEP 1: 非同期関数内でアニメーション処理を実施
    async function runAnimation() {
      const box = document.querySelector('#box');
      
      // アニメーション①: 四角形から丸に変化しながら回転し、元の四角形に戻る
      await box.animate({
        borderRadius: ['0px', '50px', '0px'],
        transform: ['scale(1)', 'rotate(720deg) scale(1.2)', 'scale(1)']
      }, 1500).finished;
      
      // アニメーション②: 上方向への移動と背景色の変化
      await box.animate([
        { top: '0px', backgroundColor: '#3498db' },
        { top: '-100px', backgroundColor: '#e74c3c' },
        { top: '0px', backgroundColor: '#3498db' }
      ], {
        delay: 250,          // 250ミリ秒の遅延
        duration: 750,       // 750ミリ秒で変化
        easing: 'ease-in-out', // 緩やかな始動と終了
        endDelay: 250        // 終了後に250ミリ秒の待機
      }).finished;
      
      // STEP 3: アニメーションの再実行（連続アニメーション）
      runAnimation();
    }
    
    // 初回アニメーション実行
    runAnimation();
  </script>
</body>
</html>

2.2. プログラムの解説と出力例

プログラム解説

このサンプルプログラムは、以下のような動作をします。

  • 初期状態
    ページ中央には青色の四角形（#box）が表示されています。
  • アニメーション①
    　最初のアニメーションでは、box 要素の border-radius が 0px から 50px に変化して丸みを帯び、同時に transform で 720 度の回転と拡大（scale(1.2)）が行われます。これにより、四角形が一瞬丸くなって回転し、元の四角形に戻る動作が実現されます。所要時間は 1500 ミリ秒です。
  • アニメーション②
    　続いて、box 要素が上方向（top プロパティ）に移動し、背景色が青から赤に変化した後、再び元に戻る動作が実行されます。ここでは、250ミリ秒の遅延、750ミリ秒の変化、そして 250ミリ秒の終了後の待機が設定されています。イージングに "ease-in-out" を指定し、滑らかな動作となっています。
  • 連続再実行
    　両方のアニメーションが完了すると、runAnimation() 関数が再帰的に呼び出され、アニメーションがループ再生されます。

ブラウザの出力例

まとめ

　ここでは、.animate() メソッドを用いたアニメーションの基本概念と、主要な設定項目について解説しました。

  • まず、.animate() は配列またはオブジェクト形式でキー フレームを指定し、変化の順序に沿ってスタイルを更新します。
  • 次に、delay、duration、easing、endDelay などのプロパティを用いることで、アニメーションのタイミングや動作の滑らかさを細かく制御できます。
  • さらに、Animationオブジェクトを返すことで、.play()、.pause()、.reverse() などのメソッドを通じた柔軟な制御が可能です。

　今回のサンプルプログラム「animateDemo.html」では、四角形の box が形状変化・回転・移動・色変化を連続して実施する様子を確認でき、.animate() を利用した宣言的アプローチの基本的な使い方を理解するための良い例となります。