-
[React] Styled-components와 React(+ Typescript)로 타이핑 애니메이션 만들기development/React 2022. 10. 9. 00:17
안녕하세요.
오늘은 제가 프로필 페이지를 제작하면서 만들었던 간단한 타이핑 애니메이션에 대해 포스팅하려고 합니다.
정말 간단한 애니메이션인데, 혹시나 비슷한 걸 만들고자 하시는 분께 도움이 되고자 간략하게 포스팅 해봅니다.
1. UI 제작하기
이번 프로젝트에선 기본적으로 React 프로젝트가 준비되어 있다는 가정 하에 진행하도록 하겠습니다.
우선, 타이핑 애니메이션 이전에 보여지고픈 UI를 제작해줍니다.
// ... const MainTitle = styled.div` text-align: left; font-weight: 500; margin: 2rem 0; line-height: 1; font-size: 7rem; position: relative; display: flex; align-items: center; justify-content: center; font-family: ${(props) => props.theme.fontFamily.special}; // Theme color: ${(props) => props.theme.color.text.light}; // Theme `; // ... return ( <MainTitle>HELLO, World!</MainTitle> )
font-family나 color와 같은 세팅은 따로 설정해준 테마를 사용해 설정했습니다.
이러한 코드를 렌더링하게 되면, 다음처럼 UI가 완성됩니다.
이제 문장 앞의 터미널 기호와 커서를 추가해보겠습니다.
2. Terminal 기호, Cursor UI 렌더링하기
// ... const MainTitle = styled.div` // ... 생략 ... &:before { content: '>'; position: absolute; left: -5rem; top: 0; } &::after { content: ''; display: block; position: absolute; right: -3rem; width: 1.5rem; height: 100%; top: 0rem; background-color: #ffffff60; } `; // ...
터미널 기호와 커서 UI 모두 의미가 없는 뷰용 요소이기 때문에 ::before, ::after를 사용해 요소를 추가했습니다.
직접적인 render return 부의 코드 변화는 없습니다.
다음으로는 커서의 깜빡이는 애니메이션을 제작하겠습니다.
3. Cursor animation 제작하기
const CursorAnimation = keyframes` 0%, 45%, 90%, 100% { opacity: 1; } 50%, 85% { opacity: 0; } `; const MainTitle = styled.div` // ... 생략 &:before { // ... 생략 } &::after { // ... 생략 animation: ${CursorAnimation} 1s infinite; } `;
styled-components의 keyframe을 사용해 커서가 깜빡이는 듯한 애니메이션을 1초의 지속시간을 두어 설정해주었습니다.
다음은 각 글자가 타이핑되는 듯한 애니메이션을 제작해 보겠습니다.
4. 타이핑 애니메이션 제작하기
우선 저는 개별 문자열 하나씩의 컨트롤을 위해 텍스트를 배열로 변환하여 각 파츠를 렌더링 하는 방식으로 진행했습니다.
그리고 파츠별로 분리한 문자열을 기본적으로 width를 0으로 주어 렌더링 되지 않게 하고, 렌더링 될 순서가 됐을 때 width를 본래 크기로 늘려주어 화면에 타이핑 되는 것 같은 효과를 주었습니다.
- 문자열을 배열로 변환하여 map으로 각 요소를 span으로 감싸 렌더링
- span 요소는 0%에선 width=0 인 상태를 유지하도록 하고, 100%에선 width=max-content 인 애니메이션이 적용되어 있음
- 각 렌더링 요소는 기본적으로 width=0 인 상태로 유지 (화면상엔 출력되지 않는 상태)
- 각 요소의 styled props로 애니메이션 딜레이 시간을 index * 타이핑 간격 시간으로 계산하여 전달
- styled에서 애니메이션 딜레이를 적용
- 화면상에 글자 순서대로 출력
const CursorAnimation = keyframes` // ... 생략 `; const MainTitle = styled.div` // ... 생략 `; // 각 요소 타이핑 애니메이션 const FlickerAnimation = keyframes` 0% { width: 0px; } 100% { width: max-content; } `; const TextPart = styled.span<{ delaySecond: number }>` display: inline-block; overflow: hidden; width: 0px; animation: ${FlickerAnimation} 0.1s forwards; animation-delay: ${(props) => props.delaySecond}s; `; const typingAnimationText = 'HELLO, World!'; // 타이핑 애니메이션 문구 const partAnimation = 0.3; // 타이핑 딜레이 (second) const typingAnimationTextArray = Array.from(typingAnimationText); // 문구 배열 변환 // ... return ( <MainTitle> {typingAnimationTextArray.map((part, i) => ( <TextPart key={i} delaySecond={partAnimation * i}> {part} </TextPart> ))} </MainTitle> )
이후 필요하다면 저처럼 컬러를 일부 변경하거나 하는.. 커스텀으로 마음에 들게 수정하시면 완성입니다!
참고로 완성된 전체 소스코드는 제 Github에 업로드 되어 있으니 풀 소스코드가 보고 싶으시면 오시면 됩니다~.
저 소스코드가 완성된 당시의 PR 링크 올려드립니다.
혹시 잘못된 부분이 있다면 피드백 부탁드립니다.
감사합니다.
'development > React' 카테고리의 다른 글
[React.js] 요즘 잘 사용하고 있는 VSCode에서의 Typescript ESLint/Prettier 환경 함께 설정하기 (0) 2022.10.08 [Gatsby.js] Gatsby+Typescript에서 styled-component 본격 설정하기 (0) 2022.09.30 [React.js] Styled Components 간단 정리 [Basic] (0) 2021.06.24 [React.js] ESLint와 Prettier를 이용한 React 환경 설정 (VSCode) (0) 2021.06.19 [React.js] Shallow compare와 Class component에서의 최적화 (22.04.13. 내용 수정 및 추가) (0) 2021.06.17