프레이머 모션 소개

애니메이션은 올바르게 수행될 때 강력합니다. 그러나 CSS로 눈길을 끄는 애니메이션을 만드는 것은 까다로울 수 있습니다. 여기서 Framer Motion이 필요합니다. Framer Motion을 사용하면 CSS 전문가가 아니어도 아름다운 애니메이션을 만들 수 있습니다.
**

프레이머 모션이란 무엇입니까?
**
Framer Motion은 애니메이션 생성을 단순화하는 애니메이션 라이브러리입니다. 단순화된 API는 애니메이션 이면의 복잡성을 추상화하고 처음부터 쉽게 애니메이션을 생성할 수 있도록 합니다. 한 가지 차이점은 Framer Motion은 React만 지원하는 반면 Pose는 React-Native를 지원한다는 것입니다. 그리고 뷰. 현재 Pose를 사용하고 있다면 Pose가 더 이상 사용되지 않으므로 Framer Motion으로 업그레이드하는 것이 좋습니다.

2. 프레이머 모션 작동 방식

모션 구성 요소는 Framer 모션의 빌딩 블록입니다. 모션 구성 요소는 일반 HTML 및 SVG 요소(예: motion.h1 ) 앞에 모션을 추가하여 생성됩니다. 모션 구성 요소는 기본 소품이 애니메이션 소품인 여러 소품을 허용할 수 있습니다. 이 소품은 애니메이션을 적용하려는 구성 요소의 속성을 정의하는 개체를 사용합니다. 정의한 속성은 구성 요소가 DOM에 배포될 때 애니메이션됩니다.

Framer Motion을 사용하여 h1 텍스트에 애니메이션을 적용해 보겠습니다. 먼저 Framer Motion 라이브러리를 설치하고 Motion을 가져옵니다.

npm install framer-motion
import { motion } from 'framer-motion';

그런 다음 h1을 모션 구성 요소로 변환합니다.

<motion.h1 
  animate={{x: 20, y: -20}}>
  This is a motion component
</motion.h1>

이렇게 하면 로드할 때 h1을 오른쪽으로 20픽셀, 위로 20픽셀 이동합니다. 추가된 단위가 없으면 픽셀을 사용하여 계산이 수행됩니다. 그러나 계산의 기준이 되는 단위를 명시적으로 지정할 수 있습니다animate={x: "20rem", y:"-20rem"}}>.

기본적으로 모션 구성 요소는 해당 스타일로 정의된 상태에서 애니메이션 소품의 상태로 애니메이션됩니다. 그러나 원하는 경우 초기 소품을 사용하여 구성 요소의 초기 애니메이션 상태를 하이재킹하고 정의할 수 있습니다. 애니메이션 소품은 장착 시 구성 요소의 동작을 정의하는 데 사용되지만 초기 소품은 장착하기 전에 해당 동작을 정의합니다.

h1이 왼쪽에서 오도록 하려면 초기 소품으로 제어합니다.

<motion.h1
    initial={{x: -1000}}
    animate={{x: 20}}>
   This is a motion component
</motion.h1>

이제 h1이 장착되면 왼쪽에서 밀어 넣습니다.

전환 _prop를 통해 애니메이션 발생 방식을 정의할 수 있습니다. 이를 통해 값이 한 상태에서 다른 상태로 애니메이션되는 방식을 정의합니다. 무엇보다도 이 소품을 사용하여 애니메이션의 _duration, 지연 및 _type을 정의할 수 있습니다.

<motion.h1
    initial={{ x: -1000 }}
    animate={{ x: 0 }}
    transition={{
        type: "tween",
        duration: "2",
        delay: "1"
    }}>
    This is a motion component
</motion.h1>

변형

보시다시피 코드는 점점 더 커지고 있으며 곧 이 새로운 props는 React 로직과 관련된 것보다 훨씬 더 관련성이 높아질 것입니다. 변형을 사용하여 애니메이션 등과 관련된 코드를 분리할 수 있습니다.
Framer Motion의 변형 소품을 사용하면 애니메이션 정의를 변형 객체로 추출할 수 있습니다.
변형은 코드를 더 깔끔하게 만들 뿐만 아니라 훨씬 더 강력하고 복잡한 애니메이션을 만들 수 있게 해줍니다.
애니메이션 정의를 변형 개체로 추출하면 다음과 같은 결과가 나타납니다.

const Variants = {
  initial: { x: -1000 },
  animate: { x: 0 },
  transition: {
    type: "tween",
    duration: 2,
    delay: 1
  }
} 

애니메이션 정의를 구성 요소의 초기 및 애니메이션 소품에 직접 전달하는 대신 이러한 정의를 독립 실행형 변형 개체로 추출합니다. 변형 개체에서 각 애니메이션의 이름을 변형으로 설명하는 변형 이름을 정의합니다.

<motion.h1
      variants={Variants}
      initial='initial'
      animate='animate'
      >

변형 소품에서 각 모션 구성 요소에 대한 변형 개체의 이름을 전달한 다음 애니메이션을 초기 및 애니메이션 소품에 전달합니다.

결론

이것은 프레이머 모션에 대한 소개 가이드일 뿐이며 라이브러리 내부에는 더 많은 기능이 있으며 특히 더 멋진 애니메이션을 쉽게 만들 수 있는 많은 유틸리티 후크가 있습니다.
바라건대, 이 블로그가 여러분의 라이브러리에 멋진 애니메이션을 추가하고 시간이 지남에 따라 여러분의 모든 요구에 맞게 애니메이션을 구축할 수 있는 견고한 기반을 제공하기를 바랍니다.