```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // 视图常量定义 const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const ORIGIN_X = 500; // 原点屏幕X const ORIGIN_Y = 100; // 原点屏幕Y (因为开口向下，顶点在上方，预留上方空间) const SCALE_X = 60; // X轴缩放比例 const SCALE_Y = 12; // Y轴缩放比例 (Y轴数值变化大，压缩显示) export default function ParabolaGeometryAnimation() { const [m, setM] = useState(-5); const requestRef = useRef(); const startTimeRef = useRef(); // 动画循环逻辑 const animate = (time: number) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; // 创建一个从 -5 到 5 再回到 -5 的周期循环 // 周期设为 12000ms (12秒) const duration = 12000; const progress = (elapsed % duration) / duration; let currentM; if (progress < 0.5) { // 0 -> 0.5: -5 to 5 currentM = -5 + (progress * 2) * 10; } else { // 0.5 -> 1.0: 5 to -5 currentM = 5 - ((progress - 0.5) * 2) * 10; } setM(currentM); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 坐标转换工具函数 const toScreen = (x: number, y: number) => { return { x: ORIGIN_X + x * SCALE_X, y: ORIGIN_Y - y * SCALE_Y // SVG y轴向下为正，数学坐标系y向上为正，故取反 }; }; // 数学计算核心逻辑 const logic = useMemo(() => { // 抛物线函数: y = -x^2 + 2x + 3 const f = (x: number) => -Math.pow(x, 2) + 2 * x + 3; // 点坐标计算 const Ax = m; const Ay = f(Ax); const Bx = 4 - m; const By = f(Bx); // 对称轴 x=1, A(m, y) 关于 x=1 的对称点 D(2-m, y) // 题目描述：过A做y轴垂线交抛物线于D。 // 由于抛物线对称轴为 x=1，A的横坐标为m，则D的横坐标为 1 - (m - 1) = 2 - m const Dx = 2 - m; const Dy = Ay; // y坐标相同 // 平行四边形向量计算 // AB向量 = (Bx - Ax, By - Ay) // AD向量 = (Dx - Ax, Dy - Ay) // C点 = B + AD = (Bx + Dx - Ax, By + Dy - Ay) // 也就是 Cx = (4-m) + (2-m) - m = 6 - 3m // Cy = By + 0 = By const Cx = 6 - 3 * m; const Cy = By; // 屏幕坐标转换 const screenA = toScreen(Ax, Ay); const screenB = toScreen(Bx, By); const screenC = toScreen(Cx, Cy); const screenD = toScreen(Dx, Dy); // 生成抛物线路径 (绘制范围 x: -6 到 6) let parabolaPath = "M"; for (let x = -6; x <= 6; x += 0.1) { const p = toScreen(x, f(x)); parabolaPath += `${x === -6 ? '' : 'L'} ${p.x} ${p.y} `; } // 平行四边形路径 const parallelogramPath = `M ${screenA.x} ${screenA.y} L ${screenB.x} ${screenB.y} L ${screenC.x} ${screenC.y} L ${screenD.x} ${screenD.y} Z`; return { Ax, Ay, Bx, By, Cx, Cy, Dx, Dy, screenA, screenB, screenC, screenD, parabolaPath, parallelogramPath }; }, [m]); return (

); } ```