'use client'; import React, { useState, useEffect, useMemo } from 'react'; export default function SciFiClock() { const [time, setTime] = useState(new Date()); const [frame, setFrame] = useState(0); // 动画循环 useEffect(() => { let animationFrameId; const animate = () => { setTime(new Date()); setFrame(f => f + 1); animationFrameId = requestAnimationFrame(animate); }; animationFrameId = requestAnimationFrame(animate); return () => cancelAnimationFrame(animationFrameId); }, []); // 计算时间角度 const ms = time.getMilliseconds(); const s = time.getSeconds(); const m = time.getMinutes(); const h = time.getHours(); // 平滑角度计算 const secondDeg = (s * 6) + (ms * 0.006); const minuteDeg = (m * 6) + (s * 0.1); const hourDeg = ((h % 12) * 30) + (m * 0.5); // 装饰性旋转角度 const ringRotate1 = frame * 0.2; const ringRotate2 = frame * -0.15; const pulse = Math.sin(frame * 0.05) * 0.5 + 0.5; // 0 to 1 // 格式化数字时间 const formatNum = (num) => num.toString().padStart(2, '0'); // 刻度生成 const ticks = useMemo(() => { return Array.from({ length: 60 }).map((_, i) => { const isHour = i % 5 === 0; const angle = (i * 6) * (Math.PI / 180); const radius = 180; const length = isHour ? 15 : 8; const x1 = Math.cos(angle) * radius; const y1 = Math.sin(angle) * radius; const x2 = Math.cos(angle) * (radius - length); const y2 = Math.sin(angle) * (radius - length); return { x1, y1, x2, y2, isHour, i }; }); }, []); return (

); }