'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const GROUND_Y = 500; // 辅助函数：生成随机山脉路径 const generateMountainPath = (width: number, height: number, peaks: number, complexity: number) => { let d = `M0 ${height}`; const step = width / peaks; for (let i = 0; i <= peaks; i++) { const x = i * step; // 随机高度，叠加正弦波使山脉更自然 const y = height - (Math.random() * complexity + 50) - Math.sin(i) * 20; d += ` L${x} ${y}`; } d += ` L${width} ${height} Z`; return d; }; // 辅助函数：生成星星 const generateStars = (count: number) => { return Array.from({ length: count }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * (VIEW_HEIGHT / 1.5), size: Math.random() * 2 + 0.5, opacity: Math.random(), speed: Math.random() * 0.5 + 0.1 })); }; export const CyberRunnerAnimation = () => { const [time, setTime] = useState(0); const requestRef = useRef(); // 静态资源：星星和山脉形状 const stars = useMemo(() => generateStars(80), []); const mountainBack = useMemo(() => generateMountainPath(2000, GROUND_Y, 20, 150), []); const mountainFront = useMemo(() => generateMountainPath(2000, GROUND_Y, 15, 80), []); // 动画循环 const animate = (t: number) => { // 使用 t 控制速度，0.005 是基准速度因子 setTime(t * 0.005); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // --- 跑步者运动学计算 --- // 跑步循环频率 const runSpeed = 2.5; const t = time * runSpeed; // 身体上下起伏 (Bobbing) const bodyY = GROUND_Y - 140 + Math.sin(t * 2) * 5; const centerX = VIEW_WIDTH / 2; // 肢体参数 const thighLen = 45; const shinLen = 45; const armLen = 35; const forearmLen = 30; // 计算关节角度 (简单的正弦波驱动) // 相位差 PI 确保左右肢体交替 const leftLegPhase = t; const rightLegPhase = t + Math.PI; const leftArmPhase = t + Math.PI; // 左臂伴随右腿 const rightArmPhase = t; // 右臂伴随左腿 const getLegPoints = (phase: number, hipX: number, hipY: number) => { // 大腿角度：在 -45度到 45度之间摆动 const thighAngle = Math.sin(phase) * 0.8; // 小腿角度：跑步时回收腿部会弯曲膝盖 // 当腿向后摆动时(sin > 0)，膝盖弯曲更多 const kneeBend = Math.max(0, Math.sin(phase - 0.5)) * 1.5 + 0.2; const kneeX = hipX + Math.sin(thighAngle) * thighLen; const kneeY = hipY + Math.cos(thighAngle) * thighLen; const footX = kneeX + Math.sin(thighAngle - kneeBend) * shinLen; const footY = kneeY + Math.cos(thighAngle - kneeBend) * shinLen; return { kneeX, kneeY, footX, footY }; }; const getArmPoints = (phase: number, shoulderX: number, shoulderY: number) => { const armAngle = Math.sin(phase) * 0.7; const elbowBend = 1.0; // 手臂总是弯曲的 const elbowX = shoulderX + Math.sin(armAngle) * armLen; const elbowY = shoulderY + Math.cos(armAngle) * armLen; const handX = elbowX + Math.sin(armAngle + elbowBend) * forearmLen; const handY = elbowY + Math.cos(armAngle + elbowBend) * forearmLen; return { elbowX, elbowY, handX, handY }; }; const lLeg = getLegPoints(leftLegPhase, centerX, bodyY + 30); const rLeg = getLegPoints(rightLegPhase, centerX, bodyY + 30); const lArm = getArmPoints(leftArmPhase, centerX, bodyY - 20); const rArm = getArmPoints(rightArmPhase, centerX, bodyY - 20); // --- 背景视差计算 --- const mountainBackX = -(time * 20) % 1000; const mountainFrontX = -(time * 50) % 1000; const groundGridOffset = (time * 200) % 100; // --- 速度线 (Wind Lines) --- const windLines = useMemo(() => { return Array.from({ length: 10 }).map((_, i) => ({ y: Math.random() * VIEW_HEIGHT, width: Math.random() * 100 + 50, speed: Math.random() * 2 + 1, delay: Math.random() * 10 })); }, []); return (

); };