import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 600; // 调色板 const COLORS = { bg: '#0f172a', storeFloor: '#1e293b', storeWall: '#334155', table: '#f3e3ce', // 枫木色 device: '#e2e8f0', screenOn: '#0ea5e9', poster: '#000000', locker: '#475569', lockerActive: '#10b981', // Green for active jdRed: '#ef4444', mtYellow: '#f59e0b', rider: '#06b6d4', // Cyan path: '#64748b', text: '#94a3b8', highlight: '#ffffff' }; export default function AppleRetailLogisticsAnim() { // 动画核心状态：tick 用于驱动每一帧的变化 const [tick, setTick] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // 动画周期常量 (单位: 帧, 假设60fps) const CYCLE_FRAMES = 900; // 15秒一个循环 // 阶段划分 // 0-100: 用户下单 (App/PC) // 100-200: 平台分发 & LBS定位 (JD/Meituan -> Store) // 200-350: 店内履约 (Camera count -> Locker/Counter pick) // 350-500: 骑手接单 & 取货 // 500-800: 骑手配送 (5km radius) // 800-900: 完成 & 重置缓冲 useEffect(() => { const animate = () => { // 使用相对时间计算 tick，保证动画速度恒定 const now = Date.now(); const elapsed = now - startTimeRef.current; const currentTick = Math.floor(elapsed / 16.66) % CYCLE_FRAMES; setTick(currentTick); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 计算当前阶段进度 (0-1) const getPhaseProgress = (start: number, duration: number) => { if (tick < start) return 0; if (tick > start + duration) return 1; return (tick - start) / duration; }; // --- 动态数据计算 --- // 1. 用户下单动画 const orderProgress = getPhaseProgress(20, 60); const userOpacity = orderProgress < 0.5 ? orderProgress * 2 : 1; const showPlatforms = tick > 60 && tick < 200; // 2. LBS 信号流 const lbsProgress = getPhaseProgress(100, 80); // 3. 店内履约 const inStoreProgress = getPhaseProgress(200, 100); const lockerActive = tick > 250 && tick < 450; // 4. 骑手取货 const riderPickupProgress = getPhaseProgress(350, 100); // 5. 配送路程 const deliveryProgress = getPhaseProgress(500, 250); // 粒子/信号线条生成 const signalPath = useMemo(() => { // 贝塞尔曲线: User(100, 150) -> Platforms(250, 100) -> Store(600, 300) return `M 100 150 Q 250 50 350 150 T 600 300`; }, []); // 骑手路径 const riderPath = useMemo(() => { // Store(600, 350) -> Road -> Customer(1000, 500) return `M 600 350 C 600 450, 800 400, 900 450 T 1050 500`; }, []); // 骑手当前位置计算 const getRiderPos = (p1: number, p2: number) => { // p1: 进店过程 (0-1), p2: 送货过程 (0-1) if (p1 < 1) { // 进店: 从屏幕外(600, 600) 到门口(600, 350) const x = 600; const y = 600 - p1 * 250; return { x, y, rot: 0, scale: 1 }; } else { // 送货: 沿着 riderPath // 简化计算贝塞尔曲线上的点 (三次贝塞尔近似) const t = p2; // Start(600,350), C1(600,450), C2(800,400), End(900,450) ... simplistic lerp for demo // 这里为了流畅，使用简单的插值模拟路径，实际应解析SVG path const x = 600 + (1050 - 600) * t; const y = 350 + Math.sin(t * Math.PI) * 100 + (500 - 350) * t; return { x, y, rot: t * 10, scale: 1 - t * 0.2 }; // 稍微变小模拟透视 } }; const riderState = getRiderPos(riderPickupProgress, deliveryProgress); return ( ); }