HTMLアニメーションのJavaScript作成の基礎

1. Webアニメーションの基本基礎知識

Webページでのアニメーションとは、HTML要素の視覚的プロパティを時間をかけて変化させることです。JavaScriptを使うことで、より複雑で柔軟なアニメーションを実現できます。

CSSアニメーションとの違い

CSSアニメーションはシンプルな動きに適していますが、JavaScriptアニメーションはインタラクションや条件分岐を含む複雑な動作が可能です。

主な変更可能プロパティ

位置（top, left）、サイズ（width, height）、見た目（opacity, color）、変形（transform）など

2. アニメーション実現の方法 3つの主要手法

① setInterval/setTimeout

従来の方法。指定した時間間隔でスタイルを更新していきます。

setInterval(() => {
  element.style.left = position + 'px';
  position += speed;
}, 16); // 約60fps

② requestAnimationFrame

現在推奨される方法。ブラウザの描画タイミングに合わせて滑らかなアニメーションを実現。

function animate() {
  // アニメーション処理
  requestAnimationFrame(animate);
}

③ Web Animations API

最新の手法。ブラウザネイティブのアニメーション機能を活用し、高性能なアニメーションが可能。

element.animate([
  {transform: 'translateX(0px)'},
  {transform: 'translateX(100px)'}
], {duration: 1000});

現代の開発ではrequestAnimationFrameまたはWeb Animations APIの使用が推奨されます。

3. 実践例：要素を移動させる

実際のコードを見ながら、要素を水平に移動させるアニメーションを作成してみましょう。

HTML構造

<div id="box" style="width:50px; height:50px; background:blue; position:relative;"></div>
<button onclick="startAnimation()">アニメーション開始</button>

JavaScript（requestAnimationFrame版）

let position = 0;
let animationId;
 
function startAnimation() {
  const box = document.getElementById('box');
  const targetPosition = 300; // 目標位置
  const speed = 2; // 移動速度
 
  function animate() {
    position += speed;
    box.style.left = position + 'px';
 
    if (position < targetPosition) {
      animationId = requestAnimationFrame(animate);
    }
  }
 
  animate();
}

4. イージングで自然な動きを作る

一定速度の動きよりも、加速・減速を含む動きの方が自然で美しく見えます。これをイージングと呼びます。

ease-out（減速）

開始時は速く、終了に向けて徐々に減速する動き。最も自然に感じられるパターンです。

function easeOut(t) {
  return 1 - Math.pow(1 - t, 3);
}

ease-in（加速）

ゆっくり開始して徐々に加速する動き。重厚感のある表現に適しています。

function easeIn(t) {
  return Math.pow(t, 3);
}

ease-in-out（加速後減速）

開始時は加速、中間で最高速、終了に向けて減速。バランスの取れた動きです。

function easeInOut(t) {
  return t < 0.5 ? 4 * t * t * t :
    1 - Math.pow(-2 * t + 2, 3) / 2;
}

イージングを適用した移動アニメーション

function animateWithEasing() {
  const startTime = performance.now();
  const duration = 1000; // 1秒
  const startPos = 0;
  const endPos = 300;
 
  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const easedProgress = easeOut(progress);
 
    const currentPos = startPos + (endPos - startPos) * easedProgress;
    box.style.left = currentPos + 'px';
 
    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }
 
  requestAnimationFrame(animate);
}

5. 実用的なアニメーションパターン

フェードイン・アウト

要素の透明度（opacity）を変更して表示・非表示を演出

element.style.opacity = progress;

スケールアニメーション

要素を拡大・縮小させる効果。ボタンのホバー効果などでよく使用

element.style.transform = `scale(${scale})`;

回転アニメーション

要素を回転させる効果。ローディングスピナーなどに活用

element.style.transform = `rotate(${angle}deg)`;

スライドイン

要素を画面外から滑らせて表示する効果

element.style.transform = `translateX(${x}px)`;

6. パフォーマンスとベストプラクティス

transformプロパティを活用

top、leftより transform を使用することで、ブラウザのGPU加速を活用でき、より滑らかなアニメーションが実現できます。

推奨：transform: translateX(100px)
非推奨：left: 100px

will-changeプロパティ

アニメーションする要素にwill-changeを指定して、ブラウザに最適化のヒントを提供。

element.style.willChange = 'transform';

アニメーション終了後のクリーンアップ

不要になったアニメーションは必ずキャンセルしてメモリリークを防ぐ。

cancelAnimationFrame(animationId);
element.style.willChange = 'auto';

アニメーションのfps（フレームレート）は通常60fpsを目標としますが、複雑な処理の場合は30fpsでも十分な場合があります。

7. 実用例：ローディングスピナー

学んだ技術を組み合わせて、実際のWebサイトでよく見かけるローディングスピナーを作ってみましょう。

HTML + CSS

<div id="spinner" class="spinner"></div>
 
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
}

JavaScriptアニメーション

let rotation = 0;
let animationId;
 
function startSpinner() {
  const spinner = document.getElementById('spinner');
 
  function rotate() {
    rotation = (rotation + 2) % 360;
    spinner.style.transform = `rotate(${rotation}deg)`;
    animationId = requestAnimationFrame(rotate);
  }
 
  rotate();
}
 
function stopSpinner() {
  cancelAnimationFrame(animationId);
}

8. まとめ

JavaScriptアニメーションはrequestAnimationFrameまたはWeb Animations APIを使用することが現代的なアプローチです。

イージングを適用することで、より自然で美しい動きを実現できます。

transformプロパティを活用することで、パフォーマンスの良いアニメーションが作成できます。

アニメーション終了後は適切なクリーンアップを行い、メモリリークを防ぐことが重要です。

1. Webアニメーションの基本 基礎知識