React의 애니메이션 - Framer Motion 시작하기

Framer 모션은 Framer의 사람들이 만든 라이브러리이며 React에서 쉽게 애니메이션을 만드는 데 중점을 둡니다. 누군가에게는 친숙하게 보일 수도 있지만 Pose by Popmotion의 후속 제품으로 판매되기 때문입니다. 내가 사랑했지만 제품만큼 많은 지원을 받지는 못했습니다. Framer의 지원은 라이브러리가 계속 발전하고 더 많은 관심을 받을 수 있도록 합니다.

우리가 만들고 있는 것

최종 결과물, 우리가 목표로 하는 애니메이션

이 튜토리얼은 사용자가 위로 스크롤할 때 표시되고 사용자가 아래로 스크롤할 때 다시 숨겨지는 애니메이션 React 구성 요소를 만드는 데 중점을 둡니다.

웹의 애니메이션은 어디서부터 시작해야 할지 모르는 경우 어려울 수 있습니다. 무언가를 애니메이션화하는 방법에는 여러 가지가 있으며 React에서 구성 요소를 애니메이션화하는 가장 좋은 방법을 찾는 것이 특히 어려울 수 있습니다. 그래서 우리는 프레이머 모션이 시작하기 쉽고 훌륭한 결과를 제공한다고 생각하기 때문에 프레이머 모션을 탐구할 것입니다.

비디오 튜토리얼

프레이머 모션으로 애니메이션을 만드는 방법을 설명하는 비디오 자습서

마운트 시 애니메이션 표시

우리가 사용할 수 있는 가장 간단한 빌딩 블록은 모션 요소입니다. 우리는 motion에서 동등하게 생성하고자 하는 DOM 요소에 접근하고 animate prop을 추가합니다. 애니메이션을 적용하려는 속성은 opacity이므로 1로 설정하겠습니다. 이것이 애니메이션이 종료되기를 원하는 최종 상태입니다.

<motion.div
  className="actions"
  initial={{ opacity: 0 }}
  animate={{ opacity: shouldShowActions ? 1 : 0 }}
  transition={{ opacity: { duration: 0.2 } }}
>
  <button>
    <span className="fas fa-share-square" />
  </button>
  <button>
    <span className="fas fa-user" />
  </button>
  <button>
    <span className="fas fa-times" />
  </button>
</motion.div>

성능에 대한 참고 사항

프로파일러를 보면 스크롤할 때마다 구성 요소가 다시 렌더링되는 것을 알 수 있습니다. 성능을 향상시키기 위해 우리가 렌더링하는 실제 DOM 요소를 새 구성 요소로 래핑할 수 있으므로 컨테이너가 렌더링될 때에도 두 상태 사이에서 애니메이션을 적용할 때만 자식이 렌더링되어야 합니다. 스크롤로 인해 발생하는 상태 업데이트 횟수를 줄이려고 할 수도 있습니다.

프레이머 모션을 사용하는 이유는 무엇입니까?

라이브러리는 사용하기 쉽고 문서는 훌륭하며 Framer에서 지원합니다. 이 세 가지가 프레임머 모션을 React의 애니메이션을 위한 훌륭한 전나무로 만듭니다. 우리가 재생산하려는 애니메이션은 CSS 또는 일반 JavaScript로 수행할 수 있지만 점점 더 복잡해지는 용량에서 더 유용한 시나리오를 다루기 위해 사용하는 데 익숙해질 수 있도록 프레이머 모션을 소개하고 싶습니다.

자원:

Source Code for the tutorial is available on GitHub

Framer Motion documentation