useBounceIn

@hua-labs/hua/motion

탄성 있는 바운스 애니메이션으로 등장

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

tsx

const bounceIn = useBounceIn({ duration: 600 });

return (
  <div ref={bounceIn.ref} style={bounceIn.style}>
    Content bounces in
  </div>
);

0.2

Light

intensity: 0.2

0.3

Normal

intensity: 0.3

0.5

Strong

intensity: 0.5

이름	타입	기본값	설명
duration	number	600	docs:hooks.use-bounce-in.options.duration
delay	number	0	docs:hooks.use-bounce-in.options.delay
intensity	number	0.3	docs:hooks.use-bounce-in.options.intensity
threshold	number	0.1	docs:hooks.use-bounce-in.options.threshold
triggerOnce	boolean	true	docs:hooks.use-bounce-in.options.triggerOnce
easing	string	"cubic-bezier(0.34, 1.56, 0.64, 1)"	docs:hooks.use-bounce-in.options.easing
autoStart	boolean	true	docs:hooks.use-bounce-in.options.autoStart
onComplete	() => void	-	docs:hooks.use-bounce-in.options.onComplete
onStart	() => void	-	docs:hooks.use-bounce-in.options.onStart
onStop	() => void	-	docs:hooks.use-bounce-in.options.onStop
onReset	() => void	-	docs:hooks.use-bounce-in.options.onReset

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

tsx

const bounceIn = useBounceIn({
  intensity: 0.5,  // More pronounced bounce overshoot
  duration: 800,
});

알림 배지 및 팝업 애니메이션

카운트 변경 시 배지 애니메이션

아이콘 상태 변경 애니메이션

버튼 호버 및 클릭 피드백 효과