Elsaの技術日記(徒然なるままに)

主に自分で作ったアプリとかの報告・日記を記載

MENU

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

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

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

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



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

こんな感じになりました!!
f:id:Elsammit:20201231101233g:plain

アプリについてはこちらに公開しましたので、来年の運だめしにどうぞ!!
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度で回転動作を行います。

実行してみるとこんな感じになります。
f:id:Elsammit:20201231104444g:plain

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

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

f:id:Elsammit:20201231104638g:plain

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

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

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

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

■最後に

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