import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 450; const DURATION = 10000; // 10秒倒计时循环 const PARTICLE_COUNT = 30; export default function TechHourglass() { // 动画驱动状态 const [tick, setTick] = useState(0); // 核心数据 Ref (避免重渲染时的闭包陷阱) const stateRef = useRef({ startTime: Date.now(), isPlaying: true, progress: 0, // 0 to 1 particles: Array.from({ length: PARTICLE_COUNT }).map(() => ({ x: 0, y: 0, vx: (Math.random() - 0.5) * 4, vy: (Math.random() - 0.5) * 4, life: Math.random(), active: false })) }); // 静态资源 (网格、噪点等) const staticGrid = useMemo(() => { const lines = []; for (let i = 0; i <= VIEW_WIDTH; i += 40) { lines.push(`M${i} 0 V${VIEW_HEIGHT}`); } for (let i = 0; i <= VIEW_HEIGHT; i += 40) { lines.push(`M0 ${i} H${VIEW_WIDTH}`); } return lines.join(' '); }, []); useEffect(() => { let rafId: number; const loop = () => { const state = stateRef.current; const now = Date.now(); const elapsed = now - state.startTime; // 循环逻辑 if (elapsed >= DURATION) { state.startTime = now; state.progress = 0; } else { state.progress = elapsed / DURATION; } const p = state.progress; // 粒子物理模拟 (模拟沙子落下的飞溅) // 底部沙堆的高度估算 const bottomPileHeight = 120 * p; const hitY = 320 - bottomPileHeight; // 撞击点Y坐标 state.particles.forEach(part => { if (!part.active) { // 发射粒子 if (Math.random() > 0.8) { part.active = true; part.x = VIEW_WIDTH / 2; part.y = hitY; part.vx = (Math.random() - 0.5) * 6; part.vy = -Math.random() * 5 - 2; // 向上溅起 part.life = 1.0; } } else { // 更新粒子 part.x += part.vx; part.y += part.vy; part.vy += 0.4; // 重力 part.life -= 0.03; // 简单的地面碰撞 if (part.y > hitY + 20) { part.life = 0; // 快速消失 } if (part.life <= 0) { part.active = false; } } }); // 触发 React 渲染 setTick(prev => prev + 1); rafId = requestAnimationFrame(loop); }; rafId = requestAnimationFrame(loop); return () => cancelAnimationFrame(rafId); }, []); // 计算渲染所需的变量 const progress = stateRef.current.progress; const timeLeft = Math.ceil((DURATION - (progress * DURATION)) / 1000); const milliseconds = Math.floor((DURATION - (progress * DURATION)) % 1000 / 10); // 沙漏几何参数 const centerX = VIEW_WIDTH / 2; const topY = 100; const midY = 225; const botY = 350; const bulbRadius = 60; // 动态计算沙量 // 上部沙子：矩形裁剪，高度随进度减小 const topSandHeight = 110 * (1 - progress); const topSandY = midY - 5 - topSandHeight; // 这里的5是颈部偏移 // 下部沙子：贝塞尔曲线模拟堆积 // 随着进度增加，堆积变高变宽 const pileHeight = 110 * progress; const pileWidth = 100 * progress; // 底部宽度扩散 // 底部沙堆路径 const bottomSandPath = ` M ${centerX} ${botY} L ${centerX + pileWidth/2} ${botY} Q ${centerX} ${botY - pileHeight} ${centerX - pileWidth/2} ${botY} Z `; // 旋转环参数 const ringRotation = (tick * 0.5) % 360; const ringRotation2 = (tick * -0.8) % 360; return (

); }