TIL(퍼블리싱) -7

publishing

오늘부턴 React로 위젯을 하나씩 만들고 그걸 총 집합해서 볼 수 있는 페이지를 만들어 놓으려고 한다.
첫 타자는 loading 애니메이션부터 하나씩 시작해보자

컴포넌트 부분은 react-router-dom을 이용해 각 로딩애니메이션을 볼수있는 board를 만들고 중첩 라우팅을 통해 아래 있는 화면만 바뀌도록 설정해 놓았다. 이후 상세 로딩 애니메이션

간단하게 컴포넌트와 css(모듈 css를 사용했다)를 제작한다면

const Loading1 = () => {
  return (
  <div className={styles.loading}>
    <span></span>
    <span></span>
    <span></span>
  </div>
  );
};

export default Loading1;

.loading{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loading span {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: gray;
  margin-right: 10px;
  border-radius: 50%;
  animation: loading 1s linear infinite;
}

.loading span:nth-child(1) {
  animation-delay: 0s;
  background-color: red;
}
.loading span:nth-child(2) {
  animation-delay: 0.2s;
  background-color: dodgerblue;
}
.loading span:nth-child(3) {
  animation-delay: 0.4s;
  background-color: green;
}

@keyframes loading {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

animation 속성에 있는linear는 키프레임과 키프레임이 넘어갈 때 부드럽게 infinite는 무한반복이다.
원 3개가 들쑥날쑥 커지며 옆으로 흘러가는듯한 그런 애니메이션 로딩이다

transform할 때 왼쪽에서 오른쪽으로 이동할 때 left 0 에서 right 0으로 쓰면 되지 않냐 생각할 수 있다.
하지만 그렇게 사용하면 안된다.

• keyframe 애니메이션은 tweening시키는 것이기 때문에 left에서 right로 되면 인식하지 못한다.
• 때문에 left로 좌표를 잡았으면 right로 잡으면 안된다.
  • left:0;으로 좌표를 잡았으면 right:0;으로 잡는 것이 아닌 left:100%;로 잡자

단! 이럴경우 저번에 배운 것처럼 좌표값은 왼쪽 상단으로 기준점이 잡히기 때문에 100%가 되는 구간에선 부모요소 바깥으로 돌게 된다. 따라서 calc계산식을 이용해보자

left:0; 에서 left:calc(100% - 본인의 넓이값);을 사용하자

2번째로 사각형이 빙글빙글 각 맞춰 돌아가는 로딩 애니메이션

const Loading2 = () => {
  return (
    <div className={styles.loadingBox}>
      <div className={styles.loading}>
        <span />
        <span />
      </div>
    </div>
  );
};

export default Loading2;

.loadingBox {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading {
  position: relative;
  width: 80px;
  height: 80px;
}
.loading span {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: gray;
  animation: loading 1.5s infinite;
}
.loading span:nth-child(1) {
  background-color: crimson;
}
.loading span:nth-child(2) {
  animation-delay: 0.8s;
}

@keyframes loading {
  0%,
  100% {
    top: 0;
    left: 0;
  }
  25% {
    top: 0;
    /* right: 0; */
    left: calc(100% - 30px);
    background-color: dodgerblue;
  }
  50% {
    top: calc(100% - 30px);
    left: calc(100% - 30px);
    background-color: orange;
  }
  75% {
    top: calc(100% - 30px);
    left: 0;
    background-color: yellowgreen;
  }
}

그라데이션 로딩

const Loading3 = ()=> {
    return(
        <div className={styles.loading}>
            <span></span>
        </div>
    )
}

export default Loading3

.loading {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.loading span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, white, #d6d8da, white);
  animation: loading 2s linear infinite;
}

@keyframes loading {
  from{
    transform: translateX(-100%);
  }to{
    transform: translateX(100%);
  }
}

정말 기능 적인 부분과 웹 퍼블리싱이 얼마나 차이가 있는지 확실하게 알아가는 것 같다.