'use client'; import React, { useState, useEffect, useRef } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 400; const WAVE_SPEED = 2; // 波纹扩散速度 const EMISSION_RATE = 15; // 发射频率 (每多少帧发射一次) const MAX_SOURCE_SPEED = 1.2; // 源点移动最大速度 (需小于 WAVE_SPEED 以避免音爆/混乱) export const DopplerEffectView = () => { const [waves, setWaves] = useState([]); const [sourceX, setSourceX] = useState(200); const [velocity, setVelocity] = useState(0); const [phase, setPhase] = useState('static'); // static, accelerating, moving, decelerating, reset // 动画状态引用，用于在 requestAnimationFrame 中保持同步 const stateRef = useRef({ sourceX: 200, velocity: 0, timer: 0, waves: [], // { id, x, y, birthTime } frameCount: 0, phase: 'static' }); useEffect(() => { let animationFrameId; const update = () => { const state = stateRef.current; state.frameCount++; state.timer++; // --- 阶段控制逻辑 --- // 0-120帧: 静止 (Static) if (state.timer < 120) { state.phase = 'static'; state.velocity = 0; } // 120-420帧: 向右加速并移动 (Moving) else if (state.timer < 420) { state.phase = 'moving'; // 平滑加速 if (state.velocity < MAX_SOURCE_SPEED) { state.velocity += 0.02; } state.sourceX += state.velocity; } // 420-500帧: 减速 (Stopping) else if (state.timer < 500) { state.phase = 'stopping'; state.velocity *= 0.9; // 摩擦力减速 state.sourceX += state.velocity; } // 500-560帧: 停止展示 (End) else if (state.timer < 560) { state.velocity = 0; } // 重置循环 else { state.timer = 0; state.sourceX = 200; state.velocity = 0; state.waves = []; // 清空波纹 } // --- 波纹生成逻辑 --- if (state.frameCount % EMISSION_RATE === 0) { state.waves.push({ id: Date.now() + Math.random(), x: state.sourceX, // 波纹产生时的源点位置 y: VIEW_HEIGHT / 2, birthTime: state.frameCount, initVelocity: state.velocity // 记录产生时的速度用于染色 }); } // --- 清理过大的波纹 --- // 半径 = (当前帧 - 出生帧) * 扩散速度 state.waves = state.waves.filter(w => (state.frameCount - w.birthTime) * WAVE_SPEED < VIEW_WIDTH); // --- 同步 React 状态以触发渲染 --- setSourceX(state.sourceX); setVelocity(state.velocity); setWaves([...state.waves]); setPhase(state.phase); animationFrameId = requestAnimationFrame(update); }; update(); return () => cancelAnimationFrame(animationFrameId); }, []); // 计算颜色插值 const getWaveColor = (initVel) => { // 速度越快，红蓝偏移越明显 // 这里我们使用 SVG 渐变，所以只需决定是否应用渐变 return initVel > 0.1 ? "url(#dopplerGradient)" : "rgba(255, 255, 255, 0.6)"; }; return (

0.1 ? 'text-red-400 font-bold' : ''}`}> ← 后方: 波长拉长 (红移)

多普勒效应 (Doppler Effect)

0.1 ? 'text-blue-400 font-bold' : ''}`}> 前方: 波长压缩 (蓝移) →

当源点向右移动时，追赶前方发出的波纹，导致右侧波纹间距变小（频率升高/蓝移）。

同时远离后方发出的波纹，导致左侧波纹间距变大（频率降低/红移）。

); };