Framer Motion을 사용해야 하는 이유

프레이머 모션이란?

Framer Motion은 새로운 것보다 기존 애니메이션 라이브러리를 개선하거나 재창조하는 것으로 생각하십시오.

Framer Motion은 React와 함께 사용되는 가장 인기 있는 애니메이션 라이브러리 중 하나인 Pose의 후속 제품입니다. 포즈와 마찬가지로 낮은 수준의 의견이 없는 애니메이션 라이브러리인 프로모션을 기반으로 하지만 프로세스를 간소화하기 위해 추상화를 제공합니다.

Framer Motion은 변경 사항을 수정하고 다시 작성하지 않고는 불가능했던 방식으로 API를 개선하고 단순화합니다. 한 가지 차이점은 Framer Motion은 React만 지원하는 반면, Pose는 React-Native 및 Vue를 지원한다는 것입니다. 현재 포즈를 사용하고 있다면 포즈가 더 이상 사용되지 않기 때문에 프레이머 모션으로 업데이트하는 것이 좋습니다.

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

대부분의 애니메이션 라이브러리가 스프링 기반 애니메이션을 사용한다면 왜 Framer Motion을 사용해야 합니까? 우선, 간단하고 구성 요소를 추가 코드로 채우지 않는 훌륭한 API가 있습니다. 대부분의 경우 HTML 요소를 모션 요소로 간단히 대체할 수 있습니다. 예를 들어 div를 motion.div로 바꾸면 동일한 마크업이 생성되지만 애니메이션을 위한 추가 소품이 있습니다.

Framer Motion은 프로토타이핑 도구인 Framer X에서 애니메이션을 구동할 수 있어 핸드오프가 매우 편리합니다. 대부분의 디자이너는 디자인의 모든 작은 세부 사항을 완성하는 데 오랜 시간을 투자하여 개발 과정에서 손실되는 상황을 겪었습니다. Framer Motion을 사용하면 프로토타이핑과 프로덕션 모두에서 동일한 애니메이션 라이브러리를 사용할 수 있습니다. 이렇게 하면 애니메이션이 의도한 것과 다르다고 걱정할 필요가 없습니다.

어떻게 시작합니까?

Framer Motion 패키지를 설치합니다.

npm install framer-motion (npm를 사용하는 경우)
또는yarn add framer-motion (yarn를 사용하는 경우)

파일에서 motion 구성 요소를 가져옵니다.

import { motion } from 'framer-motion';

animate 속성을 사용하여 요소에 애니메이션을 적용하십시오.

⚠️ 기억하십시오: 더 많은css 구문이나 속성을 사용하지 않고 있으며 모두 Framer Motion에서 가져온 것입니다.

export default function App() {
  return (
    <motion.h2
      animate={{ scale: 1.2 }}
    >
      Yayy, I am animated!!
    </motion.h2>
  )
}

두 가지 중요한 사실을 알 수 있습니다.

motion는 항상 HTML 태그 앞에 옵니다(Framer Motion이 지원하는 경우 documentation에서 확인)

animate 속성은 객체를 전달합니다(예: style={{}} )

Framer Motion에 대해 my repository을 참조하고 작동 방식을 배우십시오.

Framer Motion에 대해 YouTube에서 이를 참조하십시오.

참고문헌

LogRocket
Medium