おみくじアプリ作ってみた

今年も残すところ後1日になりました。
今年はありがとうございました！！来年もよろしくお願いいたします！！

今年はコロナに振り回された1年でした。。。
来年は終息し、平穏な一年になることを切に願います！！

一足早いですが、おみくじアプリを作成しましたので、紹介です！！
来年の運勢を占うために使って見てください。

■作成したおみくじアプリ

こんな感じになりました！！

アプリについてはこちらに公開しましたので、来年の運だめしにどうぞ！！
https://elsammit.github.io/OmikujiApp/

■ソースコード

アプリはReactで作成しました。
ソースコード全体はこちらに格納しておりますので、よろしかったらどうぞ！！
https://github.com/Elsammit/OmikujiApp.git

今回はおみくじアプリ作成にあたり、回転アニメーションを使用したのでこちらを紹介します。

■画像に回転アニメーション付与

画像に回転アニメーションを付与させるためには、

【.js】
      return (
        <div className="background">
            <img className="omikuji" src={Omikuji}"/>
        </div>
      );

【css】
.omikuji{
  animation: r 0.5s linear infinite alternate;
}

@keyframes r{
  0%    { transform: rotate(0deg);}
  100%  { transform: rotate(30deg);}
}

といったように、cssとjsを作成すればOKです。
実施していることは、classNameでcssで定義するomikujiを指定し、

.omikuji{
  animation: r 0.5s linear infinite alternate;
}

にて、設定した時間(今回は0.5s)で

@keyframes r{
  0%    { transform: rotate(0deg);}
  100%  { transform: rotate(30deg);}

にて指定した角度で回転を行います。
今回は、
0.5sの間で0度～30度で回転動作を行います。

実行してみるとこんな感じになります。

keyframesをこちらのように180度に変更すると、

@keyframes r{
  0%    { transform: rotate(0deg);}
  100%  { transform: rotate(180deg);}

というように0～180度まで0.5sで回転します。

では、0.5s⇒2sに変更してみます。

.omikuji{
  animation: r 2s linear infinite alternate;
}

実際に動作させてみると、こちらのように
2sでの回転動作が実現出来ます。

■最後に

技術ブログ作成を始めて続けた1年でした。
来年も出来るだけ挙げていきたいと思いますので、今後ともよろしくお願いいたします！！

■参考

https://iwb.jp/css-animartion-rotation-pattern/