```jsx 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // --- 常量定义 --- const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 600; const COLOR_BG = '#0f172a'; // 深色背景 (Slate 900) const COLOR_CYAN = '#06b6d4'; // 科技蓝 (Cyan 500) const COLOR_MAGENTA = '#d946ef'; // 霓虹紫 (Fuchsia 500) const COLOR_GRID = '#1e293b'; // 网格色 (Slate 800) // --- 辅助 Hook: 动画循环 --- const useAnimationFrame = (callback) => { const requestRef = useRef(); const previousTimeRef = useRef(); const animate = (time) => { if (previousTimeRef.current !== undefined) { const deltaTime = time - previousTimeRef.current; callback(time, deltaTime); } previousTimeRef.current = time; requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [callback]); }; // --- 几何生成辅助函数 --- const generateDigitalMountains = (count, width, height) => { // 生成低多边形风格的山脉 let points = []; const segmentWidth = width / count; for (let i = 0; i <= count; i++) { points.push({ x: i * segmentWidth, y: height - Math.random() * 150 - 50, // 随机高度 }); } return points; }; const generateStars = (count) => { return Array.from({ length: count }).map(() => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * (VIEW_HEIGHT * 0.6), size: Math.random() * 2, opacity: Math.random(), blinkSpeed: 0.002 + Math.random() * 0.005 })); }; export default function CyberSprintAnimation() { const [time, setTime] = useState(0); const [elapsed, setElapsed] = useState(0); // --- 静态资源 (Memoized) --- const mountains = useMemo(() => generateDigitalMountains(8, VIEW_WIDTH + 200, VIEW_HEIGHT * 0.6), []); const stars = useMemo(() => generateStars(60), []); // HUD 模拟数据 const [heartRate, setHeartRate] = useState(120); useAnimationFrame((t, dt) => { setTime(t / 1000); // 秒 setElapsed(prev => prev + dt / 1000); // 模拟心率波动 if (Math.random() > 0.95) { setHeartRate(120 + Math.floor(Math.random() * 15)); } }); // --- 运动学逻辑 (Kinematics) --- const speed = 12; // 跑步频率 const runnerX = VIEW_WIDTH * 0.35; // 跑者在屏幕的位置 const groundY = VIEW_HEIGHT * 0.8; // 身体垂直弹跳 const bounce = Math.abs(Math.sin(time * speed)) * 15; const torsoY = groundY - 150 - bounce; // 计算肢体坐标的函数 // phaseOffset: 0 for right side, PI for left side const getLimbCoords = (phaseOffset, isArm) => { const t = time * speed + phaseOffset; // 基础角度计算 const swingBase = isArm ? Math.sin(t) : Math.cos(t); const swingRange = isArm ? 0.9 : 1.1; // 腿部摆动幅度更大 // 大腿/大臂角度 const angle1 = swingBase * swingRange + (isArm ? 0.2 : 0); // 手臂稍微前倾 // 小腿/小臂角度 (引入相位差以模拟关节弯曲) let angle2; if (isArm) { // 手臂逻辑：肘部始终弯曲 angle2 = angle1 + 1.8 + Math.sin(t) * 0.2; } else { // 腿部逻辑：抬腿时膝盖弯曲，蹬地时伸直 // 复杂的跑步步态模拟 const kneeBend = Math.max(0, -Math.sin(t)); // 只有在向后摆动抬起时才大幅弯曲 angle2 = angle1 + 0.2 + kneeBend * 2.0; } const len1 = isArm ? 45 : 60; // 上肢长度 const len2 = isArm ? 40 : 60; // 下肢长度 // 起点 (肩膀或髋部) const originX = runnerX + (isArm ? 5 : 0); // 肩膀稍微靠前 const originY = isArm ? torsoY - 25 : torsoY + 30; // 肩膀高，髋部低 // 关节1 (肘/膝) const j1x = originX + Math.sin(angle1) * len1; const j1y = originY + Math.cos(angle1) * len1; // 关节2 (手/脚) const j2x = j1x + Math.sin(angle2) * len2; const j2y = j1y + Math.cos(angle2) * len2; return { originX, originY, j1x, j1y, j2x, j2y }; }; const leftLeg = getLimbCoords(Math.PI, false); const rightLeg = getLimbCoords(0, false); const leftArm = getLimbCoords(0, true); // 左臂与右腿同步 const rightArm = getLimbCoords(Math.PI, true); // 右臂与左腿同步 // 背景移动速度 const mountainSpeed = 30; const groundSpeed = 400; return (

{/* 扫描线覆盖层 (增加复古感) */}

); } ```