Preparación Legislativas Nacionales 2025

Elecciones-Web/frontend/src/features/legislativas/nacionales/hooks/useAnimatedNumber.ts

@@ -0,0 +1,44 @@
+// src/features/legislativas/nacionales/components/hooks/useAnimatedNumber.ts
+import { useState, useEffect, useRef } from 'react';
+
+const easeOutQuad = (t: number) => t * (2 - t);
+
+export const useAnimatedNumber = (
+  endValue: number,
+  duration: number = 700 // Duración de la animación en milisegundos
+) => {
+  const [currentValue, setCurrentValue] = useState(endValue);
+  const previousValueRef = useRef(endValue);
+
+  useEffect(() => {
+    const startValue = previousValueRef.current;
+    let animationFrameId: number;
+    const startTime = Date.now();
+
+    const animate = () => {
+      const elapsedTime = Date.now() - startTime;
+      const progress = Math.min(elapsedTime / duration, 1);
+      const easedProgress = easeOutQuad(progress);
+
+      const newAnimatedValue = startValue + (endValue - startValue) * easedProgress;
+      setCurrentValue(newAnimatedValue);
+
+      if (progress < 1) {
+        animationFrameId = requestAnimationFrame(animate);
+      } else {
+        // Asegurarse de que el valor final sea exacto
+        setCurrentValue(endValue);
+        previousValueRef.current = endValue;
+      }
+    };
+
+    animationFrameId = requestAnimationFrame(animate);
+
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      previousValueRef.current = endValue;
+    };
+  }, [endValue, duration]);
+
+  return currentValue;
+};