Web Animations APIのanimateメソッドで実現するアニメーション

Web Animations API（WAAPI）は、JavaScriptを用いてCSSアニメーションをより柔軟かつパワフルに制御できるAPIです。その中でも animate() メソッド は、簡潔な記述で複雑なアニメーションを実現できる強力な機能を備えています。

本記事では、animate() メソッドの基本的な使い方から、複数プロパティの同時アニメーション、ユーザーインタラクションとの連携など 実践的なテクニック を詳しく解説します。

1. animateメソッドの基本的な使い方

まずは、animate() メソッドの基本的な使い方を確認しましょう。

1-1. animate() メソッドの構文

animate() メソッドの基本的な構文は以下のようになります。

element.animate(keyframes, options);

引数	説明
`keyframes`	キーフレーム（アニメーションの変化を定義）
`options`	アニメーションの再生時間、イージングなどの設定

1-2. シンプルなアニメーション

以下の例では、四角形が100px右に移動するアニメーションを作成します。

<div class="box"></div>

<script>
  const box = document.querySelector('.box');

  box.animate(
    [
      { transform: 'translateX(0px)' },
      { transform: 'translateX(100px)' }
    ],
    {
      duration: 1000, // 1秒
      iterations: 1   // 1回のみ再生
    }
  );
</script>

ポイント:

transform を使うことで、滑らかな移動アニメーションを実現
duration を変更することで、アニメーションのスピードを調整

2. 複数プロパティの同時アニメーション

animate() メソッドでは、複数のCSSプロパティを同時にアニメーションさせることが可能です。

2-1. 透明度と移動を同時にアニメーション

box.animate(
  [
    { transform: 'translateX(0px)', opacity: 1 },
    { transform: 'translateX(100px)', opacity: 0.5 }
  ],
  {
    duration: 1000,
    iterations: 1
  }
);

このコードでは、要素が右に移動すると同時に透明度が50%になります。

3. アニメーションの制御と同期

animate() を使うと、アニメーションを動的に制御できます。

3-1. 再生・一時停止・逆再生

const animation = box.animate(
  [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
  { duration: 2000, iterations: Infinity }
);

document.getElementById('pause').addEventListener('click', () => animation.pause());
document.getElementById('play').addEventListener('click', () => animation.play());
document.getElementById('reverse').addEventListener('click', () => animation.reverse());

ボタンで制御できるようにすると、インタラクティブなアニメーションを実装できます。

4. ユーザーインタラクションとの連携

マウスイベントやスクロールイベントを利用して、アニメーションを動的にトリガーできます。

4-1. クリックでアニメーションを開始

box.addEventListener('click', () => {
  box.animate(
    [{ transform: 'scale(1)' }, { transform: 'scale(1.5)' }],
    { duration: 500, iterations: 1 }
  );
});

クリック時に拡大するアニメーションが実装できます。

5. 実践例：高度なアニメーションの実装

最後に、実践的なアニメーションの例を紹介します。

5-1. 波紋エフェクト（クリック時のエフェクト）

<style>
  .ripple {
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 0;
    height: 0;
  }
</style>

<script>
  document.addEventListener('click', (event) => {
    const ripple = document.createElement('div');
    ripple.classList.add('ripple');
    document.body.appendChild(ripple);
    
    const size = 100;
    ripple.style.left = `${event.clientX - size / 2}px`;
    ripple.style.top = `${event.clientY - size / 2}px`;

    ripple.animate(
      [{ width: '0px', height: '0px', opacity: 1 }, 
       { width: `${size}px`, height: `${size}px`, opacity: 0 }],
      { duration: 500 }
    );

    setTimeout(() => ripple.remove(), 500);
  });
</script>

クリック位置に波紋エフェクトを生成する、実用的なアニメーションです。