'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_Y = VIEW_HEIGHT / 2; const CIRCLE_X = 200; const RADIUS = 120; const WAVE_START_X = 380; const WAVE_WIDTH = 550; export const SinusoidalMotion = () => { const [time, setTime] = useState(0); const requestRef = useRef(); const pointsRef = useRef<{ x: number; y: number }[]>([]); const animate = (t: number) => { setTime((prev) => prev + 0.04); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 计算当前点的位置 const currentY = CENTER_Y + Math.sin(time) * RADIUS; const currentX_on_circle = CIRCLE_X + Math.cos(time) * RADIUS; // 更新波形路径数据 const wavePoints = useMemo(() => { const points = []; const step = 2; for (let i = 0; i <= WAVE_WIDTH; i += step) { const x = WAVE_START_X + i; // time - i/speed 计算过去的时间点的位移 const y = CENTER_Y + Math.sin(time - i * 0.02) * RADIUS; points.push(`${i === 0 ? 'M' : 'L'} ${x} ${y}`); } return points.join(' '); }, [time]); return (

); }; export default SinusoidalMotion;