JavaScriptのアニメーション基本ガイド！初心者でも簡単に動かせる方法

1. JavaScriptでアニメーションを作る基本の考え方

1. JavaScriptでアニメーションを作る基本の考え方

JavaScriptでアニメーションを作る基本は、HTMLの要素を少しずつ動かすことです。たとえば、ボタンを右に動かしたり、文字の色を徐々に変えたりできます。アニメーションは、時間の経過に合わせて繰り返し処理を行うことで実現します。

JavaScriptのアニメーションでよく使われる方法には、setIntervalやrequestAnimationFrameがあります。setIntervalは一定時間ごとに処理を繰り返す方法で、requestAnimationFrameはブラウザが最適なタイミングで処理してくれる方法です。

2. setIntervalを使ったシンプルなアニメーション例

2. setIntervalを使ったシンプルなアニメーション例

まずは、簡単な例としてボックスを右に動かすアニメーションを作ります。

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

const intervalId = setInterval(() => {
  position += 2;
  box.style.left = position + "px";
  if (position >= 200) {
    clearInterval(intervalId);
  }
}, 20);

このコードでは、setIntervalで20ミリ秒ごとにpositionを増やしてボックスの位置を変えています。position >= 200になったらアニメーションを止めるためにclearIntervalを使います。

3. requestAnimationFrameで滑らかなアニメーションを作る

3. requestAnimationFrameで滑らかなアニメーションを作る

より滑らかに動かしたい場合は、requestAnimationFrameを使います。ブラウザが最適なタイミングで処理してくれるので、カクカクせずにスムーズです。

const box2 = document.getElementById("box2");
let pos2 = 0;

function animate() {
  pos2 += 2;
  box2.style.left = pos2 + "px";
  if (pos2 < 200) {
    requestAnimationFrame(animate);
  }
}

animate();

この例ではanimate関数を再帰的に呼び出して、ボックスを右に移動させています。

4. CSSとJavaScriptを組み合わせたアニメーション

4. CSSとJavaScriptを組み合わせたアニメーション

JavaScriptだけでなく、CSSのtransitionと組み合わせると簡単にアニメーションが作れます。JavaScriptでクラスを切り替えるだけでアニメーションが動きます。

const btn = document.getElementById("btn");
const box3 = document.getElementById("box3");

btn.addEventListener("click", () => {
  box3.classList.toggle("move");
});

<style>
#box3 {
  width: 50px;
  height: 50px;
  background-color: blue;
  transition: transform 1s;
}
#box3.move {
  transform: translateX(200px);
}
</style>

ボタンをクリックすると、moveクラスが付いたり外れたりして、ボックスが滑らかに右に移動します。

5. ループアニメーションの作り方

5. ループアニメーションの作り方

アニメーションを繰り返す場合は、位置を元に戻したり、進行方向を変えたりします。

const box4 = document.getElementById("box4");
let pos4 = 0;
let direction = 1;

function loopAnimate() {
  pos4 += 2 * direction;
  if (pos4 > 200 || pos4 < 0) {
    direction *= -1;
  }
  box4.style.left = pos4 + "px";
  requestAnimationFrame(loopAnimate);
}

loopAnimate();

この例では、ボックスが右に移動して端に着くと方向を変えて左に戻るループアニメーションになります。

6. アニメーション中に色を変える例

6. アニメーション中に色を変える例

動きだけでなく、色や透明度を変えることもできます。

const box5 = document.getElementById("box5");
let opacity = 1;
let fadeOut = true;

function fadeAnimate() {
  if (fadeOut) {
    opacity -= 0.01;
    if (opacity <= 0) fadeOut = false;
  } else {
    opacity += 0.01;
    if (opacity >= 1) fadeOut = true;
  }
  box5.style.opacity = opacity;
  requestAnimationFrame(fadeAnimate);
}

fadeAnimate();

このコードでは、ボックスがだんだん透明になったり戻ったりするアニメーションができます。

7. JavaScriptアニメーションのポイントまとめ

7. JavaScriptアニメーションのポイントまとめ

JavaScriptのアニメーションを作るときのポイントは次の通りです。

• アニメーションの対象はHTML要素のスタイル（位置、色、透明度など）
• setIntervalは簡単だが、ブラウザの描画タイミングとずれることがある
• requestAnimationFrameを使うと滑らかで効率的
• CSSのtransitionやanimationと組み合わせるとより簡単に実装できる
• 繰り返しやループアニメーションは条件分岐で制御する

これらを理解すると、JavaScriptで自由にアニメーションを作れるようになります。

まとめ

まとめ

今回の記事では、JavaScriptを使ったアニメーションの基本から応用までを順を追って解説しました。まず、アニメーションの基本はHTMLの要素の位置や大きさ、色、透明度などのスタイルを時間の経過に合わせて変化させることにあると理解しました。単純な移動や色の変化から、ループや滑らかなアニメーションまで、さまざまな方法があります。
特に、setIntervalを使った簡単なタイマーアニメーションは初心者でも理解しやすく、アニメーションの進行を確認するのに最適です。しかし、ブラウザの描画タイミングとずれることがあり、滑らかさが足りない場合があります。そこで、requestAnimationFrameを使うことで、ブラウザが描画する最適なタイミングに合わせてアニメーションを実行できるため、カクつきの少ない滑らかな動きが実現できます。
また、JavaScriptだけでなく、CSSのtransitionやanimationを組み合わせることで、クラスを切り替えるだけで簡単にアニメーションを実装できることもわかりました。これにより、クリックやホバーなどのイベントに応じた動きも簡単に作れます。
さらに、繰り返し動作やループアニメーションを作る際は、方向や位置、条件分岐を制御することで自然な往復運動や繰り返しアニメーションが作れることを学びました。色の変化や透明度のアニメーションも同じ原理で、数値を少しずつ変化させながらrequestAnimationFrameで再描画することで、滑らかなフェードイン・フェードアウトを実現できます。
まとめると、JavaScriptアニメーションは、基本的なスタイル操作と時間に応じた変化のルールを理解することが最初のステップであり、setInterval、requestAnimationFrame、CSSのtransitionを組み合わせることで、より自然で魅力的なアニメーションが簡単に作れることがポイントです。

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

ここまで紹介した基本のアニメーションを組み合わせたサンプル例です。ボックスを右に動かしながら透明度を変えるアニメーションを作ってみましょう。

 const box = document.getElementById("boxSample"); let pos = 0; let opacity = 1; let direction = 1; let fadeOut = true;
function animateBox() {
pos += 2 * direction;
if (pos > 200 || pos < 0) direction *= -1;

if (fadeOut) {
opacity -= 0.01;
if (opacity <= 0) fadeOut = false;
} else {
opacity += 0.01;
if (opacity >= 1) fadeOut = true;
}

box.style.left = pos + "px";
box.style.opacity = opacity;

requestAnimationFrame(animateBox);
}

animateBox();

このコードでは、ボックスが左右に往復しながら、透明度がゆっくり変化するアニメーションになります。requestAnimationFrameを使っているので、滑らかな動きが実現できます。