import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; const VIEW_WIDTH = 360; const VIEW_HEIGHT = 640; const WHEEL_CENTER_X = VIEW_WIDTH / 2; const WHEEL_CENTER_Y = VIEW_HEIGHT * 0.42; const WHEEL_RADIUS = 130; const TOTAL_SEGMENTS = 15; const SEGMENT_ANGLE = 360 / TOTAL_SEGMENTS; // 祝福语配置 const BLESSINGS = [ "接下来这一年，会有人认真对你好", // 01 "你不用再一个人硬撑了", // 02 "你会等到一个明确的回应", // 03 "你正在靠近一个转折点", // 04 "有些好事，已经在路上了", // 05 "这一次，你不是陪跑", // 06 "轮到你走运了", // 07 "你会突然发现，自己比想象中强", // 08 "别怀疑，接下来是你的上升期", // 09 "你准备好的那一天，比你想象得更快", // 10 "你会开始为自己而活", // 11 "你终于不再被情绪牵着走", // 12 "你会放下不属于你的负担", // 13 "这一年，你会更清楚自己要什么", // 14 "你会做出一个长期正确的选择" // 15 ]; // 颜色配置 const COLORS = { bg: "#0f172a", primary: "#38bdf8", // Sky blue accent: "#f472b6", // Pink gold: "#fbbf24", // Amber text: "#f8fafc", // Slate 50 textDim: "#94a3b8", // Slate 400 wheelBg: "#1e293b", wheelStroke: "#334155" }; // 工具函数：极坐标转笛卡尔坐标 const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => { const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) }; }; // 工具函数：生成扇形路径 const describeArc = (x, y, radius, startAngle, endAngle) => { const start = polarToCartesian(x, y, radius, endAngle); const end = polarToCartesian(x, y, radius, startAngle); const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; return [ "M", x, y, "L", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y, "L", x, y ].join(" "); }; // 粒子类定义 class Particle { constructor(x, y, type) { this.x = x; this.y = y; this.type = type; // 'bg' | 'firework' this.vx = (Math.random() - 0.5) * (type === 'bg' ? 0.5 : 8); this.vy = (Math.random() - 0.5) * (type === 'bg' ? 0.5 : 8); this.life = 1.0; this.decay = type === 'bg' ? 0.005 : 0.02; this.size = Math.random() * (type === 'bg' ? 2 : 4); this.color = type === 'bg' ? (Math.random() > 0.5 ? COLORS.primary : COLORS.accent) : [COLORS.gold, COLORS.accent, COLORS.primary][Math.floor(Math.random() * 3)]; } update() { this.x += this.vx; this.y += this.vy; if (this.type === 'firework') { this.vy += 0.1; // 重力 this.size *= 0.95; } this.life -= this.decay; // 边界反弹 (仅背景粒子) if (this.type === 'bg') { if (this.x < 0 || this.x > VIEW_WIDTH) this.vx *= -1; if (this.y < 0 || this.y > VIEW_HEIGHT) this.vy *= -1; if (this.life <= 0) this.life = 1.0; // 循环 } } } export default function NewYear2026Wheel() { // --- Refs & State --- // 动画核心状态（不触发重渲染） const animState = useRef({ angle: 0, velocity: 0, isSpinning: false, particles: [], lastFrameTime: 0 }); // UI 状态（触发重渲染） const [uiState, setUiState] = useState({ countdown: { d: 0, h: 0, m: 0, s: 0 }, gamePhase: 'idle', // 'idle' | 'spinning' | 'revealed' selectedIdx: -1, toastVisible: false }); // DOM Refs const wheelGroupRef = useRef(null); const particlesGroupRef = useRef(null); const requestRef = useRef(); // --- 倒计时逻辑 --- useEffect(() => { const targetDate = new Date("2026-01-01T00:00:00").getTime(); const updateCountdown = () => { const now = new Date().getTime(); const distance = targetDate - now; if (distance < 0) { setUiState(prev => ({ ...prev, countdown: { d: 0, h: 0, m: 0, s: 0 } })); return; } setUiState(prev => ({ ...prev, countdown: { d: Math.floor(distance / (1000 * 60 * 60 * 24)), h: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)), m: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)), s: Math.floor((distance % (1000 * 60)) / 1000) } })); }; const interval = setInterval(updateCountdown, 1000); updateCountdown(); return () => clearInterval(interval); }, []); // --- 初始化背景粒子 --- useMemo(() => { const bgParticles = Array.from({ length: 30 }, () => new Particle(Math.random() * VIEW_WIDTH, Math.random() * VIEW_HEIGHT, 'bg') ); animState.current.particles = bgParticles; }, []); // --- 核心动画循环 --- const animate = useCallback((time) => { const state = animState.current; // 1. 轮盘物理逻辑 if (state.isSpinning) { state.angle += state.velocity; // 模拟摩擦力 if (state.velocity > 0.1) { state.velocity *= 0.985; } else { // 停止逻辑 state.isSpinning = false; state.velocity = 0; // 计算最终选中的索引 // 指针在上方 (270度 / -90度)，我们需要计算哪个扇区停在了上方 // 规范化角度到 0-360 const normalizedAngle = state.angle % 360; // 计算偏移：由于0号扇区是从0度开始画的（3点钟方向），我们需要补偿 // 假设指针固定在 12点钟方向（-90度或 270度） // 选中索引计算公式 const pointerAngle = 270; // 逆推：(currentAngle + segmentCenter) % 360 = pointerAngle // 简化：Index = floor( ( (360 - currentAngle + offset) % 360 ) / segmentAngle ) // 经过调试的逻辑： const rawIdx = Math.floor(((360 - normalizedAngle + 270 - (SEGMENT_ANGLE/2)) % 360) / SEGMENT_ANGLE); const finalIdx = (rawIdx + TOTAL_SEGMENTS) % TOTAL_SEGMENTS; // 触发 React 状态更新（只在停止时触发一次） setUiState(prev => ({ ...prev, gamePhase: 'revealed', selectedIdx: finalIdx })); // 触发烟花 for(let i=0; i<50; i++) { state.particles.push(new Particle(WHEEL_CENTER_X, WHEEL_CENTER_Y, 'firework')); } } // 直接操作 DOM 避免 React 渲染开销 if (wheelGroupRef.current) { wheelGroupRef.current.setAttribute('transform', `rotate(${state.angle}, ${WHEEL_CENTER_X}, ${WHEEL_CENTER_Y})`); } } else if (uiState.gamePhase === 'revealed') { // 缓慢旋转背景光环或保持静止 } // 2. 粒子系统更新 // 清空粒子层 if (particlesGroupRef.current) { // 简单暴力的清空，为了性能最好用 Canvas，但这里要求 SVG // 策略：构建 HTML 字符串一次性写入 innerHTML，比逐个创建 React 元素快 // 注意：React 18 并发模式下直接操作 innerHTML 可能有风险，但在此受限场景下是高性能方案 // 或者：我们只更新 transform，如果粒子数量固定。 // 方案：动态过滤失效粒子并更新 DOM state.particles = state.particles.filter(p => p.life > 0); let pathD = ""; state.particles.forEach(p => { p.update(); // 简单绘制圆形作为路径的一部分（性能优化技巧：所有粒子一个 Path） // M cx cy m -r, 0 a r,r 0 1,0 (r*2),0 a r,r 0 1,0 -(r*2),0 const r = p.size * p.life; if (r > 0.1) { pathD += `M ${p.x} ${p.y} m -${r}, 0 a ${r},${r} 0 1,0 ${r*2},0 a ${r},${r} 0 1,0 -${r*2},0 `; } }); // 查找或创建 path 元素 let pathEl = particlesGroupRef.current.firstChild; if (!pathEl) { pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path"); pathEl.setAttribute("fill", COLORS.primary); pathEl.setAttribute("fill-opacity", "0.6"); particlesGroupRef.current.appendChild(pathEl); } pathEl.setAttribute("d", pathD); // 为烟花添加多色支持需要多个 path，这里简化为单色或用 mask，为了效果我们用白色泛光 pathEl.setAttribute("fill", "white"); } requestRef.current = requestAnimationFrame(animate); }, [uiState.gamePhase]); // 启动循环 useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [animate]); // --- 交互处理 --- const handleSpin = () => { if (animState.current.isSpinning || uiState.gamePhase === 'revealed') return; setUiState(prev => ({ ...prev, gamePhase: 'spinning' })); // 随机旋转圈数 (5-8圈) + 随机角度 const randomRotations = 360 * (5 + Math.random() * 3); const randomOffset = Math.random() * 360; // 初始速度 animState.current.velocity = 30 + Math.random() * 10; animState.current.isSpinning = true; // 重置粒子（保留背景） animState.current.particles = animState.current.particles.filter(p => p.type === 'bg'); }; const handleShare = () => { // 复制当前 URL const url = typeof window !== 'undefined' ? window.location.href : 'https://2026-new-year.com'; navigator.clipboard.writeText(url).then(() => { setUiState(prev => ({ ...prev, toastVisible: true })); setTimeout(() => setUiState(prev => ({ ...prev, toastVisible: false })), 3000); }).catch(() => { // Fallback alert("复制失败，请手动分享"); }); }; // --- 渲染辅助 --- const wheelSegments = useMemo(() => { return Array.from({ length: TOTAL_SEGMENTS }).map((_, i) => { const startAngle = i * SEGMENT_ANGLE; const endAngle = (i + 1) * SEGMENT_ANGLE; // 调整文字角度 const midAngle = startAngle + SEGMENT_ANGLE / 2; const textPos = polarToCartesian(WHEEL_CENTER_X, WHEEL_CENTER_Y, WHEEL_RADIUS * 0.85, midAngle); return ( {(i + 1).toString().padStart(2, '0')} ); }); }, []); return (

{/* HTML Toast Overlay */} {uiState.toastVisible && (

已复制，快去给朋友们送祝福吧 🎉

)}

); }