```javascript 'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; // 视图与布局常量 const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_Y = VIEW_HEIGHT / 2; const OPTICAL_AXIS_Y = CENTER_Y; // 组件位置定义 const POS_SUBJECT = 120; const POS_LENS_GROUP = 450; const POS_SENSOR = 750; const POS_ISP = 880; const POS_SCREEN = 960; // 屏幕边缘 // 颜色定义（适配 #e4e6ec 背景） const COLORS = { bg: '#e4e6ec', grid: '#cbd5e1', text: '#475569', textLight: '#94a3b8', primary: '#0ea5e9', // 科技蓝 accent: '#f59e0b', // 警示/活跃橙 success: '#10b981', // 成功绿 dark: '#1e293b', // 深色组件 rayStart: 'rgba(236, 72, 153, 0.6)', // 粉色光线起点 rayEnd: 'rgba(59, 130, 246, 0.8)', // 蓝色光线终点 }; export default function CameraImagingSchematic() { // 状态管理 const [phase, setPhase] = useState('idle'); // idle, focusing, exposure, readout, processing, saved const [lensFocusOffset, setLensFocusOffset] = useState(0); // 镜头对焦移动 const [shutterState, setShutterState] = useState(1); // 1: open, 0: closed const [sensorData, setSensorData] = useState(0); // 传感器读取进度 0-100 const [ispProgress, setIspProgress] = useState(0); // ISP处理进度 0-100 // 动画循环控制 useEffect(() => { let isMounted = true; let focusInterval; const runSequence = async () => { if (!isMounted) return; // --- 阶段 1: 自动对焦 (AF) --- setPhase('focusing'); setShutterState(1); setSensorData(0); setIspProgress(0); // 模拟马达驱动镜头前后搜索 (反差对焦模拟) const startTime = Date.now(); focusInterval = setInterval(() => { const t = Date.now() - startTime; // 阻尼正弦波模拟镜头寻找焦点 const pos = Math.sin(t * 0.008) * 25 * Math.exp(-t * 0.001); setLensFocusOffset(pos); }, 16); await wait(2200); clearInterval(focusInterval); setLensFocusOffset(0); // 锁定焦点 // --- 阶段 2: 曝光 (Exposure) --- setPhase('exposure'); // 机械快门动作：前帘关闭 -> 开启曝光 -> 后帘关闭 setShutterState(0); // Reset await wait(100); setShutterState(1); // Expose await wait(300); // Exposure time setShutterState(0); // Close await wait(150); // --- 阶段 3: 传感器读出 (Readout) --- setPhase('readout'); // 模拟逐行读取 for (let i = 0; i <= 100; i += 5) { setSensorData(i); await wait(20); } setShutterState(1); // 恢复取景 // --- 阶段 4: ISP 处理 (Processing) --- setPhase('processing'); // 模拟数据进入ISP处理 for (let i = 0; i <= 100; i += 2) { setIspProgress(i); await wait(15); } // --- 阶段 5: 存储/显示 (Saved) --- setPhase('saved'); await wait(3000); // 循环 if (isMounted) runSequence(); }; runSequence(); return () => { isMounted = false; clearInterval(focusInterval); }; }, []); const wait = (ms) => new Promise(r => setTimeout(r, ms)); // 光线计算逻辑 const rays = useMemo(() => { const count = 7; return Array.from({ length: count }).map((_, i) => { const offset = (i - (count - 1) / 2) * 18; // 物体高度 const yObj = CENTER_Y + offset; // 经过透镜折射后的位置 (简单模拟：倒像) // 镜头移动会影响光线汇聚点，这里模拟焦平面变化 const focusError = lensFocusOffset * 0.5; const ySensor = CENTER_Y - (offset * 0.6) + focusError; return { id: i, yObj, ySensor, colorOffset: i }; }); }, [lensFocusOffset]); return (

); } ```