CSSで画像をアニメーションさせてみよう(4) メトロノームのように画像を動かす

CSSで静止画像をアニメーションさせる

CSSを使うことで、静止した画像をアニメーション表示することができます。上下・左右に動かせるのはもちろん、回転させることもできます。

参考：CSSで画像をアニメーションさせてみよう(1)キーフレームとは

https://anko.education/archives/3599

参考：CSSで画像をアニメーションさせてみよう(2)平面の画像を立体的に回転させる

https://anko.education/archives/3603

CSSで静止画像をメトロノームのようにアニメーションさせる

この記事のサンプルコードでは、画像を表示する角度を回転させます。そのとき、回転の中心を画像の外に指定して、メトロノームのように、孤を描いて振動するようにさせてみます。

サンプルコードには、動作の速さ（何秒かけて振動を往復させるか）を変更する仕組みも入れてみました。

サンプルの確認

以下で、サンプルの動作を確認することができます。

アプリとソースコードのインポート

以下のボタンをクリックすると、Monaca Educationにプロジェクトをインポートできます。

Monaca Educationにインポートする(要ログイン)

CSSのポイント

画像のアニメーションの動作を指定する

このアプリの、画像のアニメーション動作を実現しているのは、フォルダcssの中のファイルstyle.cssのうち、特に下記の部分です。


#arrow {
  …
  animation: swing 3s infinite ease-in-out;
  transform-origin: center 300px;
}

@keyframes swing {
  0%, 100% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(30deg);
  }
}

HTML（index.html）で、タグ<img>を使い、矢印の画像を表示させています。その矢印の画像要素には、ID属性を用いて、”arrow”（※「矢印」という意味）という名前を付けています。

そのarrowの表示方法として、以下の指定がされています。


#arrow {
  …
  animation: swing 3s infinite ease-in-out;
  transform-origin: center 300px;
}

属性animationの値として、最初に”swing”がされていますが、これはCSSの後の方に書かれているキーフレーム（@keyframes）の名前です（※キーフレームの指定内容は後述）。

次にある“3s”とは、「3秒かけて」という意味です。指定したキーフレームアニメーションを、3秒で実行するように指定しています。

“infinite”は、「無限に繰り返す」という意味です。アニメを（1回きりでなく）繰り返し表示します。

“ease-in-out”は、アニメーションの動作の速さを「ゆっくり変化しはじめ、速度を上げ、また速度を落とす」と指定する書き方です。

キーフレームswingで、アニメの開始点・中間点・終了点のスタイルを指定する

“swing”という名前で定義されているキーフレームでは、次のようにアニメーションのキーフレームを決めています。

なお、キーフレームとは、アニメーションの開始点や終了点、必要に応じて中間点を決め、それぞれの点での要素のスタイルを指定するものです。


@keyframes swing {
  0%, 100% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(30deg);
  }
}

この例では、アニメの開始時点（0%）と終了時点（100%）において、　-30度回転（rotate）するように指定しています。マイナスの角度の指定により、時計の12時の方向（画面真上の方向）に対して、反時計回りに回転した位置になります。

中間時点（50%）では、30度回転が指定されています。

CSSは、これらの点の間を埋めるようにアニメーションを作ってくれます。

つまり、以上のキーフレームの設定の結果、アニメは「最初、（12時の方向から見て）左に30度傾いた向きから始まり、時計回りに回転しながら、アニメの中間のタイミングで右に30度傾いた状態になる。続けて、反時計回りに回転して、元の、左に30度傾いた位置に戻る」と定義されたことになります。

変形の原点（origin）を指定する

次の部分は、変形（＝transform。今回のサンプルの場合、「回転」という種類の変形）の原点を決めています。


#arrow {
  …
  transform-origin: center 300px;
}

この部分のうち、”center”は画像の左右中央を意味します。続く”300px”は、画面の上端を0px（ピクセル）としたときの原点の縦方向の（座標のYの）値です。画像の表示サイズを150pxにしているので、その倍ですから、画像の範囲をはみ出して、画像の外、下側のところに回転の中央を置いたことになります。

これで、弧を描いて動く矢印を作ることができました。

試してみよう：変形の原点を画像の中央にすると

変形の原点（transform-origin）の値を、次のように変更すると、画像の中央を中心に回転するようになります。


#arrow {
  …
  transform-origin: center center;
}

ぜひ、試してみてください。

アニメーションの動作の速度を変える

このサンプルアプリには「速くする」「遅くする」のボタンも付いています。

ボタンをクリックすると、JavaScriptによるプログラムが動作します。「速くする」の処理内容は以下の通りです（HTMLファイルindex.htmlに記載）。


function faster(){
    let arrow = document.getElementById("arrow");
    if ( currentSpeed > 1 ) {
        currentSpeed -= 1;      // 1秒分、加速する
        arrow.style.animation = 'swing ' +  currentSpeed + 's infinite ease-in-out';
    }
}

プログラムの中で、「現在の速度（currentSpeed）が1より大きい場合、currentSpeedの値を1引く」という処理を行なっています。「数が小さくなるのに、加速する」のは不思議な気がしますが、CSSの属性animateは「何秒で一連の（キーフレームの）アニメを表示するか」指定します。「3秒かけて一連のアニメを表示する」場合と、「1秒で一連のアニメを表示する」を比べると、「1秒で一連のアニメを表示する」の方が、動作は速くなります。

最後に、HTMLの要素のスタイルを書き換えて、画面に反映させています。