import React, { useState, useEffect, useRef, useMemo } from 'react'; const WIDTH = 1200; const HEIGHT = 700; const BACKGROUND_COLOR = '#0f172a'; const PRIMARY_COLOR = '#0ea5e9'; // Sky blue const SECONDARY_COLOR = '#8b5cf6'; // Violet const ACCENT_COLOR = '#f59e0b'; // Amber const TEXT_COLOR = '#e2e8f0'; export default function FourierTransformAnimation() { // 核心动画状态 // harmonicsCount: 当前叠加的正弦波数量 (1, 3, 5, 7, 9...) const [harmonicsCount, setHarmonicsCount] = useState(1); // 用于强制渲染的帧状态 (尽量包含所有变动数据以减少state数量) const [frameData, setFrameData] = useState({ circles: [], // 存储每个圆的 {x, y, r, angle, label} wavePath: "", // 时域波形的 SVG Path d 属性 tip: { x: 0, y: 0 }, // 最终向量尖端位置 }); // 使用 ref 存储不触发渲染但参与计算的数据 const timeRef = useRef(0); const waveYRef = useRef([]); // 存储波形的 Y 坐标历史 const reqRef = useRef(null); const harmonicsRef = useRef(1); // ref 版本的 harmonics，用于在 RAF 中读取最新值 const cycleTimerRef = useRef(0); // 用于控制 N 变化的计时器 // 初始化波形数组 useEffect(() => { waveYRef.current = new Array(500).fill(0); }, []); // 同步 ref 和 state，为了在动画循环中获取最新 N 值，同时用 state 触发 UI 上的文字更新 useEffect(() => { harmonicsRef.current = harmonicsCount; }, [harmonicsCount]); // 静态背景网格 (useMemo 避免重算) const gridLines = useMemo(() => { const lines = []; // 纵向 for (let x = 0; x <= WIDTH; x += 50) { lines.push(); } // 横向 for (let y = 0; y <= HEIGHT; y += 50) { lines.push(); } return lines; }, []); useEffect(() => { const animate = () => { // 1. 更新时间 timeRef.current += 0.015; // 2. 自动循环切换谐波数量 (每 300 帧约 5秒切换一次) cycleTimerRef.current++; if (cycleTimerRef.current > 300) { cycleTimerRef.current = 0; let nextN = harmonicsRef.current + 2; if (nextN > 9) nextN = 1; // 循环: 1 -> 3 -> 5 -> 7 -> 9 -> 1 setHarmonicsCount(nextN); // 清空波形以便视觉上重新开始构建 waveYRef.current = new Array(500).fill(0); } // 3. 计算圆圈 (频域) let x = 300; // 起始圆心 X let y = 350; // 起始圆心 Y const circlesData = []; const N = harmonicsRef.current; // 傅里叶级数：方波 = 4/pi * (sin(x) + sin(3x)/3 + sin(5x)/5 + ...) // 半径基数 const baseRadius = 120; for (let i = 0; i < N; i++) { // 仅使用奇数项 (1, 3, 5...) const n = i * 2 + 1; const prevX = x; const prevY = y; // 计算当前圆的半径 (振幅) const radius = baseRadius * (4 / (n * Math.PI)); // 计算角度 (频率 n * time) const angle = n * timeRef.current; // 更新圆心位置到当前向量尖端 x += radius * Math.cos(angle); y += radius * Math.sin(angle); circlesData.push({ cx: prevX, cy: prevY, r: radius, lineX: x, lineY: y, n: n }); } // 4. 更新波形数据 (时域) // 将当前的 y 值 (相对于主轴 350) 存入数组头部 const currentYOffset = y - 350; waveYRef.current.pop(); // 移除最旧的数据 waveYRef.current.unshift(currentYOffset); // 加入最新数据 // 5. 生成波形路径字符串 // 波形起始 X = 600, 每个点间隔 1.2px const waveStartX = 600; const pathPoints = waveYRef.current.map((val, idx) => { return `${waveStartX + idx * 1.2},${350 + val}`; }); const pathD = `M ${pathPoints.join(' L ')}`; // 6. 更新渲染状态 setFrameData({ circles: circlesData, wavePath: pathD, tip: { x, y } }); reqRef.current = requestAnimationFrame(animate); }; reqRef.current = requestAnimationFrame(animate); return () => { if (reqRef.current) cancelAnimationFrame(reqRef.current); }; }, []); // 依赖为空，只启动一次 return (

{/* 标题区域 */}

傅里叶变换原理 Fourier Transform

将复杂波形分解为简单的正弦波叠加 / Decomposing complex signals into sine waves

{/* 状态指示器 */}

N = {harmonicsCount}

Harmonics / 谐波数量

Approximating Square Wave
正在逼近方波

); }