JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでアニメーションを作成する方法をわかりやすく解説

JavaScriptを使えば、要素を滑らかに動かしたり変形させたりするアニメーションを簡単に実装できます。この記事では、setInterval()を活用したアニメーションの基本的な作り方を、実際に動くサンプルコードとともに詳しく解説します。

JavaScriptアニメーションの基本的な仕組み

JavaScriptでアニメーションを作る場合の基本は、「一定間隔ごとに要素のスタイルを少しずつ変更する」という考え方です。具体的には次の手順で実装します。

  1. setInterval()で指定間隔（例：10ミリ秒）ごとに関数を繰り返し実行する
  2. 関数の中で位置や形状などのスタイル値を少しずつ更新する
  3. 目標の位置に達したらclearInterval()でタイマーを停止してアニメーションを終了する

サンプルコード

以下は、ボタンをクリックするとボックスが右へ移動しながら角が丸くなっていくアニメーションの例です。

<!DOCTYPE html>
<html>
<style>
   body{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   button{
      padding:10px;
      font-size: 18px;
      background-color: blue;
      color:white;
      border:none;
      margin-bottom:10px;
   }
   .Animation {
      width: 60px;
      height: 60px;
      position: absolute;
      background-color: rgb(134, 25, 207);
   }
</style>
<body>
<h1>Animation using JS example</h1>
<button onclick="startAnimation()">Start Animation</button>
<div class ="Animation"></div>
<script>
   function startAnimation() {
      var elem = document.querySelector(".Animation");
      var pos = 0;
      var id = setInterval(frame, 10);
      function frame() {
         if (pos == 450) {
            clearInterval(id);
         } else {
            pos++;
            elem.style.borderRadius = pos/14 + 'px';
            elem.style.left = pos + 'px';
         }
      }
   }
</script>
</body>
</html>

コードのポイント解説

  • document.querySelector(".Animation")：アニメーションの対象となる要素を取得しています。
  • setInterval(frame, 10)：10ミリ秒ごとにframe関数を実行し、滑らかな動きを実現しています。
  • if (pos == 450)：位置が450pxに達した時点でclearInterval()を呼び出し、アニメーションを停止させます。
  • elem.style.left / borderRadius：横位置と角丸（border-radius）を同時に変化させることで、ボックスが移動しながら徐々に丸くなっていく演出を作っています。

実行結果

上記のコードをブラウザで表示すると、次のようになります。

JavaScriptでアニメーションを作成する方法をわかりやすく解説

「Start Animation」ボタンをクリックすると、紫色のボックスが左から右へ移動しながら、角が丸くなっていきます。

JavaScriptでアニメーションを作成する方法をわかりやすく解説

補足：requestAnimationFrameの活用もおすすめ

近年のモダンなWeb開発では、setInterval()の代わりにrequestAnimationFrame()を使うことが推奨されています。requestAnimationFrame()はブラウザの描画タイミングに同期して処理を実行するため、より効率的で滑らかなアニメーションが可能になります。また、タブがバックグラウンドにある場合は自動的に処理が一時停止されるため、パフォーマンス面でも優れています。学習やシンプルなデモではsetIntervalでも十分ですが、実践的な開発ではrequestAnimationFrameの利用を検討してみてください。

  1. JavaScriptでオートコンプリート（入力補完）機能を実装する方法

    JavaScriptによるオートコンプリートの実装検索フォームなどでユーザーの入力に合わせて候補を自動的に表示する「オートコンプリート（入力補完）」機能は、JavaScriptを使えばライブラリなしでも実装できます。本記事では、配列に格納されたデータを候補として表示し、マウスクリックやキーボード操作で選択できるオートコンプリートの作り方を、完全なサンプルコードとともに解説します。実装のポイントこのサンプルでは以下のような仕組みでオートコンプリートを実現しています。inputイベント：テキストフィールドに入力があるたびに発火し、入力値と前方一致する項目を候補リストとして動的に生成します。キーボー

  2. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="