```javascript import React, { useState, useEffect, useRef, useMemo } from 'react'; import { motion } from 'framer-motion'; import { MapPin, Wind, Scroll, RefreshCw, Play, Pause } from 'lucide-react'; // --- 配置常量 --- const WIDTH = 1200; const HEIGHT = 700; const ANIMATION_DURATION = 25000; // 总时长 ms const BACKGROUND_COLOR = '#0f172a'; const ACCENT_COLOR = '#38bdf8'; // Sky blue const GOLD_COLOR = '#facc15'; const TEXT_COLOR = '#e2e8f0'; // --- 李白生平轨迹关键节点数据 --- const LOCATIONS = [ { id: 1, year: 701, name: '江油', x: 380, y: 480, poem: '床前明月光，疑是地上霜。', desc: '出生于西域碎叶，幼年迁居蜀中江油。' }, { id: 2, year: 724, name: '渝州', x: 460, y: 490, poem: '夜发清溪向三峡，思君不见下渝州。', desc: '二十四岁，辞亲远游，仗剑去国。' }, { id: 3, year: 725, name: '江陵', x: 580, y: 460, poem: '山随平野尽，江入大荒流。', desc: '出三峡，渡荆门，游览楚地。' }, { id: 4, year: 727, name: '安陆', x: 650, y: 420, poem: '桃花流水窅然去，别有天地非人间。', desc: '娶前宰相许圉师孙女，隐居安陆十年。' }, { id: 5, year: 730, name: '长安(初入)', x: 560, y: 350, poem: '长相思，在长安。', desc: '初入长安，未能通过引荐入仕，失意而去。' }, { id: 6, year: 736, name: '太原', x: 620, y: 280, poem: '梦绕边城月，心飞故国楼。', desc: '北游太原，结识元演。' }, { id: 7, year: 742, name: '长安(翰林)', x: 560, y: 350, poem: '仰天大笑出门去，我辈岂是蓬蒿人。', desc: '奉诏入京，供奉翰林，极尽荣耀。' }, { id: 8, year: 744, name: '洛阳', x: 630, y: 360, poem: '大鹏一日同风起，扶摇直上九万里。', desc: '赐金放还。洛阳遇杜甫，成千古知音。' }, { id: 9, year: 753, name: '宣城', x: 780, y: 430, poem: '相看两不厌，只有敬亭山。', desc: '漫游吴越，独坐敬亭山。' }, { id: 10, year: 757, name: '夜郎(流放)', x: 420, y: 540, poem: '我寄愁心与明月，随君直到夜郎西。', desc: '安史之乱后，因从李璘案获罪，流放夜郎。' }, { id: 11, year: 759, name: '白帝城', x: 500, y: 470, poem: '朝辞白帝彩云间，千里江陵一日还。', desc: '行至白帝城遇赦，顺江东下。' }, { id: 12, year: 762, name: '当涂', x: 800, y: 420, poem: '举杯邀明月，对影成三人。', desc: '病逝于当涂，终年六十二岁。' }, ]; // --- 辅助函数：生成平滑曲线路径 --- const generatePathData = (points) => { if (points.length === 0) return ''; let d = `M ${points[0].x} ${points[0].y}`; for (let i = 0; i < points.length - 1; i++) { const p0 = i > 0 ? points[i - 1] : points[0]; const p1 = points[i]; const p2 = points[i + 1]; const p3 = i !== points.length - 2 ? points[i + 2] : p2; const cp1x = p1.x + (p2.x - p0.x) / 6; const cp1y = p1.y + (p2.y - p0.y) / 6; const cp2x = p2.x - (p3.x - p1.x) / 6; const cp2y = p2.y - (p3.y - p1.y) / 6; d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`; } return d; }; // --- 主组件 --- export default function LiBaiJourneyAnimation() { // 状态管理 const [isPlaying, setIsPlaying] = useState(false); // 初始为 false，加载后自动开始 const [isFinished, setIsFinished] = useState(false); const [currentInfo, setCurrentInfo] = useState(LOCATIONS[0]); const [progressRatio, setProgressRatio] = useState(0); // 0-1 用于UI显示 // Refs (用于高性能动画循环) const requestRef = useRef(); const startTimeRef = useRef(null); const pausedTimeRef = useRef(0); const pathRef = useRef(null); const pathLengthRef = useRef(0); // 动画核心变量 (避免 React 渲染周期) const animState = useRef({ progress: 0, // 0 to 1 lastLocationIndex: 0, isPlaying: true // 内部控制 }); // --- 初始化与资源计算 --- const pathData = useMemo(() => generatePathData(LOCATIONS), []); // 随机背景网格点 const bgDots = useMemo(() => { const dots = []; for(let i=0; i<150; i++) { dots.push({ x: Math.random() * WIDTH, y: Math.random() * HEIGHT, r: Math.random() * 1.5 + 0.5, opacity: Math.random() * 0.3 + 0.1 }); } return dots; }, []); // 测量路径长度 useEffect(() => { if (pathRef.current) { pathLengthRef.current = pathRef.current.getTotalLength(); } // 启动动画 setIsPlaying(true); }, []); // --- 动画循环 --- const animate = (time) => { if (!animState.current.isPlaying) { requestRef.current = requestAnimationFrame(animate); return; } if (!startTimeRef.current) startTimeRef.current = time; // 计算经过的时间 (考虑暂停) const elapsed = time - startTimeRef.current - pausedTimeRef.current; // 计算进度 0 -> 1 let p = elapsed / ANIMATION_DURATION; if (p >= 1) { p = 1; animState.current.isPlaying = false; setIsPlaying(false); setIsFinished(true); } animState.current.progress = p; setProgressRatio(p); // 触发 UI 渲染 (频率较高，但必要) // 路径计算 if (pathRef.current) { const totalLen = pathLengthRef.current; const currentLen = totalLen * p; const point = pathRef.current.getPointAtLength(currentLen); // 更新移动点位置 const marker = document.getElementById('travel-marker'); const glow = document.getElementById('travel-glow'); if (marker && glow) { marker.setAttribute('cx', point.x); marker.setAttribute('cy', point.y); glow.setAttribute('cx', point.x); glow.setAttribute('cy', point.y); } // 更新轨迹 stroke-dashoffset const pathEl = document.getElementById('active-path'); if (pathEl) { pathEl.style.strokeDasharray = `${currentLen} ${totalLen}`; } // 检测最近的 location 更新信息面板 // 为了性能，不每帧遍历，而是基于进度估算或仅当距离显著变化时检查 // 这里采用简单距离检查 let minDist = 10000; let closestIdx = -1; // 优化：只检查当前 index 附近的点 LOCATIONS.forEach((loc, idx) => { const dist = Math.hypot(loc.x - point.x, loc.y - point.y); if (dist < 40) { // 靠近某个点 if (dist < minDist) { minDist = dist; closestIdx = idx; } } }); if (closestIdx !== -1 && closestIdx !== animState.current.lastLocationIndex) { animState.current.lastLocationIndex = closestIdx; setCurrentInfo(LOCATIONS[closestIdx]); } } requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // --- 交互控制 --- const togglePlay = () => { if (isFinished) { // 重置 startTimeRef.current = null; pausedTimeRef.current = 0; animState.current.progress = 0; animState.current.lastLocationIndex = 0; animState.current.isPlaying = true; setCurrentInfo(LOCATIONS[0]); setIsFinished(false); setIsPlaying(true); } else { if (isPlaying) { // 暂停 animState.current.isPlaying = false; setIsPlaying(false); // 记录当前时间用于恢复 pausedTimeRef.current += 0; // 逻辑在 loop 中处理暂停时间差比较复杂，这里简化： // 实际上暂停时 loop 还在跑，只是不更新 p。 // 当恢复时，需要调整 startTime 以减去暂停的那段时间。 // 简单处理：暂停时刻记录 timestamp，恢复时增加 pausedTimeRef animState.current.pauseStart = performance.now(); } else { // 播放 const now = performance.now(); if (animState.current.pauseStart) { pausedTimeRef.current += (now - animState.current.pauseStart); animState.current.pauseStart = null; } animState.current.isPlaying = true; setIsPlaying(true); } } }; return (

{/* 主容器 */}

{/* 背景 SVG */} {/* --- UI 浮层 (HTML overlay for better text rendering & layout) --- */} {/* 标题栏 */}

李白万里行程图

大唐开元 - 宝应年间 (701 - 762)

{/* 动态信息面板 (右下角) */}

{currentInfo.year} 年 {currentInfo.name}

{/* 诗句展示区 */}

经典诗句

「{currentInfo.poem}」

{/* 生平描述 */}

生平纪事

{currentInfo.desc}

{/* 进度条与控制栏 (底部) */}

{/* 播放/暂停按钮 */} {/* 进度条容器 */}

{/* 进度滑块 */}

{(progressRatio * 100).toFixed(0)}%

{/* 数据可视化装饰元素 (左下角技术参数) */}

COORD: {currentInfo.x.toFixed(2)}, {currentInfo.y.toFixed(2)}

STATUS: {isFinished ? 'COMPLETED' : (isPlaying ? 'TRAVELING' : 'PAUSED')}

OFFSET: {animState.current.progress.toFixed(4)}

); } ```

李白 万里行程图

李白万里行程图