```tsx import React, { useState, useEffect, useRef, useMemo } from 'react'; // ---------------------------------------------------------------------- // Constants & Configuration // ---------------------------------------------------------------------- const VIEW_WIDTH = 600; const VIEW_HEIGHT = 1000; // 竖屏 const CYCLE_DURATION = 16000; // 完整动画周期 ms // Color Palette const COLORS = { bg: '#0f172a', // Slate 900 ground: '#1e293b', // Slate 800 grid: '#334155', // Slate 700 concrete: '#94a3b8', // Slate 400 accentCyan: '#06b6d4', accentRed: '#ef4444', accentGreen: '#10b981', accentAmber: '#f59e0b', carBody: '#e2e8f0', glass: 'rgba(56, 189, 248, 0.3)', }; // ---------------------------------------------------------------------- // Math & Easing Helpers // ---------------------------------------------------------------------- const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3); const easeInOutQuad = (t: number) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; const easeOutBack = (t: number) => { const c1 = 1.70158; const c3 = c1 + 1; return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); }; // Isometric Projection: World(x,y,z) -> Screen(x,y) // x: right-down, y: left-down, z: up const iso = (x: number, y: number, z: number) => { const isoX = (x - y) * 0.866; // cos(30°) const isoY = (x + y) * 0.5 - z; // sin(30°) return { x: isoX, y: isoY }; }; // SVG Path Generator for a Cube const IsoCube = ({ x, y, z, w, h, d, fillTop, fillLeft, fillRight, opacity = 1, stroke }: any) => { const p1 = iso(x, y, z + d); // Top-Back const p2 = iso(x + w, y, z + d); // Top-Right const p3 = iso(x + w, y + h, z + d); // Top-Front const p4 = iso(x, y + h, z + d); // Top-Left const p5 = iso(x, y, z); // Bottom-Back (hidden) const p6 = iso(x + w, y, z); // Bottom-Right const p7 = iso(x + w, y + h, z); // Bottom-Front const p8 = iso(x, y + h, z); // Bottom-Left return ( {/* Left Face */} {/* Right Face */} {/* Top Face */} ); }; // ---------------------------------------------------------------------- // Main Component // ---------------------------------------------------------------------- export default function SmartParkingDemo() { const [time, setTime] = useState(0); const startRef = useRef(null); const reqRef = useRef(); // --- Animation Loop --- useEffect(() => { const loop = (timestamp: number) => { if (!startRef.current) startRef.current = timestamp; const elapsed = timestamp - startRef.current; setTime(elapsed % CYCLE_DURATION); reqRef.current = requestAnimationFrame(loop); }; reqRef.current = requestAnimationFrame(loop); return () => { if (reqRef.current) cancelAnimationFrame(reqRef.current); }; }, []); // --- Logic Phases --- // 0-2500: Car Enters // 2500-3500: Wait & Fail // 3500-4500: Zoom In to Island // 4500-5500: Button Press Animation // 5500-7500: Calling UI // 7500-11000: Remote Center (Connect -> Success) // 11000-12000: Zoom Out / Barrier Open // 12000-14000: Car Exits // 14000-16000: Reset / Fade // --- Calculated States --- // 1. Camera Transform (Pan & Zoom) const cameraTransform = useMemo(() => { let scale = 1; let tx = VIEW_WIDTH / 2; let ty = VIEW_HEIGHT / 2 + 100; if (time > 3500 && time < 11000) { // Zoom In const t = time < 4500 ? easeInOutQuad((time - 3500) / 1000) : 1; const targetScale = 2.8; // Focus on Intercom Column (approx world 100, 0, 60) const targetTx = VIEW_WIDTH / 2 - 140; const targetTy = VIEW_HEIGHT / 2 + 500; scale = 1 + (targetScale - 1) * t; tx = (VIEW_WIDTH / 2) + (targetTx - VIEW_WIDTH / 2) * t; ty = (VIEW_HEIGHT / 2 + 100) + (targetTy - (VIEW_HEIGHT / 2 + 100)) * t; } else if (time >= 11000 && time < 12000) { // Zoom Out const t = easeInOutQuad((time - 11000) / 1000); const startScale = 2.8; const startTx = VIEW_WIDTH / 2 - 140; const startTy = VIEW_HEIGHT / 2 + 500; scale = startScale + (1 - startScale) * t; tx = startTx + (VIEW_WIDTH / 2 - startTx) * t; ty = startTy + (VIEW_HEIGHT / 2 + 100 - startTy) * t; } return `translate(${tx}, ${ty}) scale(${scale})`; }, [time]); // 2. Car Position const carPos = useMemo(() => { // Moves along Y axis. Start: -600, Stop: -120 (at barrier), End: 600 if (time < 2500) { const t = easeOutCubic(time / 2500); return -600 + (t * 480); // Ends at -120 } else if (time < 12000) { return -120; // Stopped } else if (time < 14000) { const t = easeInOutQuad((time - 12000) / 2000); return -120 + (t * 720); // Exits } return 600; // Reset }, [time]); // 3. Barrier Rotation const barrierAngle = useMemo(() => { if (time > 11500 && time < 14000) { const t = Math.min(1, (time - 11500) / 500); return -90 * easeOutBack(t); } return 0; }, [time]); // 4. UI Flags const showFailAlert = time > 2500 && time < 6500; const showButtonHand = time > 4800 && time < 5300; const showCallingWave = time > 5300 && time < 8000; const showRemoteHUD = time > 7500 && time < 11000; const remoteConnected = time > 9000; // --- Memoized Static Geometry --- const gridLines = useMemo(() => { const lines = []; const size = 800; const step = 80; for (let i = -size; i <= size; i += step) { const p1 = iso(i, -size, 0); const p2 = iso(i, size, 0); const p3 = iso(-size, i, 0); const p4 = iso(size, i, 0); lines.push(); lines.push(); } return lines; }, []); return (

); } ```