ECLIPSE ARENA

项目概述

Eclipse Arena 是一个虚构的科幻竞技场游戏，我为其设计了完整的UI系统。项目目标是在作品集中展示游戏UI设计能力——不仅限于静态界面，还包括交互原型、动画系统、以及完整的设计Token管理。

与常见的UI设计展示不同，这个项目所有界面都是可交互的。从按钮的悬停光晕、卡片的3D弹簧倾斜、到页面间的对角线转场——每一处动效都经过精心调校。

设计目标

• 展示游戏UI全链路设计能力：视觉设计 → 交互定义 → 动效实现 → 前端落地
• 建立完整的设计Token系统，包含颜色、字体、间距、阴影、动效曲线
• 所有界面可交互、可点击、可在不同屏幕间切换
• 利用AI生图工具生成高质量角色原画和场景背景

6大核心界面

AI 生图工作流

全部8位英雄角色原画和2张场景背景均使用 NanoBanana2 (Gemini 3.1 Flash Image) 生成。每个角色有独特的视觉风格、配色方案和职业特征。

工作流程：

• Prompt 设计 — 为每个角色编写详细的视觉描述，包含构图、光影、色彩、背景等参数
• 风格一致性 — 所有8个角色共享相同的 Style Guide（半写实游戏原画风格、戏剧性 rim lighting、暗色调背景）
• 批量生成 — Node.js 脚本调用 API，自动排队、下载、重试
• 前端集成 — 生成图像直接放入 Vite 项目的 public/ 目录，React 组件通过类特定 clipPath 边框展示

交互与动画系统

项目的核心竞争力在于交互动效的实现深度。整个动画系统分为5个层次：

Layer 1: 页面转场

基于 AnimatePresence 的状态驱动导航。屏幕切换时触发对角线擦除转场，切换方向根据导航方向改变。退出动画和进入动画同时播放。

Layer 2: 3D 卡片系统

角色选择和商城卡片使用 useSpring + useMotionValue 实现。鼠标移动→卡片实时3D倾斜；鼠标离开→高刚度弹簧瞬间回弹（stiffness: 400, damping: 25）。每个卡片还有动态跟随的径向光晕。

Layer 3: 微交互

• 按钮悬停：光扫过效果 + 光晕脉冲 + 缩放
• 技能点击：波纹扩散动画（AnimatePresence + scale/opacity）
• 物品格：悬停稀有度光效 + 缩放
• 购买确认：粒子爆发特效 + Toast 通知

Layer 4: 实时模拟

战斗HUD具备实时状态更新：血量/蓝量条、技能冷却径向遮罩、击杀信息滚动（6秒自动清理）。使用 setInterval + useReducer 模拟游戏数据流。

Layer 5: 粒子背景

Canvas 2D 粒子系统：120个粒子、连接线、颜色渐变。使用 requestAnimationFrame 实现60fps渲染，零布局开销。

设计 Token 系统

完整的设计 Token 体系确保视觉一致性：

• 色彩 — 12级色阶（eclipse-950 到 eclipse-300）+ 语义色（health/mana/shield/xp）+ 稀有度色
• 字体 — Orbitron（标题/按钮）· Rajdhani（UI标签）· Noto Sans SC（正文）
• 阴影/发光 — 统一的 glow 色值，基于元素稀有度和状态变化
• 动画曲线 — 统一的 ease 曲线 [0.4, 0, 0.2, 1] · spring stiffness: 300-700
• 圆角/间距 — 统一的 4px 圆角 · 8px 间距基准网格