回転のアニメーションを作ってみた(デザイン勉強)

2024年12月9日 19:47

今の所何の知識も無いけどいつかUIつよつよアプリを作成したい！の思いだけがあふれてる私が、
「とりあえず好きなデザインから写経＆アレンジしていけばモチベもスキルも地道に上がるんじゃにゃかろうか」を目指すシリーズ。
記念すべき第一回。おそらく最終回。
ただただ写経して、わかんないコード片っ端から理解していくスタイルでいくよ。注意すべきはこれだけ！！
一度で理解しようとすな！！ただの自分用アウトプットやから記事の見栄えは全く気にせずとりあえず全部適当にメモしていけ〜（≧∇≦）

今回参考させていただくペン

tamago324さんのペンを写経させていただきます。ボックスが一定期間ごとに回転するコード！ぷるぷるしてるね

完成したコード

全く違うもの作ってて草ですな(　-`ω-)
なんとなく黄色だけ逆回転しているように見えなくもないアニメーション。
ぷるぷるはCSSアニメーションの段階分けすごすぎたから自力では諦めた(*´꒳`*)
以下、作成するまでの写経段階とアレンジん段階のメモ。

アウトプットメモ

今回JavaScriptコードは無いから使わないらしい。
JavaScript＝動かすためのコードみたいなイメージやったからもうこの時点でわかんない(；ω；)

使用しているのはCSSアニメーションっていうやつらしい。
要素のスタイルを時間の経過に沿って変化させる方法。JavaScriptより簡単な動きしかつけれないけど、シンプルなやつやったらこれで実装できる感じ。

定義する時は@keyframes アニメーション名っていう書き方。
これを定義しといて実際に適用する時はpaddingとかcorolとか普通のCSS指定する場所と同じところで

.class {
  animation: アニメーション名 1s infinite;

みたいな感じで指定すればいい感じっぽい。
「(アニメーション名)を1秒周期で無限に繰り返す」みたいな感じかな？

SCSSはCSSの拡張版。色々機能あるみたいやけどとりあえずセレクタをネスト構造で書けるやつ。

実際にコード見ていくよ。
HTMLは１文だけ。boxクラスを置いてるだけやからCSSで細かく指定しない限りまだ何も表示されない状態かな？

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

<div>は特定の領域つくるときにグループ識別するために囲む要素。閉じタグが必要。
classはCSSで.box {}の形で指定するよ。

CSSひとつずつ見ていく。

widthは要素の幅指定。heightは要素の高さ指定。
background-colorは背景色。今回要素見えるようになってるのはここで色付けしてるから。
border-radiusは角の丸みしてい。px高い方がどんどん丸くなる？
marginは要素の周りにどれだけ余白作るかの指定、今回指定の値が1つだけやから上下左右全部10px空けるといった感じ？

animation部分が今回の重要な部分かな？
・animation :animationでaimationって名前で定義されてるアニメーションを呼び出してる感じ。
・1500msはそのアニメーションどれくらいの周期で動かすか？msはm秒やから1500ms=1.5秒
・linearは一定の速度でアニメーション動くようにするためのコード
・infiniteはこのアニメーションを永遠に続けるため。これなかったら1.5秒で終わる？
・bothは終了したときに移動先の場所にそのまま維持するためのコード？これがなかったら移動した状態から、最初の位置に一瞬で戻ってしまうみたいな不規則なうごきをしてしまう？

@keyframesがCSSアニメーションのお決まり定義コードみたいなやつ。
@animation アニメーション名で{処理}で指定できる。
→これを書くセレクタでanimation: animationで呼び出せば定義した通りに動いてくれるみたいな感じか。

アニメーション内は%で指定する。時間の経過を%で表してる感じ。
今回やと1.5秒内で0%が0秒、50%やと0.75秒、100%で1.5秒段階の状態をそれぞれ指定してるみたいな感じかな？

transformは位置を変えたり、サイズ変更したりするためのプロパティ。
rotateはその一種でrotate(90deg)で90度回転する指定。やから最大360deg。(-90deg)とかで反時計回りに90度回転する。

・今回の場合やと、33%段階までは回転なし。
・そこからの回転はかなり細かい段階で指定して、90度回転、つまり4分の1回転を指定してるということか。
→4回このアニメーションが実行されたら実質１周してるように見える状態かな？

元コードのインプットはこれくらい
写経コード元に色々アレンジしてみた！

@keyframes animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

アニメーションは0%~100%までだけで90度回転のアニメーション。やから写経のやつよりプルプル感うすめ。

HTMLはboxを3つに増やしたよ。scssで&.box-1みたいな感じで子要素ネストして指定する感じ。

<div class="container">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
  <div class="box box-3"></div>
</div>

SCSS

.container
  .box {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    margin: 50px;
    position: absolute;
    
    
    &.box-1 {
      background-color: blue;
      animation: animation 4000ms linear infinite both;
    }
    
    &.box-2 {
      background-color: red;
      animation: animation 2000ms linear infinite both;
    }
    
    &.box-3 {
      background-color: yellow;
      animation: animation 8000ms linear infinite both;
    }

  }

@keyframes animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

それぞれanimationの動く秒数を4秒、2秒、8秒に変更。
重ねておくためにbox要素はposition: absoluteで絶対位置を指定してる。
z-indexで高い値設定しておいたら、青色とか赤色を全面に出すことも可能な感じやな(　-`ω-)👍🏻

ということで以上！！