Loading

滴..滴滴..滴滴滴，讀取完成!
今天我們來實作Day #4

我們在讀取網頁期間，常會看到不同的讀取畫面，雖然讀取有可能讓人厭煩，但看到漂亮的loading畫面，好像就輕鬆了些 ~ 那就讓我們開始吧!
CodePen: https://codepen.io/stevetanus/pen/OJZXZwW

1. HTML

<div class="frame">
  <div class="center">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
  </div>
</div>

這個作品需要三個圓圈圈，.circle1、circle2、circle3。

2. SCSS(CSS)

.center

.frame {
  width: 400px;
  height: 400px;
  position: absolute;
  .center {
    position: absolute;
    top: 100px;
    left: 100px;
    ...}
}

我們將.center定位在.frame的(100,100)的位置。

.circle1

.circle1 {
  position: absolute;
  top: 85px;
  left: 85px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  z-index: 3;

因為.frame的寬度為400px，在.center往右往下推100px之下，我們在.circle1往右往下推85px，加上圓圈的半徑15px，剛好固定.circle1在畫布中心。z-index: 3(z3)使.circle1成為最上面的圓圈。

.circle2, .circle3

.circle2 {
  position: absolute;
  left: 75px;
  top: 75px;
  width: 50px;
  height: 50px;
  z-index: 2;
  ...}
.circle3 {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 60px;
  left: 60px;
  z-index: 1;
  ...}

.circle2和.circle3分別為半徑25px、半徑40px的圓圈，跟上面一樣的方法置中，z-index分別設為2跟1。
現在的圖形大概長成這樣:

動畫 (box-shadow & scale)

在此作品中，三個圓圈的動畫大致相同，在box-shadow和scale產生變化:

@keyframes jump-jump-1 {
  0%,
  70% {
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    transform: scale(0);
  }

  100% {
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
}

@keyframes jump-jump-2 {
  0%,
  40% {
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    transform: scale(0);
  }

  100% {
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
}

@keyframes jump-jump-3 {
  0%,
  10% {
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    transform: scale(0);
  }
  100% {
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
}

可以看到差別在於開始動畫的時刻，.circle1為70%，.circle2為40%，.circle3為10%，因此.circle3最先scale(1)且陰影放大，再來.circle2，最後.circle3。

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

那要如何呈現反向的動畫呢? (animate-direction: alternate)

我們看到圓圈套用的動畫:

.circle1 {
  animation: jump-jump-1 2s $bezier infinite alternate;
  ...}
.circle2 {
  animation: jump-jump-2 2s $bezier infinite alternate;
  ...}
.circle3 {
  animation: jump-jump-3 2s $bezier infinite alternate;
  ...}

在animation的最後都加上了alternate，這是animate-direction: alternate的縮寫，讓動畫正向跑完之後會反向進行，而infinite使得動畫會無限輪迴地進行(animation-iteration-count: infinite;)。

https://www.w3schools.com/css/css3_animations.asp

動畫速度

$bezier: cubic-bezier(0.21, 0.98, 0.6, 0.99);
https://cubic-bezier.com/#.21,.98,.6,.99
此動畫速度跟ease-in-out很像，中間快速變化，特別強調開始與結束的效果，配上alternate的屬性，使作品停留在滿圓圈的效果十分顯著。

打包帶走(take away)

CSS

後記

今天是風雨交加的颱風天，就算提早了半小時出門，搭上了公車，卻還是感覺到交通比平常更為阻塞呢 ~ 下班後吃著麥當勞繼續寫文章。