'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; const SCALE = 40; // 40 pixels = 1 unit // Function Definitions const FUNCTION_DATA = [ { id: 'linear', title: '一次函数 (Linear Function)', formula: 'y = x', color: '#3B82F6', range: [-10, 10], fn: (x: number) => x, }, { id: 'quadratic', title: '二次函数 (Quadratic Function)', formula: 'y = 0.2x²', color: '#8B5CF6', range: [-10, 10], fn: (x: number) => 0.2 * x * x, }, { id: 'inverse', title: '反比例函数 (Inverse Proportion)', formula: 'y = 1/x', color: '#06B6D4', range: [-10, 10], fn: (x: number) => 1 / x, discontinuous: true, // Special handling for asymptote }, { id: 'exponential', title: '指数函数 (Exponential Function)', formula: 'y = 1.5^x', color: '#F59E0B', range: [-10, 10], fn: (x: number) => Math.pow(1.5, x), }, { id: 'logarithmic', title: '对数函数 (Logarithmic Function)', formula: 'y = ln(x)', color: '#10B981', range: [0.1, 10], // Domain x > 0 fn: (x: number) => Math.log(x), }, { id: 'trigonometric', title: '三角函数 (Trigonometric Function)', formula: 'y = 3sin(x)', color: '#EC4899', range: [-10, 10], fn: (x: number) => 3 * Math.sin(x), }, { id: 'heart', title: '心形线 (Cardioid)', formula: 'x=16sin³t, y=13cost-5cos2t...', color: '#EF4444', isParametric: true, range: [0, Math.PI * 2], fn: (t: number) => { // Heart shape parametric equations const x = 16 * Math.pow(Math.sin(t), 3); const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t); return { x: x / 10, y: y / 10 }; // Scale down slightly to fit }, }, ]; export default function MathFunctionAnimation() { const [currentIndex, setCurrentIndex] = useState(0); const [progress, setProgress] = useState(0); // 0 to 1 const [isPaused, setIsPaused] = useState(false); const requestRef = useRef(); const startTimeRef = useRef(null); const currentFunc = FUNCTION_DATA[currentIndex]; const ANIMATION_DURATION = 2500; // ms to draw const PAUSE_DURATION = 2000; // ms to wait before next // Coordinate conversion const toSVG = (x: number, y: number) => { return { x: CENTER_X + x * SCALE, y: CENTER_Y - y * SCALE, }; }; // Generate path points based on function type const generatePath = (limit: number) => { const points: string[] = []; let lastY = null; const step = currentFunc.isParametric ? 0.05 : 0.1; const [start, end] = currentFunc.range; const totalRange = end - start; const currentEnd = start + totalRange * limit; // Start logic let firstPoint = true; for (let t = start; t <= currentEnd; t += step) { let x, y; if (currentFunc.isParametric) { const pos = (currentFunc.fn as any)(t); x = pos.x; y = pos.y; } else { x = t; y = currentFunc.fn(x); } // Avoid drawing infinity or NaN if (!isFinite(y) || !isFinite(x)) continue; const svgPos = toSVG(x, y); // Handle discontinuity for Inverse function (asymptote at x=0) // If the jump in Y is too large between steps, move instead of line if (currentFunc.discontinuous && lastY !== null && Math.abs(y - lastY) > 5) { points.push(`M ${svgPos.x} ${svgPos.y}`); } else if (firstPoint) { points.push(`M ${svgPos.x} ${svgPos.y}`); firstPoint = false; } else { points.push(`L ${svgPos.x} ${svgPos.y}`); } lastY = y; } return points.join(' '); }; // Get the coordinates of the current "head" of the animation for the tracer dot const getHeadPosition = () => { const [start, end] = currentFunc.range; const totalRange = end - start; const t = start + totalRange * progress; let x, y; if (currentFunc.isParametric) { const pos = (currentFunc.fn as any)(t); x = pos.x; y = pos.y; } else { x = t; y = currentFunc.fn(x); } if (!isFinite(x) || !isFinite(y)) return null; return toSVG(x, y); }; // Animation Loop useEffect(() => { const animate = (time: number) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; if (!isPaused) { // Drawing Phase const p = Math.min(elapsed / ANIMATION_DURATION, 1); setProgress(p); if (p >= 1) { setIsPaused(true); startTimeRef.current = time; // Reset timer for pause } } else { // Pause Phase if (elapsed > PAUSE_DURATION) { setIsPaused(false); setProgress(0); startTimeRef.current = null; setCurrentIndex((prev) => (prev + 1) % FUNCTION_DATA.length); } } requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [isPaused, currentIndex]); // Dependencies ensure fresh closure const pathD = generatePath(progress); const headPos = getHeadPosition(); // Grid lines generation const gridLines = useMemo(() => { const lines = []; // Vertical lines for (let x = -10; x <= 10; x++) { const pos = toSVG(x, 0).x; lines.push( ); } // Horizontal lines for (let y = -8; y <= 8; y++) { const pos = toSVG(0, y).y; lines.push( ); } return lines; }, []); return (

{/* Header Info */}

{currentFunc.title}

{currentFunc.formula}

{/* Progress Bar (Subtle) */}

); }