• 목차

변형(Variants)

초기화, 애니메이트, 트랜지션 속성을 사용해 요소에 모션을 설정할 수 있습니다만, 요소에 직접 설정해야 하므로 재사용이 어렵고 JSX 코드 또한 지저분해서 관리하기 불편합니다. 이러한 불편함 개선 및 재사용을 목표로 변형(variants)을 적용해봅니다. (참고)

<RefreshButton
  initial={{
    opacity: 0,
    rotateY: -360 * 2,
    scale: 0.8,
  }}
  animate={{
    opacity: 1,
    rotateY: 0,
    scale: 1,
  }}
  transition={{
    duration: 1,
    type: 'tween',
  }}
/>

변형(variants)을 사용하면 애니메이션 상태를 정의하고 이름 별로 구성 할 수 있습니다.

이름은 자유롭게 작명 가능하고, initial, animate, whileHover, whileTap, whileDrag 등에 상태 이름을 문자 값으로 설정합니다.

// 모션 배리에이션 객체 정의
const refreshButtonVariants = {
  begin: {
    opacity: 0,
    rotateY: -360 * 2,
    scale: 0.8,
  },
  finish: {
    opacity: 1,
    rotateY: 0,
    scale: 1,
    transition:{
      duration: 1,
      type: 'tween',
    }
  }
};

// 정리된 JSX 코드
<RefreshButton
  variants={refreshButtonVariants}
  initial="begin"
  animate="finish"
/>

변형으로 정의된 모션 또한 문제없이 잘 작동합니다. 코드를 효율적으로 관리하기 위해 변형을 적극 사용하세요.

상태 이름 상속

변형의 또 다른 특징은 상위 컴포넌트에 설정된 상태 이름과 하위 컴포넌트의 배리에이션 상태 이름이 동일한 경우, 이름을 상속하기 때문에 몇 줄의 코드를 추가하지 않아도 작동합니다.

// 상위 모션 컴포넌트 배리에이션
const parentVariants = {
  hidden: {
    opacity: 0,
    scaleX: 0
  },
  visible: {
    opacity: 1,
    scaleX: 1,
    transition: {
      duration: 0.4
    }
  },
};

// 하위 모션 컴포넌트 배리에이션
const childVariants = {
  hidden: {
    scale: 2
  },
  visible: {
    scale: 1,
    transition: {
      duration: 0.4,
      type: 'spring',
      stiffness: 270,
      velocity: 10,
    },
  },
};

상위 모션 컴포넌트에 설정된 초기 상태 이름 hidden, 애니메이트 상태 이름 visible은 하위 모션 컴포넌트에 상속되므로 Logo 컴포넌트에 initial, animate 이름을 설정하지 않아도 모션을 멋지게 렌더링합니다.