글씨에 애니메이션을 줘보자

개요

• 현재 만들고 있는 Todo 앱에 Todo 만 추가하는 것이 아니라, 암기노트 기능을 추가하려고 계획했다.
• 탭이 이미 만들어져있는데, 해당 탭을 눌렀을 때 아무것도 보이지 않는게 허전해서 아직 개발중이다 라는 뜻을 담아 Developing… 이라는 단어를 써두었는데, 왜 인지 여기에 에니메이션을 줘보고 싶었다.
• 그것도 글씨 하나하나에.
  

→ 대충 요런걸 만들었다.

JS

• 나는 각 글씨들을 하나의 컴포넌트로 렌더링하고, 각 컴포넌트마다 애니메이션을 주는 방식으로 구현 방향을 잡았다.
  → 물론 더 좋은 방법도 많을 것…
• 내가 원하는 한 글자 씩 분해하고 각 글자마다 컴포넌트를 렌더링 해줘야 했기 때문에, 변수에 내가 원하는 문자열을 할당하고, 해당 변수에 split(), map() 을 사용하였다.

const text = "developing..."
// 초기값을 비교하여 TS가 타입추론을 하기 때문에 타입지정 안해도 된다.

{text.split('').map((char, idx) => {
  return (
    <Char key={idx} idx={idx}>
      {char}
    </Char>
  );
})}

CSS

const Char = styled.div<{ idx: number }>`
  letter-spacing: 3px;
  animation: wave 1s calc(0.1s * ${(props) => props.idx}) linear infinite;

  @keyframes wave {
    0% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-5px);
    }

    100% {
      transform: translateY(0);
    }
  }
`;

• 렌더링 될 글자의 스타일을 지정해주었다.
• @keyframes 로 wave 라는 규칙을 만들어주었는데, 기존 Y좌표에서 -5px 만큼 이동 후 다시 돌아오는 형태로 작성했다.
  • 위치의 이동은 transform : translateY() 를 이용했다.
• 이후 animation 의 delay 를 calc 함수와 props 로 받은 idx 를 이용하여 계산하는 방식으로 서로 다른 delay 를 줄 수 있게끔 했다.

.charWrapper {
    display: flex;
  }

• 처음엔 span 으로 각 글자들을 감싸주었는데, inline 요소에는 animation 속성이 적용되지 않았다.
• 각 글자들을 div 태그로 바꾸어주고, 해당 내용을 감싸는 div를 만들고, flex 를 이용하여 수평 정렬해주었다.
  → 각 글자에 display : inline-block; 속성을 추가하는 것으로도 가능했다.

---

+

• 뭔가 이렇게 중요하진 않지만 해보고 싶은 걸 구현하는 게 재미있는 것 같다.