【JavaScript入門】setIntervalでアニメーションを作る方法｜動くUIの基本をやさしく解説

JavaScriptの setInterval() を使うと、一定間隔で処理を繰り返すことができるため、簡単なアニメーションを作ることができます。
例えば、要素を横に動かしたり、フェードイン・フェードアウトのような演出も実現できます。

この記事では、初心者でも理解しやすいように、setInterval を使ったアニメーションの基本を丁寧に解説します。

setInterval でアニメーションを作る仕組み

アニメーションの基本は「短い間隔で数値を少しずつ変化させる」ことです。
setInterval を使うと、一定時間ごとに処理を繰り返せるため、位置やサイズを少しずつ変えることで動きを表現できます。

基本のアニメーション例（横に移動）

let pos = 0;
let timer;

function moveBox() {
    timer = setInterval(() => {
        pos += 5; // 5pxずつ移動
        document.getElementById("box").style.left = pos + "px";

        if (pos > 300) {
            clearInterval(timer);
        }
    }, 30); // 30msごとに実行
}

HTML側

<div id="box" style="position:absolute; width:50px; height:50px; background:red;"></div>
<button onclick="moveBox()">動かす</button>

ボタンを押すと赤い四角が右方向にスーッと動きます。

開始・停止ボタン付きアニメーション

次は、アニメーションを開始・停止できるようにしてみましょう。

JavaScriptコード

let pos = 0;
let timer;

function startAnim() {
    clearInterval(timer); // 多重実行防止
    timer = setInterval(() => {
        pos += 3;
        document.getElementById("box").style.left = pos + "px";
    }, 20);
}

function stopAnim() {
    clearInterval(timer);
}

HTMLコード

<div id="box" style="position:absolute; width:50px; height:50px; background:blue;"></div>
<button onclick="startAnim()">開始</button>
<button onclick="stopAnim()">停止</button>

開始ボタンで動き始め、停止ボタンで止めることができます。

アニメーション速度を調整する方法

速度は次の2つで調整できます。

• 移動量（px）を変える：大きくすると速く動く
• setInterval の間隔を変える：短くすると滑らかで速い

例えば、次のようにすると速くなります。

pos += 10; // 移動量を増やす

requestAnimationFrame との違い

setInterval でもアニメーションは作れますが、より滑らかで負荷の少ないアニメーションを作るには requestAnimationFrame が推奨されます。

• ブラウザの描画タイミングに合わせて実行される
• 無駄な処理が減り、カクつきが少ない
• setInterval よりも自然な動きになる

ただし、初心者がアニメーションの仕組みを理解するには、setInterval が分かりやすくておすすめです。

まとめ

• setInterval を使うと簡単なアニメーションが作れる
• 位置を少しずつ変えることで動きを表現できる
• 開始・停止ボタンを付けると実用的になる
• より滑らかな動きには requestAnimationFrame が向いている