useLayoutMotion

@hua-labs/hua/framework

Pro

출시 예정

Pro 플랜 컴포넌트

곧 출시됩니다! 웨이팅리스트에 등록하고 소식을 받아보세요.

웨이팅리스트 등록

FLIP 기법 기반 레이아웃 전환 애니메이션 (Pro)

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useLayoutMotion } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx

import { useLayoutMotion } from "@hua-labs/hua/framework";

const layout = useLayoutMotion({
  duration: 300,
  easing: 'ease-out',
});

return (
  <div ref={layout.containerRef}>
    {items.map((item) => (
      <div
        key={item.id}
        ref={(el) => layout.registerItem(item.id, el)}
        style={layout.getItemStyle(item.id)}
      >
        {item.content}
      </div>
    ))}
  </div>
);

라이브 데모

레이아웃 전환 데모

현재 레이아웃:

grid

API 레퍼런스

옵션

이름	타입	기본값	설명
duration	number	300	레이아웃 전환 애니메이션 지속 시간 (밀리초)
easing	string	"ease-out"	애니메이션 이징 함수
stagger	number	0	아이템 간 스태거 딜레이 (밀리초)
onLayoutChange	() => void	-	레이아웃 변경 시 호출되는 콜백

반환값

이름	타입	설명
containerRef	RefObject<HTMLElement>	레이아웃 컨테이너 ref
registerItem	(id, el) => void	아이템 ref 등록 함수
getItemStyle	(id) => CSSProperties	아이템별 스타일 반환 함수
isAnimating	boolean	애니메이션 진행 중 여부
captureSnapshot	() => void	현재 레이아웃 스냅샷 캡처
playAnimation	() => void	FLIP 애니메이션 실행
mounted	boolean	클라이언트 마운트 여부

FLIP 기법

tsx

// FLIP = First, Last, Invert, Play
// 1. First: 초기 위치 기록
// 2. Last: 최종 위치 계산
// 3. Invert: 차이를 transform으로 적용
// 4. Play: transform을 0으로 애니메이션

// useLayoutMotion이 자동으로 처리:
const layout = useLayoutMotion();

// 레이아웃 변경 시 자동으로 부드러운 애니메이션
setItems(shuffledItems); // 자동 FLIP 애니메이션

사용 사례

뷰 모드 전환

그리드/리스트 뷰 전환 애니메이션

드래그 앤 드롭

요소 재배치 FLIP 애니메이션

필터링

필터 변경 시 아이템 재정렬 애니메이션

동적 리스트

아이템 추가/제거 레이아웃 애니메이션

useAutoMotionPro useKeyboardTogglePro