react-spring

react-spring이란? React에서 사용할 수 있는 물리 기반 애니메이션 라이브러리다. 물리 기반이기 때문에 자연스러운 움직임을 만든다고 하는데, 아직은 잘 모르겠고 보다 쉽게 애니메이션을 만들어준다.

공식 홈페이지 : https://www.react-spring.dev/docs/getting-started

내 gitHub : https://github.com/leeyulgok/yulgok-page

이번에는 저번 Web Speech API와 개인 프로젝트를 합쳐 보기로 했다.

사용해보기

결과

결과 이미지다. 유심히 볼 부분은 음성인식을 하는 동안에 마이크 아이콘이다. 음성을 받는 동안에 계속해서 껌뻑이는 걸 볼 수 있다.

코드

import { useSpring, animated } from "react-spring";

const Microphone = ({ listening }) => {
  const pulse = useSpring({
    from: { backgroundColor: "transparent" },
    to: async (next) => {
      while (listening) {
        await next({ backgroundColor: "rgba(0, 0, 255, 0.5)" });
        await next({ backgroundColor: "transparent" });
      }
    },
    config: { duration: 1000 },
  });
  
  return (
    <animated.div style={{ ...pulse, borderRadius: '50%', width: '1.5rem', height: '1.5rem', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="1em"
        viewBox="0 0 384 512"
        cursor={"pointer"}
      >
        <path d="path" />
      </svg>
    </animated.div>
  );
};

export default Microphone;

코드는 위와 같다. 여기서 react-spring 과 관련해서 볼 부분은 import한 부분들만 보면 된다.

우선 useSpring, Hook은 간단한 스프링 애니메이션을 생성하게 해준다. 객체를 반환하며, 이 객체는 애니메이션의 현재 상태의 알려준다. 그래서 pulse 변수에 객체의 현재의 상태를 담는다.

pulse 변수를 설명하면, from과 to는 애니메이션의 시작과 끝을 나타낸다. 시작할 때는 투명 상태에 있다가, 시작하면 파란색이되었다가 투명해졌다가를 listening이 false가 될 때까지 반복한다. config는 애니메이션의 설정을 나타내고 지속시간을 1초로 설정했다.

다음은 animated다. 이 컴포넌트는 useSpring 등으로 생성된 애니메이션 값을 실제 DOM 요소에 연결해준다. 예시와 같이 사용한다. style은 추가로 css를 설정한 것이다.

정리하기

이번에는 react-Spring이라는 라이브러리를 사용해서 애니메이션을 만들어봤다. css에서 keyframe을 사용하지 않고도 간단하게 만들 수 있어서 매우 만족스러웠다. 따로 position과 같은 위치에도 구애받지 않고 만들 수 있다는 장점도 있었다.

꾸준히 만들어 보면서 더 나은 웹 페이지를 만들어보자.