@hua-labs/motion-core 2.0.0

package/dist/hooks/useLoadingSpinner.js

@@ -0,0 +1,283 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+export function useLoadingSpinner(options = {}) {
+    const { duration = 1000, easing = 'linear', type = 'rotate', rotationSpeed = 1, pulseSpeed = 1, bounceHeight = 20, waveCount = 3, dotCount = 3, barCount = 4, color = '#3b82f6', backgroundColor = 'transparent', size = 40, thickness = 4, autoStart = true, infinite = true, onComplete, onStart, onStop, onReset } = options;
+    const ref = useRef(null);
+    const [isVisible, setIsVisible] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const [isLoading, setIsLoading] = useState(false);
+    const [rotationAngle, setRotationAngle] = useState(0);
+    const [pulseScale, setPulseScale] = useState(1);
+    const [bounceOffset, setBounceOffset] = useState(0);
+    const [waveProgress, setWaveProgress] = useState(0);
+    const [dotProgress, setDotProgress] = useState(0);
+    const [barProgress, setBarProgress] = useState(0);
+    const animationRef = useRef(null);
+    const startTimeRef = useRef(0);
+    // 애니메이션 루프 함수
+    const runAnimation = useCallback(() => {
+        if (!isAnimating)
+            return;
+        const animate = (currentTime) => {
+            if (!isAnimating)
+                return;
+            if (!startTimeRef.current) {
+                startTimeRef.current = currentTime;
+            }
+            const elapsed = currentTime - startTimeRef.current;
+            const currentProgress = (elapsed / duration) % 1;
+            setProgress(currentProgress);
+            // 타입별 애니메이션 업데이트
+            switch (type) {
+                case 'rotate':
+                    setRotationAngle(currentProgress * 360 * rotationSpeed);
+                    break;
+                case 'pulse':
+                    setPulseScale(0.8 + 0.4 * Math.sin(currentProgress * Math.PI * 2 * pulseSpeed));
+                    break;
+                case 'bounce':
+                    setBounceOffset(bounceHeight * Math.sin(currentProgress * Math.PI * 2));
+                    break;
+                case 'wave':
+                    setWaveProgress(currentProgress);
+                    break;
+                case 'dots':
+                    setDotProgress(currentProgress);
+                    break;
+                case 'bars':
+                    setBarProgress(currentProgress);
+                    break;
+            }
+            if (infinite || currentProgress < 1) {
+                animationRef.current = requestAnimationFrame(animate);
+            }
+            else {
+                setIsAnimating(false);
+                onComplete?.();
+            }
+        };
+        animationRef.current = requestAnimationFrame(animate);
+    }, [isAnimating, duration, type, rotationSpeed, pulseSpeed, bounceHeight, infinite, onComplete]);
+    // 로딩 시작 함수
+    const startLoading = useCallback(() => {
+        if (isLoading)
+            return;
+        setIsLoading(true);
+        setIsAnimating(true);
+        setProgress(0);
+        startTimeRef.current = 0;
+        onStart?.();
+        runAnimation();
+    }, [isLoading, onStart, runAnimation]);
+    // 로딩 중단 함수
+    const stopLoading = useCallback(() => {
+        setIsLoading(false);
+        setIsAnimating(false);
+        if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+        }
+        onStop?.();
+    }, [onStop]);
+    // 로딩 상태 설정 함수
+    const setLoadingState = useCallback((loading) => {
+        if (loading) {
+            startLoading();
+        }
+        else {
+            stopLoading();
+        }
+    }, [startLoading, stopLoading]);
+    // 모션 시작 함수
+    const start = useCallback(() => {
+        if (!isVisible) {
+            setIsVisible(true);
+            startLoading();
+        }
+    }, [isVisible, startLoading]);
+    // 모션 중단 함수
+    const stop = useCallback(() => {
+        stopLoading();
+    }, [stopLoading]);
+    // 모션 리셋 함수
+    const reset = useCallback(() => {
+        setIsVisible(false);
+        setIsAnimating(false);
+        setProgress(0);
+        setIsLoading(false);
+        setRotationAngle(0);
+        setPulseScale(1);
+        setBounceOffset(0);
+        setWaveProgress(0);
+        setDotProgress(0);
+        setBarProgress(0);
+        startTimeRef.current = 0;
+        if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+        }
+        onReset?.();
+    }, [onReset]);
+    // 모션 일시정지 함수
+    const pause = useCallback(() => {
+        setIsAnimating(false);
+        if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+        }
+    }, []);
+    // 모션 재개 함수
+    const resume = useCallback(() => {
+        if (isVisible && !isAnimating) {
+            setIsAnimating(true);
+            runAnimation();
+        }
+    }, [isVisible, isAnimating, runAnimation]);
+    // 자동 시작
+    useEffect(() => {
+        if (autoStart) {
+            startLoading();
+        }
+    }, [autoStart, startLoading]);
+    // 컴포넌트 언마운트 시 정리
+    useEffect(() => {
+        return () => {
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+            }
+        };
+    }, []);
+    // 스피너 스타일 계산
+    const getSpinnerStyle = () => {
+        const baseStyle = {
+            width: size,
+            height: size,
+            backgroundColor: 'transparent',
+            position: 'relative',
+            display: 'inline-block'
+        };
+        switch (type) {
+            case 'rotate':
+                return {
+                    ...baseStyle,
+                    border: `${thickness}px solid ${backgroundColor}`,
+                    borderTop: `${thickness}px solid ${color}`,
+                    borderRadius: '50%',
+                    transform: `rotate(${rotationAngle}deg)`,
+                    transition: `transform ${duration}ms ${easing}`
+                };
+            case 'pulse':
+                return {
+                    ...baseStyle,
+                    backgroundColor: color,
+                    borderRadius: '50%',
+                    transform: `scale(${pulseScale})`,
+                    transition: `transform ${duration}ms ${easing}`
+                };
+            case 'bounce':
+                return {
+                    ...baseStyle,
+                    backgroundColor: color,
+                    borderRadius: '50%',
+                    transform: `translateY(${bounceOffset}px)`,
+                    transition: `transform ${duration}ms ${easing}`
+                };
+            case 'wave':
+                return {
+                    ...baseStyle,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                };
+            case 'dots':
+                return {
+                    ...baseStyle,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                };
+            case 'bars':
+                return {
+                    ...baseStyle,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                };
+            default:
+                return baseStyle;
+        }
+    };
+    // 웨이브 바 스타일 생성
+    const getWaveBars = () => {
+        return Array.from({ length: waveCount }, (_, index) => {
+            const delay = index * (duration / waveCount);
+            const height = size * (0.3 + 0.7 * Math.sin((waveProgress + index / waveCount) * Math.PI * 2));
+            return {
+                width: thickness,
+                height: `${height}px`,
+                backgroundColor: color,
+                borderRadius: thickness / 2,
+                animationDelay: `${delay}ms`,
+                transition: `height ${duration}ms ${easing}`
+            };
+        });
+    };
+    // 점 스타일 생성
+    const getDots = () => {
+        return Array.from({ length: dotCount }, (_, index) => {
+            const delay = index * (duration / dotCount);
+            const opacity = 0.3 + 0.7 * Math.sin((dotProgress + index / dotCount) * Math.PI * 2);
+            const scale = 0.8 + 0.4 * Math.sin((dotProgress + index / dotCount) * Math.PI * 2);
+            return {
+                width: thickness * 2,
+                height: thickness * 2,
+                backgroundColor: color,
+                borderRadius: '50%',
+                opacity,
+                transform: `scale(${scale})`,
+                animationDelay: `${delay}ms`,
+                transition: `all ${duration}ms ${easing}`
+            };
+        });
+    };
+    // 바 스타일 생성
+    const getBars = () => {
+        return Array.from({ length: barCount }, (_, index) => {
+            const delay = index * (duration / barCount);
+            const height = size * (0.2 + 0.8 * Math.sin((barProgress + index / barCount) * Math.PI * 2));
+            return {
+                width: thickness,
+                height: `${height}px`,
+                backgroundColor: color,
+                borderRadius: thickness / 2,
+                animationDelay: `${delay}ms`,
+                transition: `height ${duration}ms ${easing}`
+            };
+        });
+    };
+    const style = getSpinnerStyle();
+    return {
+        ref,
+        isVisible,
+        isAnimating,
+        style,
+        progress,
+        start,
+        stop,
+        reset,
+        pause,
+        resume,
+        isLoading,
+        spinnerType: type,
+        rotationAngle,
+        pulseScale,
+        bounceOffset,
+        waveProgress,
+        dotProgress,
+        barProgress,
+        startLoading,
+        stopLoading,
+        setLoadingState
+    };
+}
+//# sourceMappingURL=useLoadingSpinner.js.map

package/dist/hooks/useLoadingSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoadingSpinner.js","sourceRoot":"","sources":["../../src/hooks/useLoadingSpinner.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useMotion.d.ts

@@ -0,0 +1,103 @@
+import { BaseMotionOptions, BaseMotionReturn, MotionElement } from '../types';
+export interface MotionOptions extends BaseMotionOptions {
+    scale?: number | {
+        from: number;
+        to: number;
+    };
+    opacity?: number | {
+        from: number;
+        to: number;
+    };
+    rotate?: number | {
+        from: number;
+        to: number;
+    };
+    translateX?: number | {
+        from: number;
+        to: number;
+    };
+    translateY?: number | {
+        from: number;
+        to: number;
+    };
+    skewX?: number | {
+        from: number;
+        to: number;
+    };
+    skewY?: number | {
+        from: number;
+        to: number;
+    };
+    backgroundColor?: string | {
+        from: string;
+        to: string;
+    };
+    color?: string | {
+        from: string;
+        to: string;
+    };
+    borderColor?: string | {
+        from: string;
+        to: string;
+    };
+    width?: number | string | {
+        from: number | string;
+        to: number | string;
+    };
+    height?: number | string | {
+        from: number | string;
+        to: number | string;
+    };
+    borderRadius?: number | string | {
+        from: number | string;
+        to: number | string;
+    };
+    borderWidth?: number | {
+        from: number;
+        to: number;
+    };
+    boxShadow?: string | {
+        from: string;
+        to: string;
+    };
+    blur?: number | {
+        from: number;
+        to: number;
+    };
+    brightness?: number | {
+        from: number;
+        to: number;
+    };
+    contrast?: number | {
+        from: number;
+        to: number;
+    };
+    grayscale?: number | {
+        from: number;
+        to: number;
+    };
+    hueRotate?: number | {
+        from: number;
+        to: number;
+    };
+    saturate?: number | {
+        from: number;
+        to: number;
+    };
+    sepia?: number | {
+        from: number;
+        to: number;
+    };
+    playOnMount?: boolean;
+    loop?: boolean;
+    yoyo?: boolean;
+    stagger?: number;
+    onUpdate?: (progress: number) => void;
+}
+export declare function useMotion<T extends MotionElement = HTMLDivElement>(options?: MotionOptions): BaseMotionReturn<T> & {
+    play: () => void;
+    reverse: () => void;
+    seek: (progress: number) => void;
+    getValue: (property: string) => any;
+};
+//# sourceMappingURL=useMotion.d.ts.map

package/dist/hooks/useMotion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMotion.d.ts","sourceRoot":"","sources":["../../src/hooks/useMotion.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useMotion.js

@@ -0,0 +1,266 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+export function useMotion(options = {}) {
+    const { duration = 1000, easing = 'ease-out', delay = 0, threshold = 0.1, triggerOnce = true, autoStart = false, playOnMount = false, loop = false, yoyo = false, stagger = 0, scale = { from: 1, to: 1 }, opacity = { from: 1, to: 1 }, rotate = { from: 0, to: 0 }, translateX = { from: 0, to: 0 }, translateY = { from: 0, to: 0 }, skewX = { from: 0, to: 0 }, skewY = { from: 0, to: 0 }, backgroundColor, color, borderColor, width, height, borderRadius, borderWidth, boxShadow, blur = { from: 0, to: 0 }, brightness = { from: 100, to: 100 }, contrast = { from: 100, to: 100 }, grayscale = { from: 0, to: 0 }, hueRotate = { from: 0, to: 0 }, saturate = { from: 100, to: 100 }, sepia = { from: 0, to: 0 }, onComplete, onStart, onStop, onReset, onUpdate } = options;
+    const ref = useRef(null);
+    const [isVisible, setIsVisible] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const [isReversed, setIsReversed] = useState(false);
+    const observerRef = useRef(null);
+    const animationRef = useRef(null);
+    // 값 정규화 함수
+    const normalizeValue = (value) => {
+        if (typeof value === 'object' && 'from' in value && 'to' in value) {
+            return value;
+        }
+        return { from: value, to: value };
+    };
+    // 정규화된 값들
+    const normalizedScale = normalizeValue(scale);
+    const normalizedOpacity = normalizeValue(opacity);
+    const normalizedRotate = normalizeValue(rotate);
+    const normalizedTranslateX = normalizeValue(translateX);
+    const normalizedTranslateY = normalizeValue(translateY);
+    const normalizedSkewX = normalizeValue(skewX);
+    const normalizedSkewY = normalizeValue(skewY);
+    const normalizedBlur = normalizeValue(blur);
+    const normalizedBrightness = normalizeValue(brightness);
+    const normalizedContrast = normalizeValue(contrast);
+    const normalizedGrayscale = normalizeValue(grayscale);
+    const normalizedHueRotate = normalizeValue(hueRotate);
+    const normalizedSaturate = normalizeValue(saturate);
+    const normalizedSepia = normalizeValue(sepia);
+    // 보간 함수
+    const interpolate = (from, to, progress) => {
+        return from + (to - from) * progress;
+    };
+    // 애니메이션 실행 함수
+    const runAnimation = useCallback((startTime, isReverse = false) => {
+        if (!isAnimating)
+            return;
+        const animate = (currentTime) => {
+            if (!isAnimating)
+                return;
+            const elapsed = currentTime - startTime;
+            const currentProgress = Math.min(elapsed / duration, 1);
+            // 진행률 계산 (정방향/역방향)
+            let finalProgress = isReverse ? 1 - currentProgress : currentProgress;
+            // 이징 적용
+            const easedProgress = finalProgress;
+            setProgress(easedProgress);
+            // 업데이트 콜백 호출
+            onUpdate?.(easedProgress);
+            if (currentProgress < 1) {
+                animationRef.current = requestAnimationFrame(animate);
+            }
+            else {
+                // 애니메이션 완료
+                setIsAnimating(false);
+                // 루프 또는 요요 처리
+                if (loop || yoyo) {
+                    if (yoyo) {
+                        setIsReversed(!isReversed);
+                        setTimeout(() => {
+                            if (isAnimating)
+                                return;
+                            setIsAnimating(true);
+                            runAnimation(Date.now(), !isReversed);
+                        }, stagger);
+                    }
+                    else {
+                        setTimeout(() => {
+                            if (isAnimating)
+                                return;
+                            setIsAnimating(true);
+                            runAnimation(Date.now(), isReverse);
+                        }, stagger);
+                    }
+                }
+                else {
+                    onComplete?.();
+                }
+            }
+        };
+        animationRef.current = requestAnimationFrame(animate);
+    }, [isAnimating, duration, loop, yoyo, stagger, onComplete, onUpdate]);
+    // 모션 시작 함수
+    const start = useCallback(() => {
+        if (!isVisible) {
+            setIsVisible(true);
+            setIsAnimating(true);
+            setProgress(0);
+            onStart?.();
+            runAnimation(Date.now(), isReversed);
+        }
+    }, [isVisible, onStart, runAnimation, isReversed]);
+    // 재생 함수
+    const play = useCallback(() => {
+        if (!isAnimating) {
+            setIsAnimating(true);
+            onStart?.();
+            runAnimation(Date.now(), isReversed);
+        }
+    }, [isAnimating, onStart, runAnimation, isReversed]);
+    // 역방향 재생 함수
+    const reverse = useCallback(() => {
+        setIsReversed(!isReversed);
+        if (!isAnimating) {
+            setIsAnimating(true);
+            onStart?.();
+            runAnimation(Date.now(), !isReversed);
+        }
+    }, [isReversed, isAnimating, onStart, runAnimation]);
+    // 진행률 이동 함수
+    const seek = useCallback((targetProgress) => {
+        const clampedProgress = Math.max(0, Math.min(1, targetProgress));
+        setProgress(clampedProgress);
+        onUpdate?.(clampedProgress);
+    }, [onUpdate]);
+    // 특정 속성의 현재 값 가져오기
+    const getValue = useCallback((property) => {
+        const currentProgress = progress;
+        switch (property) {
+            case 'scale':
+                return interpolate(normalizedScale.from, normalizedScale.to, currentProgress);
+            case 'opacity':
+                return interpolate(normalizedOpacity.from, normalizedOpacity.to, currentProgress);
+            case 'rotate':
+                return interpolate(normalizedRotate.from, normalizedRotate.to, currentProgress);
+            case 'translateX':
+                return interpolate(normalizedTranslateX.from, normalizedTranslateX.to, currentProgress);
+            case 'translateY':
+                return interpolate(normalizedTranslateY.from, normalizedTranslateY.to, currentProgress);
+            case 'skewX':
+                return interpolate(normalizedSkewX.from, normalizedSkewX.to, currentProgress);
+            case 'skewY':
+                return interpolate(normalizedSkewY.from, normalizedSkewY.to, currentProgress);
+            case 'blur':
+                return interpolate(normalizedBlur.from, normalizedBlur.to, currentProgress);
+            case 'brightness':
+                return interpolate(normalizedBrightness.from, normalizedBrightness.to, currentProgress);
+            case 'contrast':
+                return interpolate(normalizedContrast.from, normalizedContrast.to, currentProgress);
+            case 'grayscale':
+                return interpolate(normalizedGrayscale.from, normalizedGrayscale.to, currentProgress);
+            case 'hueRotate':
+                return interpolate(normalizedHueRotate.from, normalizedHueRotate.to, currentProgress);
+            case 'saturate':
+                return interpolate(normalizedSaturate.from, normalizedSaturate.to, currentProgress);
+            case 'sepia':
+                return interpolate(normalizedSepia.from, normalizedSepia.to, currentProgress);
+            default:
+                return null;
+        }
+    }, [progress, normalizedScale, normalizedOpacity, normalizedRotate, normalizedTranslateX,
+        normalizedTranslateY, normalizedSkewX, normalizedSkewY, normalizedBlur, normalizedBrightness,
+        normalizedContrast, normalizedGrayscale, normalizedHueRotate, normalizedSaturate, normalizedSepia]);
+    // 모션 중단 함수
+    const stop = useCallback(() => {
+        setIsAnimating(false);
+        if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+        }
+        onStop?.();
+    }, [onStop]);
+    // 모션 리셋 함수
+    const reset = useCallback(() => {
+        setIsVisible(false);
+        setIsAnimating(false);
+        setProgress(0);
+        setIsReversed(false);
+        if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+        }
+        onReset?.();
+    }, [onReset]);
+    // 모션 일시정지 함수
+    const pause = useCallback(() => {
+        setIsAnimating(false);
+        if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+        }
+    }, []);
+    // 모션 재개 함수
+    const resume = useCallback(() => {
+        if (isVisible && !isAnimating) {
+            setIsAnimating(true);
+            runAnimation(Date.now(), isReversed);
+        }
+    }, [isVisible, isAnimating, runAnimation, isReversed]);
+    // Intersection Observer 설정
+    useEffect(() => {
+        if (!ref.current || !autoStart)
+            return;
+        observerRef.current = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    start();
+                    if (triggerOnce) {
+                        observerRef.current?.disconnect();
+                    }
+                }
+            });
+        }, { threshold });
+        observerRef.current.observe(ref.current);
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+        };
+    }, [autoStart, threshold, triggerOnce, start]);
+    // 마운트 시 자동 시작
+    useEffect(() => {
+        if (playOnMount) {
+            start();
+        }
+    }, [playOnMount, start]);
+    // 컴포넌트 언마운트 시 정리
+    useEffect(() => {
+        return () => {
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+            }
+        };
+    }, []);
+    // 현재 진행률에 따른 스타일 계산
+    const style = {
+        transform: `
+      scale(${getValue('scale')})
+      rotate(${getValue('rotate')}deg)
+      translate(${getValue('translateX')}px, ${getValue('translateY')}px)
+      skew(${getValue('skewX')}deg, ${getValue('skewY')}deg)
+    `,
+        opacity: getValue('opacity'),
+        filter: `
+      blur(${getValue('blur')}px)
+      brightness(${getValue('brightness')}%)
+      contrast(${getValue('contrast')}%)
+      grayscale(${getValue('grayscale')}%)
+      hue-rotate(${getValue('hueRotate')}deg)
+      saturate(${getValue('saturate')}%)
+      sepia(${getValue('sepia')}%)
+    `,
+        transition: `all ${duration}ms ${easing}`,
+        willChange: 'transform, opacity, filter'
+    };
+    return {
+        ref,
+        isVisible,
+        isAnimating,
+        style,
+        progress,
+        start,
+        stop,
+        reset,
+        pause,
+        resume,
+        play,
+        reverse,
+        seek,
+        getValue
+    };
+}
+//# sourceMappingURL=useMotion.js.map