fix: 修改红包雨降落动画

src/components/Box/RedPacketModal.tsx

@@ -228,7 +228,7 @@ interface SnowfallProps {
     onClose: () => void;
 }
 
-const Snowfall: FC<SnowfallProps> = ({ images, snowflakeCount = 200, onClose = () => {} }) => {
+const Snowfall: FC<SnowfallProps> = ({ images, snowflakeCount = 300, onClose = () => {} }) => {
     //     canvas
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
     // 预加载图片
@@ -240,16 +240,16 @@ const Snowfall: FC<SnowfallProps> = ({ images, snowflakeCount = 200, onClose = (
         return Array.from({ length: count }, () => ({
             x: Math.random() * width,
             y: Math.random() * height - height,
-            scale: Math.random() * (1.2 - 0.3) + 0.3,
+            scale: Math.random() * (1.2 - 0.5) + 0.5,
             speedX: Math.random() * 1.5 - 0.75,
-            speedY: Math.random() * 3 + 1,
+            speedY: Math.random() * 5 + 1,
             rotate: Math.random() * 180,
             rotateSpeed: Math.random() * 2 - 1,
             image: imageElements.current[Math.floor(Math.random() * imageElements.current.length)],
         }));
     };
     useEffect(() => {
-        // Preload images
+        // 预加载图片
         imageElements.current = images.map((src) => {
             const img = new Image();
             img.src = src;
@@ -262,8 +262,11 @@ const Snowfall: FC<SnowfallProps> = ({ images, snowflakeCount = 200, onClose = (
         const ctx = canvas.getContext("2d");
         if (!ctx) return;
 
-        const width = (canvas.width = containerRef.current?.clientWidth || 0);
-        const height = (canvas.height = containerRef.current?.clientHeight || 0);
+        const parentWidth = containerRef.current?.clientWidth || 0;
+        const parentHeight = (canvas.height = containerRef.current?.clientHeight || 0);
+
+        const width = (canvas.width = parentWidth);
+        const height = (canvas.height = parentHeight);
 
         let snowflakes: Snowflake[] = createSnowflakes(snowflakeCount, width, height);
 
@@ -303,9 +306,8 @@ const Snowfall: FC<SnowfallProps> = ({ images, snowflakeCount = 200, onClose = (
         animate();
 
         const handleResize = () => {
-            canvas.width = containerRef.current?.clientWidth || 0;
-            console.dir(containerRef.current);
-            canvas.height = containerRef.current?.clientHeight || 0;
+            canvas.width = parentWidth;
+            canvas.height = parentHeight;
             snowflakes = createSnowflakes(snowflakeCount, canvas.width, canvas.height);
         };