Start
이번 애니메이션 챕터에서는 TypeScript template을 사용한 react application에 프로젝트를 그대로 진행한다. 챕터 6에서 만들었던 프로젝트를 복사해서 사용하면 된다. 아니라면, 여기를 참고해서 CRA 명령어와 라이브러리등 기본 프로젝트 셋업을 진행하고 강의를 따라가면 된다.
Framer motion
프레이머 모션은 프레이머에서 제공하는 디자이너가 프레이머 앱에서 디자인할 수 있는 애니메이션 모션들을 개발자가 용이하게 적용할 수 있도록 만들어둔 리액트 라이브러리이다. 프레이머 모션에서 제공하는 API 문서는 링크에서 확인할 수 있다.
라이브러리 사용을 위해 먼저 프로젝트 폴더 내에서 npm i framer-motion 명령어로 프레이머 모션을 설치하자.
설치가 끝났다면, 프레이머 모션의 데모 애니메이션들을 클론해볼 차례이다. 애니메이션 예제들은 여기 링크에서 확인할 수 있다.
스타일드 컴포넌트에 프레이머 모션을 적용하려면 일반적인 스타일드 컴포넌트 선언과 조금 다른 문법을 쓴다. styled(motion.div) 라고 선언하고 그 뒤 백틱에 스타일을 작성하면 된다.
작성한 컴포넌트의 Props로 initial, animate, transition 등을 작성할 수 있고 자세한 속성들은 공식 문서를 확인하면 알 수 있다. 예제로 아래처럼 코드를 작성해보았다.
//App.tsx
...
const Box = styled(motion.div)`
width: 200px;
height: 200px;
background-color: white;
border-radius: 10px;
box-shadow: ...
`;
function App() {
return (
<Wrapper>
<Box initial={{scale:0}} animate={{scale:1, rotateZ:360}} transition={{ type:"spring", delay: 0.3, duration:0.3 }} />
<motion.div></motion.div>
</Wrapper>
);
}
...
여기서 애니메이션의 속성에 대해 짧게 알아보자.
transition 으로 받아올 수 있는 motion의 property 중 'type'은 spring, tween 등이 있으며, 이 속성은 animatio의 두 가지 value 사이 변화에 대한 타입을 설정한다.
다만, 많은 프레임의 애니메이션을 고품질로 적용시킬 경우 웹의 성능에 영향을 미치게 되므로 사용에 주의해야한다.
각 타입에 대한 내용은 다음 게시글에서 작성하려 한다.
