feat: 新增饮水记录功能，支持快速添加饮水量和用户偏好设置

components/AnimatedNumber.tsx

@@ -18,15 +18,26 @@ export function AnimatedNumber({
   resetToken,
 }: AnimatedNumberProps) {
   const opacity = useRef(new Animated.Value(1)).current;
-  const [display, setDisplay] = useState<string>('0');
-  const [currentValue, setCurrentValue] = useState(0);
+  const [display, setDisplay] = useState<string>(() =>
+    format ? format(value) : `${Math.round(value)}`
+  );
+  const [currentValue, setCurrentValue] = useState(value);
+  const [lastResetToken, setLastResetToken] = useState(resetToken);
+  const [isAnimating, setIsAnimating] = useState(false);
 
   useEffect(() => {
-    // 如果值没有变化，不执行动画
-    if (value === currentValue && resetToken === undefined) {
+    // 检查是否需要触发动画
+    const valueChanged = value !== currentValue;
+    const resetTokenChanged = resetToken !== lastResetToken;
+
+    // 如果值没有变化且resetToken也没有变化，或者正在动画中，则不执行新动画
+    if ((!valueChanged && !resetTokenChanged) || isAnimating) {
       return;
     }
 
+    // 标记开始动画
+    setIsAnimating(true);
+
     // 停止当前动画
     opacity.stopAnimation(() => {
       // 创建优雅的透明度变化动画
@@ -48,22 +59,17 @@ export function AnimatedNumber({
       fadeOut.start(() => {
         // 更新当前值和显示
         setCurrentValue(value);
+        setLastResetToken(resetToken);
         setDisplay(format ? format(value) : `${Math.round(value)}`);
 
         // 然后淡入新数字
-        fadeIn.start();
+        fadeIn.start(() => {
+          // 动画完成，标记结束
+          setIsAnimating(false);
+        });
       });
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, resetToken]);
-
-  // 初始化显示值
-  useEffect(() => {
-    if (currentValue !== value) {
-      setCurrentValue(value);
-      setDisplay(format ? format(value) : `${Math.round(value)}`);
-    }
-  }, [value, format, currentValue]);
+  }, [value, resetToken, currentValue, lastResetToken, isAnimating, durationMs, format]);
 
   return (
     <Animated.Text