'use client'; import React, { useState, useEffect, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BG_COLOR = "#0f172a"; // 几何参数定义 const GEOMETRY = { sourceX: 150, barrierX: 500, screenX: 850, holeY: 300, objectHeight: 160, // 简单的相似三角形原理计算投影高度 (这里距离相等，所以是 1:1) projectionHeight: 160, }; export default function PinholeCameraAnimation() { const [animationState, setAnimationState] = useState(0); // 动画阶段控制 useEffect(() => { const sequence = [ { time: 500, state: 1 }, // 物体出现 { time: 1500, state: 2 }, // 光线发射 { time: 3500, state: 3 }, // 成像出现 { time: 4500, state: 4 }, // 标注显示 ]; let timeouts: NodeJS.Timeout[] = []; sequence.forEach(({ time, state }) => { const t = setTimeout(() => setAnimationState(s => Math.max(s, state)), time); timeouts.push(t); }); return () => timeouts.forEach(clearTimeout); }, []); // 计算关键点坐标 const points = useMemo(() => { const { sourceX, barrierX, screenX, holeY, objectHeight, projectionHeight } = GEOMETRY; // 物体上下点 const objTop = { x: sourceX, y: holeY - objectHeight / 2 }; const objBottom = { x: sourceX, y: holeY + objectHeight / 2 }; // 投影上下点 (倒立) const projTop = { x: screenX, y: holeY + projectionHeight / 2 }; // 对应物体的顶部，但在下方 const projBottom = { x: screenX, y: holeY - projectionHeight / 2 }; // 对应物体的底部，但在上方 // 孔的位置 const hole = { x: barrierX, y: holeY }; return { objTop, objBottom, projTop, projBottom, hole }; }, []); return (

); }