본문으로 건너뛰기

Motion

HTML 요소에 회전 애니메이션을 적용할 수 있는 React 컴포넌트입니다.

requestAnimationFrame을 사용하여 부드러운 회전 애니메이션을 구현하며, 반복 및 지연 시간 설정이 가능합니다.

🔗 사용법​

<Motion.div
  animate={{ rotate: 360 }}
  transition={{
    duration: 2,
    repeat: 'Infinity',
    ease: 'ease-in-out',
    repeatDelay: 0.5,
  }}
>
  회전하는 요소
</Motion.div>

매개변수​

이름타입설명
animateAnimateProps애니메이션 속성을 정의하는 객체
transitionTransitionProps애니메이션의 동작을 제어하는 설정 객체
refReact.RefObject<HTMLElement>DOM 요소에 접근하기 위한 ref 객체 (선택사항)
styleReact.CSSProperties추가적인 스타일 속성 (선택사항)
...propsReact.ComponentPropsWithRef기타 HTML 속성들

AnimateProps​

이름타입설명
rotatenumber회전할 각도 (degree 단위)

TransitionProps​

이름타입기본값설명
durationnumber1애니메이션 지속 시간 (초 단위)
repeatnumber | 'Infinity'1반복 횟수 (숫자 또는 'Infinity')
ease'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out''linear'가속도 타입
repeatDelaynumber0반복 사이 지연 시간 (초 단위)

지원하는 컴포넌트​

  • Motion.div
  • Motion.span
  • Motion.img
  • Motion.p
  • Motion.button

✅ 예시​

기본 회전​

<Motion.div animate={{ rotate: 180 }} transition={{ duration: 2 }}>
  180도 회전
</Motion.div>

무한 반복 회전​

<Motion.div
  animate={{ rotate: 360 }}
  transition={{
    duration: 2,
    repeat: 'Infinity',
    ease: 'ease-in-out',
  }}
>
  계속 회전
</Motion.div>

반복 회전 with 딜레이​

<Motion.div
  animate={{ rotate: 180 }}
  transition={{
    duration: 1,
    repeat: 3,
    repeatDelay: 0.5,
    ease: 'ease',
  }}
>
  3번 반복 회전 (회전 사이 0.5초 딜레이)
</Motion.div>

ref 사용 예시​

function RotatingImage() {
  const imgRef = useRef<HTMLImageElement>(null);

  useEffect(() => {
    // 이미지 로드 완료 시 처리
    if (imgRef.current) {
      console.log('이미지 크기:', {
        width: imgRef.current.width,
        height: imgRef.current.height,
      });
    }
  }, []);

  return <Motion.img ref={imgRef} src="/logo.png" animate={{ rotate: 360 }} transition={{ duration: 2 }} />;
}

스크린샷​

gif