useMotionState

@hua-labs/hua/motion

애니메이션 재생 상태 머신 — idle, playing, paused 등

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const motion = useMotionState({
  duration: 2000,
  autoStart: false,
});

return (
  <div>
    <p>State: {motion.state}</p>
    <p>Progress: {Math.round(motion.progress)}%</p>
    <p>Elapsed: {motion.elapsed}ms</p>

    <button onClick={motion.play}>Play</button>
    <button onClick={motion.pause}>Pause</button>
    <button onClick={motion.stop}>Stop</button>
    <button onClick={motion.reverse}>Reverse</button>
  </div>
);

라이브 데모

현재 상태

대기

진행률

컨트롤 데모

API 레퍼런스

옵션

이름	타입	기본값	설명
initialState	"idle" \| "playing" \| "paused" \| "completed" \| "error"	"idle"	docs:hooks.use-motion-state.options.initialState
duration	number	1000	docs:hooks.use-motion-state.options.duration
delay	number	0	docs:hooks.use-motion-state.options.delay
autoStart	boolean	false	docs:hooks.use-motion-state.options.autoStart
loop	boolean	false	docs:hooks.use-motion-state.options.loop
direction	"forward" \| "reverse" \| "alternate"	"forward"	docs:hooks.use-motion-state.options.direction
showOnMount	boolean	false	docs:hooks.use-motion-state.options.showOnMount

반환값

이름	타입	설명
state	MotionState	docs:hooks.use-motion-state.returns.state
direction	MotionDirection	docs:hooks.use-motion-state.returns.direction
progress	number	docs:hooks.use-motion-state.returns.progress
elapsed	number	docs:hooks.use-motion-state.returns.elapsed
remaining	number	docs:hooks.use-motion-state.returns.remaining
mounted	boolean	docs:hooks.use-motion-state.returns.mounted
play	() => void	docs:hooks.use-motion-state.returns.play
pause	() => void	docs:hooks.use-motion-state.returns.pause
stop	() => void	docs:hooks.use-motion-state.returns.stop
reset	() => void	docs:hooks.use-motion-state.returns.reset
reverse	() => void	docs:hooks.use-motion-state.returns.reverse
seek	(progress: number) => void	docs:hooks.use-motion-state.returns.seek
setState	(newState: MotionState) => void	docs:hooks.use-motion-state.returns.setState

사용 사례

상태 머신

복잡한 UI 상태 전환 관리

인터랙티브 UI

제스처 기반 인터랙티브 컴포넌트

복잡한 애니메이션

다단계 복합 애니메이션 시퀀스

컴포넌트 상태

컴포넌트 라이프사이클 애니메이션

useReducedMotion useRepeat