【コピペOK】JavaScriptを使って画像を動かす・回転させる方法【Web Animations API】

2022年10月16日 23:00

導入

ウェブサイトを作る際に画像を動かしたり、回転させたいと思ったことがあると思います。
現在のJavaScriptには、jQueryやGSAPなどのライブラリを使わずにアニメーションを加えることができる、Web Animations APIというものがあります。

そこで今回は、このWeb Animations APIを使って画像を動かす・回転させる方法を紹介します。
記事中のコードはコピペOKなので、サイト制作時に使ってもらえると嬉しいです。

Web Animations APIとは

Web Animations APIとは、素のJavaScriptのみでアニメーションを追加することができるAPIです。
2020年以降のモダンブラウザにはすべて対応しているので、手軽にアニメーションを追加することができます。

対応しているブラウザは以下の通りです。
IEには非対応です。

<パソコン>

Google Chrome バージョン84以降
Microsoft Edge バージョン84以降
Apple Safari バージョン13.1以降
Mozilla Firefox バージョン75以降

<スマホ・タブレット>

Google Chrome バージョン84以降
Apple Safari バージョン13.4以降

画像を動かす方法

まずは、画像を動かす方法を紹介します。
今回は、ボタンをクリックしたときに始める場合と自動で開始する場合のサンプルを紹介します。

ボタンをクリックしたときに始める場合

ボタンをクリックしたときに始める場合の基本的な書き方は以下の通りです。
以下の例では、開始ボタンを押すとロゴ画像が右に移動するように記述しています。

const start = document.getElementById('start'); // 開始ボタン
const image = document.getElementById('image'); // ロゴ画像

// スタートボタンをクリックしたら
start.addEventListener('click', () => {
  // 画像を左端から200px右に動かす
  image.animate(
    // 途中の状態を表す配列
    [
      { transform: 'translateX(0)'}, // 開始時の状態（左端）
      { transform: 'translateX(200px)' } // 終了時の状態（左端から200pxの位置）
    ], 
    // タイミングに関する設定
    {
      fill: 'backwards', // 再生前後の状態（再生前、開始時の状態を適用）
      duration: 1000, // 再生時間（1000ミリ秒）
    },
  );
});

内容について簡単に説明します。
基本的にはコメントに記載したように、まず開始ボタンと動かしたい画像にidを設定します。
そして、開始ボタンでclickイベントを検知したら、画像をanimateで指定したように移動させます。
途中の状態を表す配列内で開始前の状態と終了時の状態を指定し、タイミングに関する設定でアニメーションの再生時間や再生前後の状態を設定します。
ここでtranslateXはCSSの関数で、基本の位置からX軸方向にカッコ内の数字分移動させることを意味しています。

以下で実際の動きを確認してください。

ちなみに、途中の状態を表す配列内で以下のように設定すると、下に移動させることもできます。

// 途中の状態を表す配列
[
  { transform: 'translateY(0)'}, // 開始時の状態（上部）
  { transform: 'translateY(100px)' } // 終了時の状態（上部から100px下の位置）
],

また、開始時と終了時の状態を入れ替えることで、左向き・上向きに移動させることもできます。

<左向きの場合>

// 途中の状態を表す配列
[
  { transform: 'translateX(200px)' }, // 開始時の状態（左端から200pxの位置）
  { transform: 'translateX(0)'} // 終了時の状態（左端）
],

<上向きの場合>

// 途中の状態を表す配列
[
  { transform: 'translateY(100px)' }, // 開始時の状態（上部から100px下の位置）
  { transform: 'translateY(0)'} // 終了時の状態（上部）
],

自動で開始する場合

自動で開始する場合の基本的な書き方は以下の通りです。
以下の例では、ロゴ画像が右に移動するのを繰り返すように記述しています。

const image = document.getElementById('image'); // ロゴ画像

// 画像を左端から200px右に動かす
image.animate(
  // 途中の状態を表す配列
  [
    { transform: 'translateX(0)'}, // 開始時の状態（左端）
    { transform: 'translateX(200px)' } // 終了時の状態（左端から200pxの位置）
  ], 
  // タイミングに関する設定
  {
    fill: 'backwards', // 再生前後の状態（再生前、開始時の状態を適用）
    duration: 1000, // 再生時間（1000ミリ秒）
    iterations: Infinity,  // アニメーションの繰り返し回数（ずっと繰り返す）
  },
);

ボタンをクリックしたときに始める場合と同じく、途中の状態を表す配列を変えることで左向き・上向き・下向きに変更することもできます。

画像を回転させる方法

次に、画像を回転させる方法を紹介します。
今回も、ボタンをクリックしたときに始める場合と自動で開始する場合のサンプルを紹介します。

ボタンをクリックしたときに始める場合

ボタンをクリックしたときに始める場合の基本的な書き方は以下の通りです。
以下の例では、開始ボタンを押すとロゴ画像が時計回りに回転するように記述しています。

const start = document.getElementById('start'); // 開始ボタン
const image = document.getElementById('image'); // ロゴ画像

// スタートボタンをクリックしたら
start.addEventListener('click', () => {
  // 画像を時計回りに1回転させる
  image.animate(
    // 途中の状態を表す配列
    [
      { transform: 'rotate(0deg)' }, // 開始時の状態（0度）
      { transform: 'rotate(360deg)' } // 終了時の状態（360度）
    ], 
    // タイミングに関する設定
    {
      fill: 'backwards', // 再生前後の状態（再生前、開始時の状態を適用）
      duration: 1000, // 再生時間（1000ミリ秒）
    },
  );
});

画像を移動させる場合との違いは、途中の状態を表す配列でrotate(角度)を書いて指定する点です。
rotateはCSSの関数でカッコ内で指定した角度分、画像を回転させることを表しています。
今回は時計回りに1回転させるので、最初に0度、最後に360度を指定しています。

反時計回りに回転させる場合は、途中の状態を表す配列の開始時と終了時の状態を入れ替えます。

// 途中の状態を表す配列
[
  { transform: 'rotate(360deg)' }, // 開始時の状態（360度）
  { transform: 'rotate(0deg)' } // 終了時の状態（0度）
],

自動で開始する場合

自動で開始する場合の基本的な書き方は以下の通りです。
以下の例では、ロゴ画像が時計回りに回転するのを繰り返すように記述しています。

const image = document.getElementById('image'); // ロゴ画像

// 画像を時計回りに1回転させる
image.animate(
  // 途中の状態を表す配列
  [
    { transform: 'rotate(0deg)' }, // 開始時の状態（0度）
    { transform: 'rotate(360deg)' } // 終了時の状態（360度）
  ], 
  // タイミングに関する設定
  {
    fill: 'backwards', // 再生前後の状態（再生前、開始時の状態を適用）
    duration: 1000, // 再生時間（1000ミリ秒）
    iterations: Infinity,  // アニメーションの繰り返し回数（ずっと繰り返す）
  },
);

ボタンをクリックしたときに始める場合と同じく、途中の状態を表す配列を入れ替えることで反時計回りに変更することもできます。

まとめ

今回はJavaScriptを使って画像を動かしたり、回転させたりする手法を学びました。
Web Animations APIを使うことで、ライブラリを使わずに比較的簡単に実装できることがわかりました。

JavaScriptを使うことでサイトに動きをつけ、見栄えの良いサイトを作ることができるので、ぜひ今回紹介した方法を参考にしてもらえたらと思います。