@hua-labs/motion-core 2.3.0 → 2.4.1

package/dist/native.cjs

@@ -0,0 +1,692 @@
+'use strict';
+
+var chunkLSIP7MB5_cjs = require('./chunk-LSIP7MB5.cjs');
+var react = require('react');
+var reactNative = require('react-native');
+
+function useFadeIn(options = {}) {
+  const profile = chunkLSIP7MB5_cjs.useMotionProfile();
+  const {
+    duration = profile.base.duration,
+    delay = 0,
+    easing = chunkLSIP7MB5_cjs.getEasing(profile.base.easing) || chunkLSIP7MB5_cjs.easeOut,
+    autoStart = true,
+    useNativeDriver = true,
+    initialOpacity = profile.entrance.fade.initialOpacity,
+    targetOpacity = 1,
+    onComplete,
+    onStart
+  } = options;
+  const opacity = react.useRef(new reactNative.Animated.Value(initialOpacity)).current;
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [isVisible, setIsVisible] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const animRef = react.useRef(null);
+  const start = react.useCallback(() => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    onStart?.();
+    animRef.current = reactNative.Animated.timing(opacity, {
+      toValue: targetOpacity,
+      duration,
+      delay,
+      easing,
+      useNativeDriver
+    });
+    animRef.current.start(({ finished }) => {
+      if (finished) {
+        setIsVisible(true);
+        setIsAnimating(false);
+        setProgress(1);
+        onComplete?.();
+      }
+    });
+  }, [opacity, duration, delay, easing, useNativeDriver, targetOpacity, isAnimating, onStart, onComplete]);
+  const stop = react.useCallback(() => {
+    animRef.current?.stop();
+    setIsAnimating(false);
+  }, []);
+  const reset = react.useCallback(() => {
+    animRef.current?.stop();
+    opacity.setValue(initialOpacity);
+    setIsAnimating(false);
+    setIsVisible(false);
+    setProgress(0);
+  }, [opacity, initialOpacity]);
+  react.useEffect(() => {
+    if (autoStart) start();
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      animRef.current?.stop();
+    };
+  }, []);
+  return {
+    style: { opacity },
+    isVisible,
+    isAnimating,
+    progress,
+    start,
+    stop,
+    reset
+  };
+}
+function useSlideBase(direction, options = {}) {
+  const profile = chunkLSIP7MB5_cjs.useMotionProfile();
+  const {
+    duration = profile.base.duration,
+    delay = 0,
+    easing = chunkLSIP7MB5_cjs.getEasing(profile.entrance.slide.easing) || chunkLSIP7MB5_cjs.easeOut,
+    distance = profile.entrance.slide.distance,
+    autoStart = true,
+    useNativeDriver = true,
+    onComplete,
+    onStart
+  } = options;
+  const isVertical = direction === "up" || direction === "down";
+  const sign = direction === "up" || direction === "left" ? 1 : -1;
+  const initialValue = sign * distance;
+  const translate = react.useRef(new reactNative.Animated.Value(initialValue)).current;
+  const opacity = react.useRef(new reactNative.Animated.Value(0)).current;
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [isVisible, setIsVisible] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const animRef = react.useRef(null);
+  const start = react.useCallback(() => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    onStart?.();
+    animRef.current = reactNative.Animated.parallel([
+      reactNative.Animated.timing(translate, {
+        toValue: 0,
+        duration,
+        delay,
+        easing,
+        useNativeDriver
+      }),
+      reactNative.Animated.timing(opacity, {
+        toValue: 1,
+        duration,
+        delay,
+        easing,
+        useNativeDriver
+      })
+    ]);
+    animRef.current.start(({ finished }) => {
+      if (finished) {
+        setIsVisible(true);
+        setIsAnimating(false);
+        setProgress(1);
+        onComplete?.();
+      }
+    });
+  }, [translate, opacity, duration, delay, easing, useNativeDriver, isAnimating, onStart, onComplete]);
+  const stop = react.useCallback(() => {
+    animRef.current?.stop();
+    setIsAnimating(false);
+  }, []);
+  const reset = react.useCallback(() => {
+    animRef.current?.stop();
+    translate.setValue(initialValue);
+    opacity.setValue(0);
+    setIsAnimating(false);
+    setIsVisible(false);
+    setProgress(0);
+  }, [translate, opacity, initialValue]);
+  react.useEffect(() => {
+    if (autoStart) start();
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      animRef.current?.stop();
+    };
+  }, []);
+  const style = isVertical ? { opacity, transform: [{ translateY: translate }] } : { opacity, transform: [{ translateX: translate }] };
+  return {
+    style,
+    isVisible,
+    isAnimating,
+    progress,
+    start,
+    stop,
+    reset
+  };
+}
+function useSlideUp(options = {}) {
+  return useSlideBase("up", options);
+}
+function useSlideDown(options = {}) {
+  return useSlideBase("down", options);
+}
+function useSlideLeft(options = {}) {
+  return useSlideBase("left", options);
+}
+function useSlideRight(options = {}) {
+  return useSlideBase("right", options);
+}
+function useScaleIn(options = {}) {
+  const profile = chunkLSIP7MB5_cjs.useMotionProfile();
+  const {
+    duration = profile.base.duration,
+    delay = 0,
+    easing = chunkLSIP7MB5_cjs.getEasing(profile.base.easing) || chunkLSIP7MB5_cjs.easeOut,
+    autoStart = true,
+    useNativeDriver = true,
+    initialScale = profile.entrance.scale.from,
+    targetScale = 1,
+    onComplete,
+    onStart
+  } = options;
+  const scale = react.useRef(new reactNative.Animated.Value(initialScale)).current;
+  const opacity = react.useRef(new reactNative.Animated.Value(0)).current;
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [isVisible, setIsVisible] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const animRef = react.useRef(null);
+  const start = react.useCallback(() => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    onStart?.();
+    animRef.current = reactNative.Animated.parallel([
+      reactNative.Animated.timing(scale, {
+        toValue: targetScale,
+        duration,
+        delay,
+        easing,
+        useNativeDriver
+      }),
+      reactNative.Animated.timing(opacity, {
+        toValue: 1,
+        duration,
+        delay,
+        easing,
+        useNativeDriver
+      })
+    ]);
+    animRef.current.start(({ finished }) => {
+      if (finished) {
+        setIsVisible(true);
+        setIsAnimating(false);
+        setProgress(1);
+        onComplete?.();
+      }
+    });
+  }, [scale, opacity, duration, delay, easing, useNativeDriver, targetScale, isAnimating, onStart, onComplete]);
+  const stop = react.useCallback(() => {
+    animRef.current?.stop();
+    setIsAnimating(false);
+  }, []);
+  const reset = react.useCallback(() => {
+    animRef.current?.stop();
+    scale.setValue(initialScale);
+    opacity.setValue(0);
+    setIsAnimating(false);
+    setIsVisible(false);
+    setProgress(0);
+  }, [scale, opacity, initialScale]);
+  react.useEffect(() => {
+    if (autoStart) start();
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      animRef.current?.stop();
+    };
+  }, []);
+  return {
+    style: {
+      opacity,
+      transform: [{ scale }]
+    },
+    isVisible,
+    isAnimating,
+    progress,
+    start,
+    stop,
+    reset
+  };
+}
+function useBounceIn(options = {}) {
+  chunkLSIP7MB5_cjs.useMotionProfile();
+  const {
+    delay = 0,
+    autoStart = true,
+    useNativeDriver = true,
+    initialScale = 0.3,
+    friction = 4,
+    tension = 80,
+    onComplete,
+    onStart
+  } = options;
+  const scale = react.useRef(new reactNative.Animated.Value(initialScale)).current;
+  const opacity = react.useRef(new reactNative.Animated.Value(0)).current;
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [isVisible, setIsVisible] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const animRef = react.useRef(null);
+  const start = react.useCallback(() => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    onStart?.();
+    animRef.current = reactNative.Animated.parallel([
+      reactNative.Animated.spring(scale, {
+        toValue: 1,
+        friction,
+        tension,
+        useNativeDriver,
+        delay
+      }),
+      reactNative.Animated.timing(opacity, {
+        toValue: 1,
+        duration: 200,
+        delay,
+        useNativeDriver
+      })
+    ]);
+    animRef.current.start(({ finished }) => {
+      if (finished) {
+        setIsVisible(true);
+        setIsAnimating(false);
+        setProgress(1);
+        onComplete?.();
+      }
+    });
+  }, [scale, opacity, friction, tension, delay, useNativeDriver, isAnimating, onStart, onComplete]);
+  const stop = react.useCallback(() => {
+    animRef.current?.stop();
+    setIsAnimating(false);
+  }, []);
+  const reset = react.useCallback(() => {
+    animRef.current?.stop();
+    scale.setValue(initialScale);
+    opacity.setValue(0);
+    setIsAnimating(false);
+    setIsVisible(false);
+    setProgress(0);
+  }, [scale, opacity, initialScale]);
+  react.useEffect(() => {
+    if (autoStart) start();
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      animRef.current?.stop();
+    };
+  }, []);
+  return {
+    style: {
+      opacity,
+      transform: [{ scale }]
+    },
+    isVisible,
+    isAnimating,
+    progress,
+    start,
+    stop,
+    reset
+  };
+}
+function useSpringMotion(options) {
+  const profile = chunkLSIP7MB5_cjs.useMotionProfile();
+  const {
+    from,
+    to,
+    friction = Math.sqrt(4 * profile.spring.mass * profile.spring.stiffness) / (2 * profile.spring.damping) * 10 || 26,
+    tension = profile.spring.stiffness / 2 || 170,
+    autoStart = true,
+    useNativeDriver = true,
+    enabled = true,
+    onComplete,
+    onStart
+  } = options;
+  const value = react.useRef(new reactNative.Animated.Value(from)).current;
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const animRef = react.useRef(null);
+  const animateTo = react.useCallback((toValue) => {
+    if (!enabled) return;
+    setIsAnimating(true);
+    onStart?.();
+    animRef.current?.stop();
+    animRef.current = reactNative.Animated.spring(value, {
+      toValue,
+      friction,
+      tension,
+      useNativeDriver
+    });
+    animRef.current.start(({ finished }) => {
+      if (finished) {
+        setIsAnimating(false);
+        onComplete?.();
+      }
+    });
+  }, [value, friction, tension, useNativeDriver, enabled, onStart, onComplete]);
+  const start = react.useCallback(() => {
+    animateTo(to);
+  }, [animateTo, to]);
+  const stop = react.useCallback(() => {
+    animRef.current?.stop();
+    setIsAnimating(false);
+  }, []);
+  const reset = react.useCallback(() => {
+    animRef.current?.stop();
+    value.setValue(from);
+    setIsAnimating(false);
+  }, [value, from]);
+  react.useEffect(() => {
+    if (autoStart && enabled) start();
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      animRef.current?.stop();
+    };
+  }, []);
+  return { value, isAnimating, start, stop, reset, animateTo };
+}
+function usePulse(options = {}) {
+  const {
+    duration = 1500,
+    autoStart = true,
+    useNativeDriver = true,
+    easing = chunkLSIP7MB5_cjs.getEasing("easeInOut") || chunkLSIP7MB5_cjs.easeInOut,
+    minOpacity = 0.3,
+    iterations = -1,
+    onStart
+  } = options;
+  const opacity = react.useRef(new reactNative.Animated.Value(1)).current;
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const animRef = react.useRef(null);
+  const start = react.useCallback(() => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    onStart?.();
+    const pulse = reactNative.Animated.sequence([
+      reactNative.Animated.timing(opacity, {
+        toValue: minOpacity,
+        duration: duration / 2,
+        easing,
+        useNativeDriver
+      }),
+      reactNative.Animated.timing(opacity, {
+        toValue: 1,
+        duration: duration / 2,
+        easing,
+        useNativeDriver
+      })
+    ]);
+    animRef.current = iterations === -1 || iterations === Infinity ? reactNative.Animated.loop(pulse) : reactNative.Animated.loop(pulse, { iterations });
+    animRef.current.start(({ finished }) => {
+      if (finished) setIsAnimating(false);
+    });
+  }, [opacity, duration, easing, useNativeDriver, minOpacity, iterations, isAnimating, onStart]);
+  const stop = react.useCallback(() => {
+    animRef.current?.stop();
+    setIsAnimating(false);
+  }, []);
+  const reset = react.useCallback(() => {
+    animRef.current?.stop();
+    opacity.setValue(1);
+    setIsAnimating(false);
+  }, [opacity]);
+  react.useEffect(() => {
+    if (autoStart) start();
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      animRef.current?.stop();
+    };
+  }, []);
+  return {
+    style: { opacity },
+    isVisible: true,
+    isAnimating,
+    progress: 0,
+    start,
+    stop,
+    reset
+  };
+}
+function useStagger(options) {
+  const profile = chunkLSIP7MB5_cjs.useMotionProfile();
+  const {
+    count,
+    staggerDelay = profile.stagger.perItem,
+    duration = profile.base.duration,
+    easing = chunkLSIP7MB5_cjs.getEasing(profile.base.easing) || chunkLSIP7MB5_cjs.easeOut,
+    autoStart = true,
+    useNativeDriver = true,
+    motionType = "fadeIn",
+    distance = profile.entrance.slide.distance,
+    onComplete,
+    onStart
+  } = options;
+  const [isVisible, setIsVisible] = react.useState(false);
+  const animRef = react.useRef(null);
+  const animatedValues = react.useRef(
+    Array.from({ length: count }, () => ({
+      opacity: new reactNative.Animated.Value(0),
+      translateY: new reactNative.Animated.Value(distance),
+      scale: new reactNative.Animated.Value(0.8)
+    }))
+  ).current;
+  react.useEffect(() => {
+    while (animatedValues.length < count) {
+      animatedValues.push({
+        opacity: new reactNative.Animated.Value(0),
+        translateY: new reactNative.Animated.Value(distance),
+        scale: new reactNative.Animated.Value(0.8)
+      });
+    }
+  }, [count, animatedValues, distance]);
+  const start = react.useCallback(() => {
+    setIsVisible(false);
+    onStart?.();
+    const animations = animatedValues.slice(0, count).map((v) => {
+      const itemAnims = [
+        reactNative.Animated.timing(v.opacity, {
+          toValue: 1,
+          duration,
+          easing,
+          useNativeDriver
+        })
+      ];
+      if (motionType === "slideUp") {
+        itemAnims.push(
+          reactNative.Animated.timing(v.translateY, {
+            toValue: 0,
+            duration,
+            easing,
+            useNativeDriver
+          })
+        );
+      } else if (motionType === "scaleIn") {
+        itemAnims.push(
+          reactNative.Animated.timing(v.scale, {
+            toValue: 1,
+            duration,
+            easing,
+            useNativeDriver
+          })
+        );
+      }
+      return reactNative.Animated.parallel(itemAnims);
+    });
+    animRef.current = reactNative.Animated.stagger(staggerDelay, animations);
+    animRef.current.start(({ finished }) => {
+      if (finished) {
+        setIsVisible(true);
+        onComplete?.();
+      }
+    });
+  }, [animatedValues, count, staggerDelay, duration, easing, useNativeDriver, motionType, onStart, onComplete]);
+  const stop = react.useCallback(() => {
+    animRef.current?.stop();
+  }, []);
+  const reset = react.useCallback(() => {
+    animRef.current?.stop();
+    animatedValues.forEach((v) => {
+      v.opacity.setValue(0);
+      v.translateY.setValue(distance);
+      v.scale.setValue(0.8);
+    });
+    setIsVisible(false);
+  }, [animatedValues, distance]);
+  react.useEffect(() => {
+    if (autoStart) start();
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      animRef.current?.stop();
+    };
+  }, []);
+  const items = react.useMemo(() => {
+    return animatedValues.slice(0, count).map((v) => {
+      if (motionType === "slideUp") {
+        return { style: { opacity: v.opacity, transform: [{ translateY: v.translateY }] } };
+      }
+      if (motionType === "scaleIn") {
+        return { style: { opacity: v.opacity, transform: [{ scale: v.scale }] } };
+      }
+      return { style: { opacity: v.opacity } };
+    });
+  }, [animatedValues, count, motionType]);
+  return { items, isVisible, start, stop, reset };
+}
+
+Object.defineProperty(exports, "MOTION_PRESETS", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.MOTION_PRESETS; }
+});
+Object.defineProperty(exports, "MotionEngine", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.MotionEngine; }
+});
+Object.defineProperty(exports, "MotionProfileProvider", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.MotionProfileProvider; }
+});
+Object.defineProperty(exports, "MotionStateManager", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.MotionStateManager; }
+});
+Object.defineProperty(exports, "PAGE_MOTIONS", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.PAGE_MOTIONS; }
+});
+Object.defineProperty(exports, "TransitionEffects", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.TransitionEffects; }
+});
+Object.defineProperty(exports, "applyEasing", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.applyEasing; }
+});
+Object.defineProperty(exports, "calculateSpring", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.calculateSpring; }
+});
+Object.defineProperty(exports, "easeIn", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.easeIn; }
+});
+Object.defineProperty(exports, "easeInOut", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.easeInOut; }
+});
+Object.defineProperty(exports, "easeInOutQuad", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.easeInOutQuad; }
+});
+Object.defineProperty(exports, "easeInQuad", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.easeInQuad; }
+});
+Object.defineProperty(exports, "easeOut", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.easeOut; }
+});
+Object.defineProperty(exports, "easeOutQuad", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.easeOutQuad; }
+});
+Object.defineProperty(exports, "easingPresets", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.easingPresets; }
+});
+Object.defineProperty(exports, "getAvailableEasings", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.getAvailableEasings; }
+});
+Object.defineProperty(exports, "getEasing", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.getEasing; }
+});
+Object.defineProperty(exports, "getMotionPreset", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.getMotionPreset; }
+});
+Object.defineProperty(exports, "getPagePreset", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.getPagePreset; }
+});
+Object.defineProperty(exports, "getPresetEasing", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.getPresetEasing; }
+});
+Object.defineProperty(exports, "hua", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.hua; }
+});
+Object.defineProperty(exports, "isEasingFunction", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.isEasingFunction; }
+});
+Object.defineProperty(exports, "isValidEasing", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.isValidEasing; }
+});
+Object.defineProperty(exports, "linear", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.linear; }
+});
+Object.defineProperty(exports, "mergeProfileOverrides", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.mergeProfileOverrides; }
+});
+Object.defineProperty(exports, "mergeWithPreset", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.mergeWithPreset; }
+});
+Object.defineProperty(exports, "motionEngine", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.motionEngine; }
+});
+Object.defineProperty(exports, "neutral", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.neutral; }
+});
+Object.defineProperty(exports, "resolveProfile", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.resolveProfile; }
+});
+Object.defineProperty(exports, "safeApplyEasing", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.safeApplyEasing; }
+});
+Object.defineProperty(exports, "transitionEffects", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.transitionEffects; }
+});
+Object.defineProperty(exports, "useMotionProfile", {
+  enumerable: true,
+  get: function () { return chunkLSIP7MB5_cjs.useMotionProfile; }
+});
+exports.useBounceIn = useBounceIn;
+exports.useFadeIn = useFadeIn;
+exports.usePulse = usePulse;
+exports.useScaleIn = useScaleIn;
+exports.useSlideDown = useSlideDown;
+exports.useSlideLeft = useSlideLeft;
+exports.useSlideRight = useSlideRight;
+exports.useSlideUp = useSlideUp;
+exports.useSpringMotion = useSpringMotion;
+exports.useStagger = useStagger;
+//# sourceMappingURL=native.cjs.map
+//# sourceMappingURL=native.cjs.map