```javascript 'use client'; import React, { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; import * as d3 from 'd3'; // ----------------------------------------------------------------------------- // Constants & Data // ----------------------------------------------------------------------------- const LONG_MARCH_PATH = [ { name: "瑞金", year: 1934, type: "departure", desc: "1934年10月，中央红军主力八万六千余人从江西瑞金等地出发，开始战略转移，踏上漫漫征途。", coords: [116.03, 25.88] }, { name: "湘江", year: 1934, type: "tragedy", desc: "突破第四道封锁线，红军在湘江两岸与优势之敌苦战五昼夜，折损过半，以惨重代价渡过湘江。", coords: [111.00, 25.50] }, { name: "遵义", year: 1935, type: "turning_point", desc: "1935年1月，召开遵义会议，确立了新的正确领导，挽救了党，挽救了红军，成为生死的转折点。", coords: [106.92, 27.72] }, { name: "四渡赤水", year: 1935, type: "maneuver", desc: "在赤水河畔穿插迂回，四渡赤水出奇兵，佯攻贵阳，调出滇军，彻底甩开了数十万敌军的围追堵截。", coords: [105.70, 28.58] }, { name: "巧渡金沙江", year: 1935, type: "advance", desc: "红军主力在七天七夜内依靠七只小船，神速抢渡金沙江，摆脱了敌军的包围圈。", coords: [102.80, 26.50] }, { name: "飞夺泸定桥", year: 1935, type: "heroic", desc: "二十二名勇士冒着枪林弹雨，攀踏在大渡河铁索桥上，打开了北上的通道。", coords: [102.23, 29.91] }, { name: "雪山", year: 1935, type: "hardship", desc: "翻越终年积雪的夹金山，空气稀薄，气候恶劣，许多战士长眠于此。", coords: [102.50, 31.00], speedMod: 0.6 }, { name: "草地", year: 1935, type: "peril", desc: "进入松潘草地，由于缺乏粮食和给养，加之沼泽遍布，行军极其艰难。", coords: [102.80, 32.50], speedMod: 0.5 }, { name: "腊子口", year: 1935, type: "battle", desc: "攻克天险腊子口，打通了进入甘肃、北上抗日的最后一道险关。", coords: [103.90, 34.00] }, { name: "吴起镇", year: 1935, type: "junction", desc: "1935年10月，中央红军到达陕北吴起镇，与陕北红军胜利会师，宣告长征结束。", coords: [108.17, 36.92] }, { name: "延安", year: 1936, type: "capital", desc: "红军三大主力会师后，以延安为中心建立了抗日根据地，开启了中国革命的新篇章。", coords: [109.48, 36.65] } ]; // Configuration const WIDTH = 1200; const HEIGHT = 700; const BG_COLOR = "#1a1a1d"; const CHINA_GEOJSON_URL = "https://gist.githubusercontent.com/zhulinpinyu/8e18d57b3b18fb74e776/raw/efbb74cfea53decb1fe7d6bf279fd351c28c4810/china_simplify.json"; // Animation Settings const BASE_SPEED = 120; const HOLD_DURATION = 3200; const INTRO_DURATION = 4000; // Time for the Ruijin scene const ZOOM_DURATION = 2000; // Time to zoom out from Ruijin to Map // ----------------------------------------------------------------------------- // Component // ----------------------------------------------------------------------------- export const LongMarchAnimation = () => { // 1. Data State const [geoData, setGeoData] = useState(null); const [loading, setLoading] = useState(true); // 2. Animation State (React updates) const [activeNodeIndex, setActiveNodeIndex] = useState(-1); const [currentLength, setCurrentLength] = useState(0); const [isPlaying, setIsPlaying] = useState(false); const [isFinished, setIsFinished] = useState(false); const [scenePhase, setScenePhase] = useState('intro'); // 'intro', 'zooming', 'map' const [viewTransform, setViewTransform] = useState({ k: 4, x: 0, y: 0 }); // Zoom state // 3. Mutable Animation State (Refs for performance) const requestRef = useRef(); const lastTimeRef = useRef(0); const hasStartedRef = useRef(false); const flagPathRef = useRef(null); // Ref for direct DOM manipulation of flag // Physics & Logic State const stateRef = useRef({ phase: 'intro', // intro -> zooming -> holding -> moving -> finished startTime: 0, introProgress: 0, zoomProgress: 0, currentLen: 0, targetLen: 0, nodeIndex: 0, holdStartTime: 0, totalPathLength: 0, nodeLengths: [], speedModifiers: [], // Zoom targets startTransform: { k: 5, x: 0, y: 0 }, // Will be calculated based on Ruijin coords endTransform: { k: 1, x: 0, y: 0 } }); const pathRef = useRef(null); // --------------------------------------------------------------------------- // Data Loading // --------------------------------------------------------------------------- useEffect(() => { let isMounted = true; fetch(CHINA_GEOJSON_URL) .then(res => res.json()) .then(data => { if (isMounted) { setGeoData(data); setLoading(false); } }) .catch(err => { console.error("Failed to load map", err); if (isMounted) setLoading(false); }); return () => { isMounted = false; }; }, []); // --------------------------------------------------------------------------- // D3 Projection & Path Generation // --------------------------------------------------------------------------- const { pathGenerator, projectedPath, pathSvgString, ruijinXY } = useMemo(() => { if (!geoData) return {}; // Center map roughly on the Long March area const proj = d3.geoMercator() .center([107, 30]) .scale(2200) .translate([WIDTH / 2, HEIGHT / 2]); const pathGen = d3.geoPath().projection(proj); const projectedPoints = LONG_MARCH_PATH.map(p => { const [x, y] = proj(p.coords); return { ...p, x, y }; }); const lineGenerator = d3.line() .x(d => d.x) .y(d => d.y) .curve(d3.curveCatmullRom.alpha(0.5)); const pathString = lineGenerator(projectedPoints); return { pathGenerator: pathGen, projectedPath: projectedPoints, pathSvgString: pathString, ruijinXY: projectedPoints[0] // Start point for intro zoom }; }, [geoData]); // --------------------------------------------------------------------------- // Setup Animation & Measurements // --------------------------------------------------------------------------- useLayoutEffect(() => { if (pathRef.current && projectedPath && projectedPath.length > 0 && ruijinXY) { const pathEl = pathRef.current; const totalLen = pathEl.getTotalLength(); // Calculate length at each node const lengths = []; const precision = 3000; const pathPoints = []; for (let i = 0; i <= precision; i++) { const l = (i / precision) * totalLen; const p = pathEl.getPointAtLength(l); pathPoints.push({ l, x: p.x, y: p.y }); } projectedPath.forEach((node, i) => { if (i === 0) { lengths.push(0); return; } let minDist = Infinity; let bestLen = 0; // Optimization: start search from previous node's length const startSearchIdx = lengths[i-1] ? Math.floor((lengths[i-1] / totalLen) * precision) : 0; for (let j = startSearchIdx; j < pathPoints.length; j++) { const pp = pathPoints[j]; const dist = Math.sqrt((pp.x - node.x)**2 + (pp.y - node.y)**2); if (dist < minDist) { minDist = dist; bestLen = pp.l; } if (minDist < 5 && dist > 20) break; } lengths.push(bestLen); }); stateRef.current.totalPathLength = totalLen; stateRef.current.nodeLengths = lengths; stateRef.current.speedModifiers = projectedPath.map(p => p.speedMod || 1.0); // Setup Zoom Start Position (Focused on Ruijin) // We want Ruijin (ruijinXY.x, ruijinXY.y) to be at center (WIDTH/2, HEIGHT/2) when scaled const startK = 5; const startX = (WIDTH / 2) - (ruijinXY.x * startK); const startY = (HEIGHT / 2) - (ruijinXY.y * startK); stateRef.current.startTransform = { k: startK, x: startX, y: startY }; stateRef.current.endTransform = { k: 1, x: 0, y: 0 }; // Auto Start if (!hasStartedRef.current) { hasStartedRef.current = true; stateRef.current.phase = 'intro'; stateRef.current.startTime = performance.now(); setViewTransform(stateRef.current.startTransform); setScenePhase('intro'); setIsPlaying(true); requestRef.current = requestAnimationFrame(animate); } } }, [projectedPath, pathSvgString, ruijinXY]); // --------------------------------------------------------------------------- // Main Animation Loop // --------------------------------------------------------------------------- const animate = useCallback((time) => { if (!lastTimeRef.current) lastTimeRef.current = time; const deltaTime = time - lastTimeRef.current; lastTimeRef.current = time; const state = stateRef.current; // --- 1. Intro Phase (Ruijin Scene) --- if (state.phase === 'intro') { const elapsed = time - state.startTime; state.introProgress = Math.min(elapsed / INTRO_DURATION, 1); // Animate Flag (Direct DOM update) if (flagPathRef.current) { const wave = Math.sin(time / 200) * 5; const wave2 = Math.cos(time / 150) * 3; // Simple wave path logic const d = `M0,0 Q20,${-10+wave} 40,0 T80,${wave2} V50 H0 Z`; flagPathRef.current.setAttribute('d', d); } if (state.introProgress >= 1) { state.phase = 'zooming'; state.startTime = time; // Reset timer for zoom setScenePhase('zooming'); // Triggers React render to fade out intro UI } } // --- 2. Zoom Phase (Camera Move) --- else if (state.phase === 'zooming') { const elapsed = time - state.startTime; const p = Math.min(elapsed / ZOOM_DURATION, 1); // Easing (easeInOutCubic) const ease = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2; const k = state.startTransform.k + (state.endTransform.k - state.startTransform.k) * ease; const x = state.startTransform.x + (state.endTransform.x - state.startTransform.x) * ease; const y = state.startTransform.y + (state.endTransform.y - state.startTransform.y) * ease; setViewTransform({ k, x, y }); if (p >= 1) { state.phase = 'holding'; // Start first hold state.holdStartTime = time; state.nodeIndex = 0; state.currentLen = 0; setScenePhase('map'); setActiveNodeIndex(0); } } // --- 3. Map Flow Phase --- else if (state.phase === 'moving') { const speedMod = state.speedModifiers[state.nodeIndex] || 1.0; const currentSpeed = BASE_SPEED * speedMod; const dist = (currentSpeed * deltaTime) / 1000; state.currentLen += dist; if (state.currentLen >= state.targetLen) { state.currentLen = state.targetLen; state.phase = 'holding'; state.holdStartTime = time; setActiveNodeIndex(state.nodeIndex); setCurrentLength(state.currentLen); } else { setCurrentLength(state.currentLen); } } // --- 4. Holding Phase --- else if (state.phase === 'holding') { if (time - state.holdStartTime > HOLD_DURATION) { const nextIndex = state.nodeIndex + 1; if (nextIndex < state.nodeLengths.length) { state.nodeIndex = nextIndex; state.targetLen = state.nodeLengths[nextIndex]; state.phase = 'moving'; } else { state.phase = 'finished'; setIsFinished(true); setIsPlaying(false); } } } if (state.phase !== 'finished') { requestRef.current = requestAnimationFrame(animate); } }, []); // --------------------------------------------------------------------------- // Helpers & Handlers // --------------------------------------------------------------------------- const togglePlay = () => { if (isFinished) { // Restart full sequence window.location.reload(); // Simplest way to reset complex state machine safely } else { if (isPlaying) { setIsPlaying(false); if (requestRef.current) cancelAnimationFrame(requestRef.current); } else { setIsPlaying(true); lastTimeRef.current = 0; requestRef.current = requestAnimationFrame(animate); } } }; useEffect(() => { return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); const headPos = useMemo(() => { if (!pathRef.current || currentLength < 0) return projectedPath?.[0] || {x:0, y:0}; const p = pathRef.current.getPointAtLength(Math.max(0, currentLength)); return { x: p.x, y: p.y }; }, [currentLength, projectedPath]); // --------------------------------------------------------------------------- // Render // --------------------------------------------------------------------------- if (loading) { return (

); } return (

{/* --- Background --- */}

{/* --- Title (Persistent) --- */}

长征·史诗

The Long March (1934-1936)

{/* --- Main SVG Stage --- */} {/* --- Intro Overlay Text --- */} {scenePhase === 'intro' && (

瑞金·集结 1934年 · 红色苏区 · 战略大转移

)} {/* --- Info Card --- */} {activeNodeIndex >= 0 && LONG_MARCH_PATH[activeNodeIndex] && scenePhase === 'map' && ( {/* Header */}

{LONG_MARCH_PATH[activeNodeIndex].year} {getEventTypeLabel(LONG_MARCH_PATH[activeNodeIndex].type)}

{getEventIcon(LONG_MARCH_PATH[activeNodeIndex].type)}

{/* Content */}

{LONG_MARCH_PATH[activeNodeIndex].name}

{LONG_MARCH_PATH[activeNodeIndex].desc}

{/* Progress Bar */}

)} {/* --- Play/Replay Control --- */}

); }; // ----------------------------------------------------------------------------- // Helper Functions // ----------------------------------------------------------------------------- function getEventTypeLabel(type) { const map = { 'departure': '战略转移', 'tragedy': '血战突围', 'turning_point': '伟大转折', 'maneuver': '出奇制胜', 'advance': '神速进军', 'heroic': '英雄壮举', 'hardship': '艰难跋涉', 'peril': '绝地求生', 'battle': '攻克天险', 'junction': '胜利会师', 'capital': '革命圣地' }; return map[type] || '历史事件'; } function getEventIcon(type) { const size = 24; const color = "#ef4444"; const yellow = "#f59e0b"; switch(type) { case 'departure': return ; case 'turning_point': case 'capital': return ; case 'battle': case 'heroic': case 'tragedy': return ; case 'maneuver': case 'advance': return ; case 'hardship': case 'peril': return ; case 'junction': return ; default: return ; } } ```