04 - 加载过渡

概述

处理从选牌/揭牌到"加载"状态的过渡，即后端生成解读释义期间的等待状态。

设计约束（来自 总设计指南）

• 有意的摩擦： 加载状态是一个"沉淀"时刻。
• 大气色彩： 使用有机的、极光般的渐变和烟雾图案作为背景，营造流动感和神秘感。
• OLED Noir： 背景：#000000。
• 仪式节奏： 一切必须连续且流畅。

React Native / Expo 实现

1. 编排： 所有卡牌翻转完成后，触发 /api/v1/readings 的 API 调用。
2. 动画序列： spin（旋转）-> linger（停留）-> fading（淡出）-> drift（漂移）。
3. 视觉效果：
   • 容器持续逆时针旋转（withRepeat）。
   • scale 动画缩小以实现缩放效果。
   • SVG 同心环（内环虚线、中环实线、外环短划线）以不同速度旋转。
   • 中心发光的 RadialGradient 光球。

AI 开发者提示

"使用 react-native-reanimated 和 react-native-svg 实现'仪式加载'序列。整个容器必须缩小并开始持续的逆时针旋转。在中心淡入 SVG 同心环，使用空灵的薰衣草色和鼠尾草绿。在 API 请求待处理期间，以不同速度旋转这些环。使用 #000000 背景配大气'烟雾'渐变层。显示加载文本，带有 3 点动画（不透明度脉冲）。"