안녕! 오랜만이야. 내 AP Computer Science 시험이 끝났고 여름이 거의 다가왔지만(방학이 30일 남음) 프로젝트와 글쓰기에 더 많은 시간을 할애할 수 있기를 바랍니다.

오늘 블로그 게시물에서는 Framer Motion , React 및 TypeScript 을 사용하여 만족스러운 물결 모양의 텍스트 애니메이션을 만드는 방법을 살펴보겠습니다.

다음은 CodeSandbox 👇의 프로젝트 데모입니다.

시작하기

나는 당신이 행동을 열망하고 있다는 것을 알고 있으므로 시작합시다! React 을 사용하여 TypeScript 및 create-react-app 프로젝트를 초기화하여 시작합니다.

npx create-react-app wavy-text --template typescript
cd wavy-text

이를 위해 Framer Motion이라는 다른 라이브러리 하나만 설치하면 됩니다. 설치하자!

yarn add framer-motion
# npm i framer-motion

대박! 우리 프로젝트가 제대로 설정되었습니다. App.tsx를 열어 시작하겠습니다. 시작하려면 기본 콘텐츠를 바꾸겠습니다.

import "./styles.css";
import WavyText from "./WavyText";

export default function App() {
  return (
    <div className="App">
      <h1>Awesome Wavy Text!</h1>
    </div>
  );
}

시원한. 이제 src/styles.css 파일로 전환하여 응용 프로그램에 대한 몇 가지 기본 스타일을 구성해 보겠습니다. 너무 화려하지는 않지만 예쁘게 보이도록 만들고 싶습니다.

@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");

body {
  background: linear-gradient(
    45deg,
    hsl(272deg 75% 65%) 0%,
    hsl(193deg 100% 50%) 50%,
    hsl(162deg 84% 88%) 100%
  );
}

.App {
  font-family: "Lexend Deca", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}

h1 {
  color: white;
  font-size: 48px;
  user-select: none;
}

애니메이션 만들기

대박! 이제 지루한 설정과 작업이 완료되었으므로 이 프로젝트의 실제 내용을 살펴보겠습니다.

이제 기어를 React으로 전환하고 먼저 이 프로젝트에 필요한 것을 가져오고 구성 요소에 대한 소품을 구성하겠습니다.

import { FC } from "react";
import { motion, Variants, HTMLMotionProps } from "framer-motion";

interface Props extends HTMLMotionProps<"div"> {
  text: string;
  delay?: number;
  duration?: number;
}

우리는 Motion을 사용하고 있으므로 HTML 구성 요소에 소품을 전달하려면 HTMLMotionProps을 사용해야 합니다.

이제 파일 내부에 React function component을 생성하고 소품을 전달해 보겠습니다.

const Letter: FC<Props> = ({
  text,
  delay = 0,
  duration = 0.05,
  ...props
}: Props) => {

}

여기에서 텍스트 입력을 받아 이 문자열의 각 문자를 문자열 배열로 변환해야 합니다. 이를 위해 JavaScript에서 Array.from() 함수를 사용하여 원하는 것을 정확하게 달성할 수 있습니다.

const letters = Array.from(text);

Do note that if you're using an international language, you might want to check out Grapheme Splitter to divide strings into individual user perceived characters, as opposed to computer perceived characters. Since our text is in English, it'd just add unnecessary complication and an extra step to our project so I'm not adding it in :)

대박! 이제 이 배열의 개별 문자를 다른 구성 요소 아래에 매핑해 보겠습니다.

return (
  <motion.h1
    style={{ display: "flex", overflow: "hidden" }}
    {...props}
  >
    {letters.map((letter, index) => (
      <motion.span key={index}>
        {letter === " " ? "\u00A0" : letter}
      </motion.span>
    ))}
  </motion.h1>
);

이제 애니메이션 기능이 기본적으로 작동합니다. 약간의 문제가 있습니다. 애니메이션이 끔찍해 보입니다. 운 좋게도 Variants에서 Framer Motion을 사용하여 문제를 해결할 수 있습니다.
WavyText 구성 요소 외부(또는 내부 - 새 파일에서 선언하고 내부로 가져올 수도 있음)에서 컨테이너와 자식 모두에 대해 두 가지 다른 애니메이션을 만들 수 있습니다.

const container: Variants = {
  hidden: {
    opacity: 0
  },
  visible: (i: number = 1) => ({
    opacity: 1,
    transition: { staggerChildren: duration, delayChildren: i * delay }
  })
};

const child: Variants = {
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      type: "spring",
      damping: 12,
      stiffness: 200
    }
  },
  hidden: {
    opacity: 0,
    y: 20,
    transition: {
      type: "spring",
      damping: 12,
      stiffness: 200
    }
  }
};

이제 완료했으므로 구성 요소의 variants를 적절한 애니메이션으로 설정할 수 있습니다.

<motion.h1
  style={{ display: "flex", overflow: "hidden" }}
  variants={container}
  initial="hidden"
  animate="show"
  {...props}
>

...자식 구성 요소에서:

<motion.span key={index} variants={child}>

건배 - 이제 애니메이션이 작동합니다! src/App.tsx 파일로 가져와서 적절하게 구성하기만 하면 됩니다.

지금 src/App.tsx 파일을 엽니다. 구성 요소를 가져온 다음 <h1></h1> 요소를 삭제하고 다음으로 바꿉니다.

// import WavyText from "./WavyText";
// ...

<WavyText text="Awesome Wavy Text!" />

아주 멋진! 이제 애니메이션이 예상대로 작동해야 합니다. 내 예에서는 "재생"기능도 구현했습니다. 그 이면의 코드를 살펴보고 싶다면 확인하십시오CodeSandbox.

결론

그게 내가 당신을 위해 가진 전부입니다! 새로운 것을 배웠고 나중에 이 애니메이션을 사용하여 자신의 웹 사이트에 생기를 불어넣기를 바랍니다! 현재 이 애니메이션을 my website에서도 사용하고 있습니다. :)

내 블로그에서 더 많은 디자인, a11y 및 관련 기사를 보고 싶다면 알려주세요! 여러분의 의견을 듣고 싶습니다.

남은 하루도 즐겁게 보내세요👋