JavaScriptのsetIntervalで簡単アニメーションを作る方法！初心者でも理解できるアニメーション制御

1. setIntervalとは何かを理解しよう

1. setIntervalとは何かを理解しよう

JavaScriptのsetIntervalは、指定した時間ごとに同じ処理を繰り返す関数です。たとえば、毎秒コンソールに「こんにちは」と表示したいときに使えます。

setInterval(function() {
  console.log("こんにちは");
}, 1000); // 1000ミリ秒ごとに実行

この場合、1000ミリ秒＝1秒ごとに中の関数が実行されます。これを使うことで文字や画像の位置を変えてアニメーションを作ることができます。

2. 基本的なアニメーションの作り方

2. 基本的なアニメーションの作り方

まずは、簡単なボックスを右に動かすアニメーションを作ってみましょう。HTMLに以下のボックスを用意します。

<div id="box" style="width:50px;height:50px;background:red;position:absolute;left:0px;top:50px;"></div>

JavaScriptでsetIntervalを使って、左から右へ動かします。

let box = document.getElementById("box");
let position = 0;

let intervalId = setInterval(function() {
  position += 5; // 5pxずつ右に移動
  box.style.left = position + "px";

  if(position >= 300) { // 300pxまで来たら止める
    clearInterval(intervalId);
  }
}, 50); // 50ミリ秒ごとに実行

この例では、50ミリ秒ごとにボックスの位置を5pxずつ右に動かしています。clearIntervalでアニメーションを停止させることもできます。

3. 複数の要素を動かすアニメーション

3. 複数の要素を動かすアニメーション

同時に複数の要素を動かすこともできます。例えば、2つのボックスを左右に動かしてぶつからないようにアニメーションさせてみます。

<div id="box1" style="width:50px;height:50px;background:blue;position:absolute;left:0px;top:100px;"></div>
<div id="box2" style="width:50px;height:50px;background:green;position:absolute;left:300px;top:100px;"></div>

let box1 = document.getElementById("box1");
let box2 = document.getElementById("box2");
let pos1 = 0;
let pos2 = 300;

let intervalId2 = setInterval(function() {
  pos1 += 2;
  pos2 -= 2;

  box1.style.left = pos1 + "px";
  box2.style.left = pos2 + "px";

  if(pos1 >= pos2) {
    clearInterval(intervalId2); // ぶつかったら止める
  }
}, 30);

これにより、2つのボックスが向かい合って動くアニメーションを作ることができます。

4. 文字をふわっと動かすアニメーション

4. 文字をふわっと動かすアニメーション

文字や文章を少しずつ動かすと、見た目が自然になります。簡単な例を見てみましょう。

<p id="text" style="position:absolute;left:0px;top:200px;">こんにちは、JavaScriptアニメーション！</p>

let text = document.getElementById("text");
let x = 0;

let textInterval = setInterval(function() {
  x += 3;
  text.style.left = x + "px";

  if(x > 500) {
    x = -text.offsetWidth; // 左に戻してループ
  }
}, 40);

文字を500pxまで動かしたら左に戻すことで、無限ループのアニメーションができます。文章やロゴのスクロール表示に便利です。

5. 色やサイズを変化させるアニメーション

5. 色やサイズを変化させるアニメーション

動きだけでなく、色や大きさを変化させるアニメーションもsetIntervalで作れます。

<div id="circle" style="width:50px;height:50px;background:orange;border-radius:50%;position:absolute;top:300px;left:0px;"></div>

let circle = document.getElementById("circle");
let size = 50;
let leftPos = 0;

let circleInterval = setInterval(function() {
  size += 2;
  leftPos += 5;
  circle.style.width = size + "px";
  circle.style.height = size + "px";
  circle.style.left = leftPos + "px";

  if(leftPos > 400) {
    clearInterval(circleInterval);
  }
}, 60);

この例では、丸のサイズが大きくなりながら右に移動するアニメーションを作っています。動きに合わせてサイズや色を変化させることで、よりリッチな表現が可能です。

6. setIntervalを止めるときの注意点

6. setIntervalを止めるときの注意点

setIntervalは自動で繰り返すため、止め忘れると無限に動き続けます。必ずclearIntervalで停止条件を設定しましょう。

let count = 0;
let maxCount = 10;

let intervalExample = setInterval(function() {
  console.log("カウント: " + count);
  count++;
  if(count >= maxCount) {
    clearInterval(intervalExample); // 最大回数で停止
  }
}, 1000);

このように、回数や位置など条件を指定してsetIntervalを制御すると、意図した通りのアニメーションを安全に作ることができます。

7. アニメーションの滑らかさを工夫する

7. アニメーションの滑らかさを工夫する

短い時間間隔（例：10〜20ミリ秒）でsetIntervalを使うと、アニメーションが滑らかになります。ただし、処理が重くなるとカクつくこともありますので注意が必要です。

let ball = document.getElementById("ball");
let ballPos = 0;

let smoothInterval = setInterval(function() {
  ballPos += 1;
  ball.style.left = ballPos + "px";

  if(ballPos > 600) {
    clearInterval(smoothInterval);
  }
}, 16); // 約60フレーム/秒

16ミリ秒ごとに処理を実行すると、1秒間に約60回更新され、滑らかなアニメーションを作ることができます。ゲームや動的なUIにも応用可能です。

8. まとめの前に応用ポイント

8. まとめの前に応用ポイント

ここまでで、setIntervalを使った基本的なアニメーションの作り方を学びました。位置の移動、色やサイズの変化、複数要素の同時アニメーションなど、基本を押さえるだけで多彩な動きを作れます。

ポイントとしては、必ずclearIntervalで停止条件を設定すること、時間間隔を調整して滑らかさをコントロールすること、要素のスタイルを更新することで動きを表現することです。

これらを応用すれば、スクロールアニメーション、文字や画像のスライド、カウントダウン表示なども簡単に作れるようになります。

まとめ

まとめ

今回の記事では、JavaScriptのsetIntervalを活用して簡単にアニメーションを作る方法を詳しく解説しました。setIntervalは指定した時間ごとに処理を繰り返すため、文字や画像、ボックスなどの位置やサイズ、色を変化させるアニメーションを簡単に実装できます。基本的な使い方として、まずHTML上に動かしたい要素を用意し、JavaScriptで位置やスタイルを変更する関数をsetIntervalで一定間隔で呼び出すという流れを理解することが重要です。

アニメーションの種類として、単純な右方向への移動、複数要素を同時に動かすアニメーション、文字のスクロール表示、サイズや色の変化を伴うアニメーションなどを紹介しました。clearIntervalでアニメーションを停止する方法も重要で、停止条件を設定しないと無限に処理が繰り返され、ブラウザの動作に影響を与える可能性があります。また、アニメーションの滑らかさはsetIntervalの時間間隔を調整することでコントロールできます。短い間隔で更新することで60フレーム/秒程度の滑らかな動きが可能になります。

初心者でも理解しやすいポイントとしては、まず一つの要素を動かすことから始め、次に複数要素や文字のループアニメーション、最後に色やサイズを変化させる複合アニメーションに挑戦する順序がおすすめです。これにより、アニメーションの基本原理を段階的に理解できます。さらに、スクロールやスライド、カウントダウン、動的ボタンやゲームUIなど、様々な応用にも展開可能です。

サンプルプログラムまとめ

ここまでで紹介した内容を一つにまとめた簡単なサンプルです。ボックスが右に移動し、文字がループして流れ、丸がサイズを変えながら動くアニメーションを同時に実行します。

 let box = document.getElementById("box"); let posBox = 0; let text = document.getElementById("text"); let xText = 0; let circle = document.getElementById("circle"); let sizeCircle = 50; let posCircle = 0;
let mainInterval = setInterval(function() {
// ボックス移動
posBox += 3;
box.style.left = posBox + "px";
if(posBox > 300) posBox = 0;

// 文字スクロール
xText += 2;
text.style.left = xText + "px";
if(xText > 500) xText = -text.offsetWidth;

// 丸の移動とサイズ変化
sizeCircle += 1;
posCircle += 2;
circle.style.width = sizeCircle + "px";
circle.style.height = sizeCircle + "px";
circle.style.left = posCircle + "px";
if(posCircle > 400) {
sizeCircle = 50;
posCircle = 0;
}
}, 40);

このサンプルでは、一つのsetIntervalで複数の要素を同時に動かしています。これにより、効率的で滑らかなアニメーションが可能です。