```javascript import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1920; const VIEW_HEIGHT = 1080; const TOTAL_DURATION = 27000; // 27 seconds // 颜色定义 const COLORS = { bg: '#0f172a', ground: '#1e293b', boySkin: '#fca5a5', boyShirt: '#facc15', boyPants: '#3b82f6', fairyCore: '#e879f9', fairyGlow: '#c084fc', treeDark: '#0f172a', treeLight: '#334155', caveDark: '#020617', crystal: '#22d3ee', lightBeam: 'rgba(255,255,255,0.1)' }; // 工具函数：缓动 const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3); const easeInOutSine = (x) => -(Math.cos(Math.PI * x) - 1) / 2; export default function FantasyAdventureAnimation() { const [time, setTime] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(); // 动画循环 const animate = (timestamp) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; // 循环播放 const loopedTime = elapsed % TOTAL_DURATION; setTime(loopedTime); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // 场景判定 // Scene 1: 0-5s (Forest Walk) // Scene 2: 5-9s (Fairy Encounter) // Scene 3: 9-15s (Chase to Cave) // Scene 4: 15-23s (Inside Cave Float) // Scene 5: 23-27s (Close up) const scene = useMemo(() => { if (time < 5000) return 1; if (time < 9000) return 2; if (time < 15000) return 3; if (time < 23000) return 4; return 5; }, [time]); // --- 动态参数计算 --- // 1. 背景视差 (Scene 1-3) const bgOffset = time < 15000 ? -(time * 0.15) : -2250; // 2. 少年位置与姿态 let boyX = 400; let boyY = 800; let boyScale = 1; let legAngle = 0; let armAngle = 0; let headRot = 0; let boyFaceDir = 1; // 1 right, -1 left if (scene === 1) { // 走路循环 const walkCycle = (time % 1000) / 1000; legAngle = Math.sin(walkCycle * Math.PI * 2) * 20; armAngle = -Math.sin(walkCycle * Math.PI * 2) * 20; boyY += Math.abs(Math.sin(walkCycle * Math.PI * 2)) * 5; // 身体起伏 } else if (scene === 2) { // 停下，惊讶 const t = (time - 5000) / 4000; legAngle = 0; armAngle = t < 0.2 ? -20 * (1 - t * 5) : -40; // 手抬起来惊讶 headRot = -10; } else if (scene === 3) { // 跑步 const t = (time - 9000) / 6000; boyX = 400 + t * 400; // 向前移动 const runCycle = (time % 600) / 600; legAngle = Math.sin(runCycle * Math.PI * 2) * 45; armAngle = -Math.sin(runCycle * Math.PI * 2) * 45; boyY += Math.abs(Math.sin(runCycle * Math.PI * 2)) * 15; headRot = 10; // 身体前倾 } else if (scene === 4) { // 悬浮上升 const t = (time - 15000) / 8000; boyX = 960; // 居中 boyY = 800 - t * 400 + Math.sin(time * 0.002) * 20; legAngle = 10 + Math.sin(time * 0.001) * 5; // 腿自然下垂 armAngle = -20 + Math.sin(time * 0.001 + 1) * 5; headRot = -15; // 抬头看 } else if (scene === 5) { // 近景 boyX = 800; boyY = 600; boyScale = 1; // 通过ViewBox缩放，这里保持相对值 headRot = 0; armAngle = 0; } // 3. 精灵位置与姿态 let fairyX = -100; let fairyY = -100; let fairyScale = 0; let fairyOpacity = 0; if (scene === 2) { const t = (time - 5000) / 4000; fairyOpacity = 1; fairyScale = Math.min(t * 5, 1); // 曲线飞行：贝塞尔模拟 fairyX = 1200 - easeOutCubic(t) * 400; fairyY = 600 + Math.sin(t * 10) * 100; } else if (scene === 3) { const t = (time - 9000) / 6000; fairyOpacity = 1; fairyScale = 1; fairyX = 800 + t * 600 + Math.sin(time * 0.005) * 50; fairyY = 600 + Math.cos(time * 0.005) * 50; } else if (scene === 4) { const t = (time - 15000) / 8000; fairyOpacity = 1; fairyScale = 1; fairyX = 1100 + Math.sin(time * 0.003) * 30; fairyY = 700 - t * 400 + Math.cos(time * 0.003) * 30; } else if (scene === 5) { fairyOpacity = 1; fairyScale = 1; fairyX = 1120; fairyY = 550 + Math.sin(time * 0.005) * 20; } // 4. 镜头/ViewBox 控制 let vbX = 0, vbY = 0, vbW = VIEW_WIDTH, vbH = VIEW_HEIGHT; let bgOpacity = 1; // 森林透明度 let caveOpacity = 0; // 洞穴透明度 let overlayOpacity = 0; // 结尾渐暗 if (scene === 3) { // 进入洞穴过渡 const t = (time - 9000) / 6000; caveOpacity = t > 0.7 ? (t - 0.7) * 3.3 : 0; } else if (scene === 4) { bgOpacity = 0; caveOpacity = 1; // 缓慢推进 const t = (time - 15000) / 8000; vbW = VIEW_WIDTH * (1 - t * 0.2); vbH = VIEW_HEIGHT * (1 - t * 0.2); vbX = (VIEW_WIDTH - vbW) / 2; vbY = (VIEW_HEIGHT - vbH) / 2; } else if (scene === 5) { bgOpacity = 0; caveOpacity = 1; // 特写 vbW = VIEW_WIDTH * 0.4; vbH = VIEW_HEIGHT * 0.4; vbX = 960 - vbW / 2; vbY = 540 - vbH / 2; overlayOpacity = (time - 26000) > 0 ? (time - 26000) / 1000 : 0; } // 组件：树木生成 const trees = useMemo(() => { return Array.from({ length: 15 }).map((_, i) => ({ id: i, x: i * 300 + Math.random() * 100, height: 400 + Math.random() * 300, width: 80 + Math.random() * 60 })); }, []); // 组件：水晶生成 const crystals = useMemo(() => { return Array.from({ length: 8 }).map((_, i) => ({ id: i, x: 400 + Math.random() * 1100, y: 200 + Math.random() * 800, scale: 0.5 + Math.random() * 1, rot: Math.random() * 360 })); }, []); return (

); } ```