Netfilx Clone #1 Framer Motion 시작

Framer Motion

React용 production-ready 모션 라이브러리

🚩 https://www.framer.com/motion

• 설치

npm i framer-motion

• 사용

import { motion } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
   < motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
)

---

사용 전에 알아둬야할 것

• framer motion 을 사용하려면 HTML 태그 앞에 motion. 을 붙여야 한다.
  <motion.div></motion.div> , <motion.header></motion.header>
  • 대부분의 HTML 을 animate 시킬 수 있다.
  • styled-components : const Box = styled(motion.div)``;

---

Variants

• 컴포넌트가 가질 수 있는 미리 정의된 시각적 state 이다.
• initial
  • 애니메이션의 초기값을 지정할 수 있다. (초기 상태)

  <motion.div initial={{ scale:0 }} />

• animate
  • initial 다음의 애니메이션을 제어할 수 있다. (최종 스타일)

  <motion.div initial={{ scale:0 }} animate={{ scale:1 }} />

• Transition
  • 값이 한 상태에서 다른 상태로 움직이는 방식을 정의할 수 있다. (기본값 spring)

  <motion.div animate={{ rotate: 180 }} transition={{ type: 'tween' }} />

• 기본 사용 방법

const divVariants = {
  visible: { scale: 0  },
  hidden: { scale: 1, rotateZ: 360 },
}

<motion.div 
  variants={divVariants}  
  initial="hidden"  // variants에서 설정한 key값 그대로 넣어준다.
  animate="visible" 
/>

특징) 기본적으로 자식 컴포넌트는 부모로부터 variant 변경 사항을 상속 받는다.

const divVariants = {
  start: { scale: 0, opacity: 0  },
  end: { scale: 1, opacity: 1, transition: { duration: 0.5 }},
}


return (
    <Box variants={divVariants} initial="start" animate="end">
      <Circle /> 
      <Circle />
    </Box>
)

• 따라, <Circle /> 컴포넌트에 아무 prop 이 설정되어있지 않더라도
  위와 같이, Motion 이 부모 variant 의 속성을 자식 컴포넌트에 부여한다.
• 즉, 부모 컴포넌트에 있는 transition: { duration: 0.5 } 설정이
  <Circle /> 컴포넌트에 상속되어 동일하게 0.5 뒤에 발생한다.

---

Orchestration

• 비슷한 애니메이션을 순차적으로 진행할 때 , 자식 컴포넌트에게 딜레이를 주거나 반복 횟수를 설정할 때 orchestration을 사용한다.
  • delayChildren
    • 부모 컴포넌트에서, 딜레이 시간(초) 후에 자식 애니메이션이 시작될 수 있도록 설정할 수 있다.
  • staggerChildren
    • 부모 컴포넌트에서, 자식 컴포넌트의 애니메이션에 지속 시간(초)만큼 시차를 둘 수 있다.
    • 예를 들어, staggerChildren이 0.01이면 첫 번째 자식은 0초, 두 번째 자식은 0.01초, 세 번째 자식은 0.02초 지연되는 식이다.

---

Drag

• 드래그할 컴포넌트에 drag 를 적어주면 된다.

< motion.div drag / >

• 특정 방향으로만 드래그하려면 "x" 또는 "y"를 설정할 수 있다.

< motion.div drag="x" / > // x축으로만 움직일 수 있당

• whileDrag : 드래그 제스처가 인식되는동안 애니메이션할 수 있는 속성

< motion.div whileDrag={{ backgroundColor:"green" }} / >

// 박스를 잡고 드래그하는 동안 색상이 초록으로 변함

• 색상 변화에도 애니메이션을 주고 싶다면 rgb, hex 코드로 작성하면 된다.

< motion.div whileDrag={{ backgroundColor:"rgb(46, 204, 113)" }} / >

// 이렇게 작성하면 흰색에서~점점 초록색으로 그라데이션 애니메이션이 발생한다.