개요

Framer Motion 을 사용하여 Gesture 애니메이션을 구현합니다.

Gestures

Event Listen (Props)

• whileDrag
• whileFocus
• whileHover
• whileTap

코드 예시

const boxVariants = {
  hover: { scale: 1.5, rotateZ: 90 },
  click: { scale: 1, borderRadius: "100px" },
};

function App() {
  return (
    <Wrapper>
      {/* boxVariants.hover, boxVariants.click */}
      <Box variants={boxVariants} whileHover="hover" whileTap="click" />
    </Wrapper>
  );
}

• 추후 삼항연산자로 state 에 따라 애니메이션 수정 가능

Drag

드래그 활성화 방법

• 그냥 motion 컴포넌트에 drag 프로퍼티만 주면됩니다.
  <Box drag variants={boxVariants} whileHover="hover" whileTap="click" />

• 드래그 했을때 이벤트를 주려면 whileDrag 사용
  <Box drag ...(생략) whileDrag={{backgroundColor: "rgb(46, 204, 113)"} } />
  • 색상을 입력할때 색변화에도 애니메이션 효과를 주기위해 rgb, rgba 등 수치(숫자)가 있는 색정보를 사용합니다.

• Valiants 로 코드 정리

const boxVariants = {
  hover: { scale: 1.5, rotateZ: 90 },
  click: { scale: 1, borderRadius: "100px" },
  drag: {
    backgroundColor: "rgba(46, 204, 113, 0.8)",
    transition: { duration: 10 },
  },
};

function App() {
  return (
    <Wrapper>
      {/* boxVariants.hover, boxVariants.click */}
      <Box
        drag
        variants={boxVariants}
        whileHover="hover"
        whileTap="click"
        whileDrag="drag"
      />
    </Wrapper>
  );
}

드래그 제약

• drag="x", drag="y" : x 축, y 축에 제약
• dragConstraints drag 되는 요소가 움질일 수 있는 범위 제한하는 가상의 박스
• div 컴포넌트와 useRef() 로 제약 가능
• dragSnapToOrigin : 드래그 끝마친 후 원점으로 되돌아 옵니다.
• dragElastic : 드래그 탄성, 기본값 0.5 (0 <= x <=1)

const BiggerBox = styled.div`
  width: 600px;
  height: 600px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
`;

const boxVariants = {
  hover: { scale: 1.5, rotateZ: 90 },
  click: { scale: 1, borderRadius: "100px" },
};

function App() {
  const biggerBoxRef = useRef<HTMLDivElement>(null);
  return (
    <Wrapper>
      {/* boxVariants.hover, boxVariants.click */}
      <BiggerBox ref={biggerBoxRef}>
        <Box
          drag
          dragSnapToOrigin
          dragElastic={0.5}
          dragConstraints={biggerBoxRef}
          variants={boxVariants}
          whileHover="hover"
          whileTap="click"
        />
      </BiggerBox>
    </Wrapper>
  );
}

참조

Framer Motion Docs
리액트 마스터클래스, 노마드코더