useRepeat

@hua-labs/hua/motion

반복 애니메이션 제어 — 무한 루프 또는 N회 반복

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

tsx

const repeat = useRepeat({ type: "pulse", intensity: 0.1 });

return (
  <div ref={repeat.ref} style={repeat.style}>
    Pulsing element
  </div>
);

count: -1 (infinite)

count: 3

반복: 0/3

이름	타입	기본값	설명
type	"pulse" \| "bounce" \| "wave" \| "fade"	"pulse"	docs:hooks.use-repeat.options.type
duration	number	1000	docs:hooks.use-repeat.options.duration
delay	number	0	docs:hooks.use-repeat.options.delay
intensity	number	0.1	docs:hooks.use-repeat.options.intensity
autoStart	boolean	true	docs:hooks.use-repeat.options.autoStart

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-repeat.returns.ref
style	CSSProperties	docs:hooks.use-repeat.returns.style
isVisible	boolean	docs:hooks.use-repeat.returns.isVisible
isAnimating	boolean	docs:hooks.use-repeat.returns.isAnimating
progress	number	docs:hooks.use-repeat.returns.progress
start	() => void	docs:hooks.use-repeat.returns.start
stop	() => void	docs:hooks.use-repeat.returns.stop
reset	() => void	docs:hooks.use-repeat.returns.reset

무한 회전 스피너

무한 반복 배경 효과

배지, 알림 점 강조

동적 배경 그래디언트 애니메이션