```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 450; const BLOCK_SIZE = 40; const GRID_COLS = 14; const GRID_ROWS = 5; const TOTAL_BLOCKS = GRID_COLS * GRID_ROWS; // 动画阶段枚举 const PHASE = { RAINING: 0, STABILIZE: 1, SHOW_1x1: 2, SHOW_2x2: 3, RESET: 4, }; export default function GeometryRain() { // 渲染状态：用于触发组件重绘 // 我们只存储可视化的必要数据，避免冗余 const [blocks, setBlocks] = useState([]); const [phase, setPhase] = useState(PHASE.RAINING); const [globalAlpha, setGlobalAlpha] = useState(1); // 动画核心状态 Ref (不触发重绘) const stateRef = useRef({ blocks: [], // 物理状态 { x, y, vy, targetX, targetY, landed, delay } startTime: 0, phaseStartTime: 0, currentPhase: PHASE.RAINING, highlightIdx1: -1, // 1x1 演示的目标索引 highlightIdx4: [], // 2x2 演示的目标索引数组 }); const requestRef = useRef(); // 初始化数据 useEffect(() => { // 计算网格偏移，使其居中 const gridWidth = GRID_COLS * BLOCK_SIZE; const startX = (VIEW_WIDTH - gridWidth) / 2; const floorY = VIEW_HEIGHT - 50; const initialBlocks = []; // 生成网格目标位置 for (let r = 0; r < GRID_ROWS; r++) { for (let c = 0; c < GRID_COLS; c++) { const targetX = startX + c * BLOCK_SIZE; const targetY = floorY - (GRID_ROWS - 1 - r) * BLOCK_SIZE; // 从下往上堆叠 initialBlocks.push({ id: r * GRID_COLS + c, x: targetX, y: -100 - Math.random() * 600, // 随机初始高度 vy: 0, targetX, targetY, landed: false, delay: Math.random() * 1000, // 随机下落延迟 colorHue: 200 + Math.random() * 40, // 科技蓝/青色范围 opacity: 0.8 + Math.random() * 0.2, }); } } // 选择演示用的方块索引 // 找一个中间靠下的位置做 1x1 const centerCol = Math.floor(GRID_COLS / 2); const centerRow = 1; // 倒数第二排 const idx1 = centerRow * GRID_COLS + centerCol - 3; // 找一个 2x2 的位置 const idx2_tl = 2 * GRID_COLS + centerCol + 2; // Top-Left const idx2_tr = idx2_tl + 1; const idx2_bl = idx2_tl - GRID_COLS; const idx2_br = idx2_tl - GRID_COLS + 1; stateRef.current = { blocks: initialBlocks, startTime: performance.now(), phaseStartTime: performance.now(), currentPhase: PHASE.RAINING, highlightIdx1: idx1, highlightIdx4: [idx2_bl, idx2_br, idx2_tl, idx2_tr], // 注意顺序，为了方便画框 }; setBlocks(initialBlocks); // 启动循环 const animate = (time) => { const state = stateRef.current; const dt = time - state.phaseStartTime; let needsUpdate = false; // --- 状态机逻辑 --- // 1. 下落阶段 if (state.currentPhase === PHASE.RAINING) { let allLanded = true; state.blocks.forEach(b => { // 延迟启动 if (time - state.startTime < b.delay) { allLanded = false; return; } if (!b.landed) { // 简单的重力物理 b.vy += 0.8; // 重力 b.y += b.vy; // 撞击地面检测 if (b.y >= b.targetY) { b.y = b.targetY; b.vy = -b.vy * 0.3; // 弹性反弹 if (Math.abs(b.vy) < 1) { b.landed = true; b.y = b.targetY; } } allLanded = false; needsUpdate = true; } else { // 确保微调对齐 if (Math.abs(b.y - b.targetY) > 0.1) { b.y += (b.targetY - b.y) * 0.2; needsUpdate = true; } } }); // 如果所有方块都稳定了，或者时间超过一定限制，进入下一阶段 if (allLanded && dt > 3000) { state.currentPhase = PHASE.STABILIZE; state.phaseStartTime = time; setPhase(PHASE.STABILIZE); } } // 2. 稳定过渡期 else if (state.currentPhase === PHASE.STABILIZE) { if (dt > 1000) { state.currentPhase = PHASE.SHOW_1x1; state.phaseStartTime = time; setPhase(PHASE.SHOW_1x1); } } // 3. 展示 1x1 else if (state.currentPhase === PHASE.SHOW_1x1) { if (dt > 4000) { state.currentPhase = PHASE.SHOW_2x2; state.phaseStartTime = time; setPhase(PHASE.SHOW_2x2); } } // 4. 展示 2x2 else if (state.currentPhase === PHASE.SHOW_2x2) { if (dt > 5000) { state.currentPhase = PHASE.RESET; state.phaseStartTime = time; setPhase(PHASE.RESET); } } // 5. 重置/淡出 else if (state.currentPhase === PHASE.RESET) { // 淡出效果通过 React state 控制 globalAlpha const alpha = Math.max(0, 1 - dt / 1000); setGlobalAlpha(alpha); if (dt > 1500) { // 重置逻辑 state.blocks.forEach(b => { b.y = -100 - Math.random() * 600; b.vy = 0; b.landed = false; b.delay = Math.random() * 1000; }); state.currentPhase = PHASE.RAINING; state.startTime = time; state.phaseStartTime = time; setPhase(PHASE.RAINING); setGlobalAlpha(1); } } // 只要不是完全静止，就触发渲染更新 // 在 RESET 阶段虽然物理不动，但透明度在变，这里通过 setGlobalAlpha 触发了 // 在 RAINING 阶段 needsUpdate 为 true if (needsUpdate || state.currentPhase !== PHASE.STABILIZE) { // 浅拷贝触发更新 setBlocks([...state.blocks]); } requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // 依赖空数组，确保只运行一次 // 辅助计算：高亮框的位置 const getHighlightBox1 = () => { if (stateRef.current.highlightIdx1 === -1) return null; const target = blocks[stateRef.current.highlightIdx1]; if (!target) return null; return { x: target.x, y: target.y, s: BLOCK_SIZE }; }; const getHighlightBox4 = () => { const indices = stateRef.current.highlightIdx4; if (indices.length === 0) return null; const target = blocks[indices[2]]; // 左上角的方块 (Top-Left) if (!target) return null; // 2x2 的起始点就是左上角方块的坐标，宽高是 2 * BLOCK_SIZE return { x: target.x, y: target.y, s: BLOCK_SIZE * 2 }; }; const box1 = getHighlightBox1(); const box4 = getHighlightBox4(); // 动态生成背景网格线 const GridLines = useMemo(() => { return ( {Array.from({ length: 20 }).map((_, i) => ( ))} {Array.from({ length: 15 }).map((_, i) => ( ))} ); }, []); return (

); } ```