Framer Motion을 사용하여 React 앱에 애니메이션을 추가하는 방법

최소한의 코딩 노력으로 React 앱에 간단한 애니메이션을 추가하는 방법을 알아보세요.

애니메이션은 거의 모든 최신 웹 애플리케이션의 중요한 부분입니다. 역시 맞추기 가장 어려운 부분 중 하나입니다.

Framer Motion은 구성 요소에 쉽게 애니메이션을 적용할 수 있도록 해주는 React용으로 제작된 라이브러리입니다.

Framer Motion은 애니메이션에 모션 구성요소를 사용합니다. 각 HTML/SVG 요소에는 제스처 및 애니메이션을 위한 소품이 있는 동등한 모션 구성 요소가 있습니다. 예를 들어 일반 HTML div는 다음과 같습니다.

Framer Motion과 동등한 기능은 다음과 같습니다.

모션 구성요소는 다음을 지원합니다.생기 있게 하다 값이 변경되면 애니메이션을 트리거하는 소품입니다. 복잡한 애니메이션의 경우useAnimate범위가 지정된 참조가 있는 후크.

프로젝트에서 Framer Motion을 사용하기 전에 Node.js 런타임과 Yarn 패키지 관리자가 컴퓨터에 설치되어 있어야 하며 React가 무엇인지, 어떻게 사용하는지 이해해야 합니다.

GitHub 리포지토리에서 이 프로젝트의 소스 코드를 보고 다운로드할 수 있습니다. 사용스타터 파일이 튜토리얼을 따라갈 수 있는 시작 템플릿으로 분기를 사용하거나최종 파일 완전한 데모를 위한 브랜치. 이 라이브 데모를 통해 실제 프로젝트를 볼 수도 있습니다.

터미널을 열고 다음을 실행하세요.

당신이 열 때로컬호스트:5173브라우저에 다음이 표시됩니다.

이제 첫 번째 간단한 애니메이션, 즉 마우스를 올리면 커지고 커서가 떠나면 줄어드는 버튼을 만들 수 있습니다.

열기src/App.jsx 코드 편집기에서 파일을 엽니다. 이 파일에는 React 조각을 반환하는 기능 구성 요소가 포함되어 있습니다. 가져오기단추그런 다음 렌더링하고텍스트소품:

다음으로Button.jsx파일을 만들고 가져오기운동유틸리티프레이머 모션:

이제 정규식으로 교체하세요.단추요소모션.[요소] 요소. 이 경우모션.버튼요소.

그런 다음whileHoverGesture Prop을 사용하고 사용자가 버튼 위로 마우스를 가져갈 때 Framer Motion이 애니메이션화해야 하는 값의 객체를 전달합니다.

이제 마우스 포인터를 버튼 위로 또는 밖으로 이동하면 버튼에 애니메이션이 적용됩니다.

이 데모에서는 CSS 애니메이션을 대신 사용하지 않는 이유가 궁금할 것입니다. Framer Motion은 React 상태와 통합되어 일반적으로 코드가 더 깔끔해지기 때문에 CSS보다 장점이 있습니다.

다음으로 좀 더 복잡한 작업인 모달 애니메이션을 시도해 보세요. ~ 안에배경화면.jsx, 모션 유틸리티를 가져오고 다음을 사용하여 기능적 구성 요소를 만듭니다.클릭 시그리고어린이들 소품. 반환모션.div클래스가 "backdrop"인 구성 요소 및클릭 시JSX의 리스너.

그런 다음 세 가지 소품을 추가합니다.초기의,생기 있게 하다,그리고출구 . 이러한 소품은 각각 구성 요소의 원래 상태, 구성 요소가 애니메이션되어야 하는 상태, 애니메이션 이후 구성 요소가 있어야 하는 상태를 나타냅니다.

추가하다클릭 시그리고어린이들소품모션.div전환 기간을 0.34초로 설정합니다.

그만큼배경구성 요소는 래퍼입니다.모달 요소. 배경화면을 클릭하면 모달이 닫힙니다. ~ 안에모달.jsx, 가져오기운동 배경화면 구성요소도 있습니다. 기본 기능 구성 요소는 소품을 허용합니다.닫기 모달그리고텍스트 . 변형 변수를 객체로 생성합니다.

변형 개체를 가리키는 "변형" 소품이 있는 배경 구성 요소로 래핑된 Motion.div 구성 요소를 반환합니다. 변형은 구성요소가 있을 수 있는 사전 정의된 애니메이션 상태 세트입니다.

다음으로, 사용자가 버튼을 클릭할 때 모달을 표시하는 기능을 추가해야 합니다. 열기