プログラミング

【備忘録】Animationローダー

【備忘録】Animationローダーについて

こんにちは!

今回はAnimationを使ったローダーについてです。
3種類のローダーとなります。

・縦横に180度回転する四角
・交互に大きくなったり小さくなったりする円
・順番に大きくなる長方形

前回同様に内容はUdemyの【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)を文字におこしたものとなります。

自分用にアウトプットなので分かりづらい箇所があるかもしれません。

前回

【備忘録】3dアニメーションボタン3dアニメーションボタンの備忘録です。キュービック型のアニメーションボタンを作ることができます。...

作り方

See the Pen
ローダー
by 👓ならっち👓 (@naratch_)
on CodePen.

今回もCSSはSass(SCSS)で書いてコンパイルしていますので
SCSSの記述をしていきます。

SCSSについて

【備忘録】SASS(SCSS)の使い方SASS(SCSS)の使い方を自分用にメモです。...

SCSS

@import "mixin";
.try {
  display: flex;
  .spinner {
    width: 40px;
    height: 40px;
    background-color: #333;
    margin: 100px auto;
    @include animation(
      $name: sk-rotateplane2,
      $duration: 1.2s,
      $iteration-count: infinite,
      $timing-function: ease-in-out
    );
  }

  @keyframes sk-rotateplane2 {
    0% {
      transform: perspective(120px) rotateX(0deg) rotateY(0);
    }
    50% {
      transform: rotateX(-180deg) rotateY(0);
    }
    100% {
      transform: rotateX(-180deg) rotateY(-180deg);
    }
  }

  .double-spinner {
    width: 40px;
    height: 40px;
    position: relative;
    margin: 100px auto;
    & > div {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #333;
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      @include animation(
        $name: sk-bounce2,
        $duration: 2s,
        $iteration-count: infinite,
        $timing-function: ease-in-out
      );
      &:nth-child(2) {
        animation-delay: -1s;
      }
    }
  }

  @keyframes sk-bounce2 {
    0%,
    100% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
  }

  .rect-spinner {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    letter-spacing: -2px;

    & > div {
      background-color: #333;
      height: 100%;
      width: 6px;
      display: inline-block;
      @include animation(
        $name: sk-stretchdelay2,
        $duration: 1.2s,
        $iteration-count: infinite,
        $timing-function: ease-in-out
      );
      @for $i from 1 through 5 {
        &:nth-child(#{$i}) {
          animation-delay: -1.3s + $i * 0.1s;
        }
      }
    }
  }
  @keyframes sk-stretchdelay2 {
    0%,
    40%,
    100% {
      transform: scaleY(0.4);
    }
    20% {
      transform: scaleY(1);
    }
  }
}

今回は_mixin.scssというファイルからもCSSを部品として読み込んでいます。

アンダースコアで始まっているファイルは部品とみなされる。
部品を読み込むには@import’〇〇’;(@import “mixin”;)で読み込める。
mixinのCSS

_mixin.scss

@mixin animation(
  $name,
  $duration: 1s,
  $timing-function: ease,
  $delay: 0s,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: forwards
) {
  animation: {
    name: $name;
    duration: $duration;
    timing-function: $timing-function;
    delay: $delay;
    iteration-count: $iteration-count;
    direction: $direction;
    fill-mode: $fill-mode;
  }
}

animation-name:
アニメーションの名前

animation-duration:
アニメーションの時間

animation-timing-function:
アニメーションの周期

animation-delay:
アニメーションの遅延時間

animation-interation-count:
アニメーションの繰り返し数

animation-direction;
アニメーションの向き

animation-fill-mode:
アニメーションの実行前後のスタイルを適用する

の定義と初期値が記入されています。

解説

HTMLの中身

<body>
<div class=”copyright”>
<a target=”_blank”  href=”https://github.com/tobiasahlin/SpinKit”>MIT Lisence: SpinKit –  @tobiasahlin</a>
</div>
<div id=”container”>
<div class=”try”>
<div class=”spinner”></div>
<div class=”double-spinner”>
<div></div>
<div></div>
</div>
<div class=”rect-spinner”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>

まずは縦横に180度回転する四角から
.spinnerの中身

.try {
 .spinner {
  width: 40px;
  height: 40px;
  background-color: #333;
  margin: 100pxauto;
  @include animation(
   $name: sk-rotateplane2,
   $duration: 1.2s,
   $iteration-count: infinite,
   $timing-function: ease-in-out
  );
 }
@keyframes sk-rotateplane2 {
 0% {
  transform: perspective(120px) rotateX(0deg) rotateY(0);
 }
 50% {
  transform: perspective(120px) rotateX(-180deg) rotateY(0);
 }
 100% {
  transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
 }
}

widthなどは四角形を生成するプロパティです。

@include animation(
mixinのanimationの上書き設定です。

$name: sk-rotateplane2,

$duration: 1.2s,
アニメーションする時間を1.2秒

$iteration-count: infinite,
アニメーションを無限に繰り返す

$timing-function: ease-in-out
アニメーションの速度をゆっくり変化し、速度を上げ、また速度を落とす
);

@keyframes sk-rotateplane2
sk-rotateplane2のアニメーション設定。

0% {
transform: perspective(120px) rotateX(0deg) rotateY(0);
perspectiveは親要素に入れる設定するものですが
ブロック内にアニメーションさせたい要素が1つの場合子要素の
transform内で設定をする。
初期状態のためX,Yともに0
}

50% {
transform:perspective(120px) rotateX(-180deg) rotateY(0);
アニメーションしてから0.6秒後にX軸を-180度回転させる。
}

100% {
transform:perspective(120px) rotateX(-180deg) rotateY(-180deg);
アニメーションしてから1.2秒後にY軸を-180度回転させる。
}

次に交互に大きくなったり小さくなったりする円

.double-spinner {
 width: 40px;
 height: 40px;
 position: relative;
 margin: 100pxauto;
& > div {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-color: #333;
 opacity: 0.6;
 position: absolute;
 top: 0;
 left: 0;
@includeanimation(
 $name: sk-bounce2,
 $duration: 2s,
 $iteration-count: infinite,
 $timing-function: ease-in-out
);
&:nth-child(2) {
 animation-delay: -1s;
}
}
}
@keyframessk-bounce2 {
0%,
100% {
 transform: scale(0);
}
50% {
 transform: scale(1);
}
}

widthなどは円を生成するプロパティです。

& > div
「>」は、指定した要素の直下にある要素にスタイルを適用
double-spinner直下のdiv

border-radius: 50%;
50%にすることで円にしている。

background-color: #333;
opacity: 0.6;
背景の色と、透明度を設定することで2つの円が見えるようにしている。

position:absolute;
top: 0;
left: 0;
2つの円を重ねている。

@include animation(
mixinのanimationの上書き設定です。

$name: sk-bounce2,

$duration: 2s,
アニメーションする時間を2秒

$iteration-count: infinite,
アニメーションを無限に繰り返す

$timing-function: ease-in-out
アニメーションの速度をゆっくり変化し、速度を上げ、また速度を落とす

&:nth-child(2)
子要素のn番目(nth)にスタイルを適用
2個目のdiv要素に適用させる

animation-delay: -1s;
アニメーションを1秒遅らせる

@keyframessk-bounce2

0%,
100%
transform: scale(0);
アニメーションするときと2秒後経ったときに
伸縮倍率を0にする

50%
transform: scale(1);
アニメーションして1秒経過したら伸縮倍率を1倍にする

最後に順番に大きくなる長方形

.rect-spinner {
 margin: 100px auto;
 width: 50px;
 height: 40px;
 text-align: center;
 letter-spacing: -2px;
& > div {
 background-color: #333;
 height: 100%;
 width: 6px;
 display: inline-block;
@includeanimation(
 $name: sk-stretchdelay2,
 $duration: 1.2s,
 $iteration-count: infinite,
 $timing-function: ease-in-out
);
@for$ifrom1through5 {
 &:nth-child(#{$i}) {
 animation-delay: -1.3s + $i * 0.1s;
}
}
}
}
@keyframessk-stretchdelay2 {
0%,
40%,
100% {
transform: scaleY(0.4);
}
20% {
transform: scaleY(1);
}
}
}

margin: 100px auto;
width: 50px;
height: 40px;
text-align: center;

letter-spacing: -2px;
文字と文字の間隔を開ける

親要素を整えるプロパティ

& > div {
「>」は、指定した要素の直下にある要素にスタイルを適用
double-spinner直下のdiv

background-color: #333;
height: 100%;
width: 6px;
display: inline-block;

長方形を生成するプロパティ

@include animation(
mixinのanimationの上書き設定です。

$name: sk-stretchdelay2

$duration: 1.2s,
アニメーションする時間を1.2秒

$iteration-count: infinite,
アニメーションを無限に繰り返す

$timing-function: ease-in-out
アニメーションの速度をゆっくり変化し、速度を上げ、また速度を落とす

@keyframessk-stretchdelay2 {
0%,
40%,
100%
transform: scaleY(0.4);
アニメーション開始時と0.48秒、1.2秒経ったら伸縮倍率を0.4倍にする

20%
transform: scaleY(1);
アニメーション開始してと0.24秒経ったら伸縮倍率を1倍にする

for文

@for 変数 from 開始の値 through 終了の値 { 
//変数が開始の値〜終了の値の間、処理が繰り返されます 
}

@for $i from 1  through 5
変数iをを1〜5番目まで繰り返し処理をする

&:nth-child(#{$i}) {
子要素のi番目にスタイルを適用

animation-delay: -1.3s + $i * 0.1s;
-1.3秒で設定しているのはアニメーションが1.2秒のため、子要素の1番目が入ってきたタイミングでちょうど1.2秒にするため、-1.3秒にしている。
-であればいくつでも問題ない。

変数iが代入されて1秒ずつ遅れてアニメーションをする。

まとめ

今回もUdemyの【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)のAnimationで色んなローダーを作ってみようの内容をそのままアウトプットしてみました。

前回同様に、文字に起こすことで、より理解を深めることができました。

今回のアニメーションもあまり実用性はないですが、
基礎を知っているのと知らないのではアニメーションを作るのに大きく変わってくるので
知っといて損はないと思います。

created by Rinker
技術評論社
¥3,608
(2021/09/27 21:12:29時点 Amazon調べ-詳細)