提示 03:卡牌揭示动画
目标: 实现"揭示牌阵"和"翻牌"动画。
设计需求:
- 暗黑/极简风格: 卡牌在被点击前保持牌面朝下(使用用户当前的"卡牌皮肤"资源)。
- 触觉/慢 UI:
- 翻牌动画:需要有触感。
- 震动:大阿尔卡纳的"揭示"应比小阿尔卡纳更长、更沉浸、更"厚重"。
- 有机运动: 避免突兀的切换。卡牌沿 Y 轴翻转(或 X 轴,根据用户体验感受决定——通常 Y 轴更像真实翻牌)。
- 动画:
- 翻牌动画:
rotateY从 0 到 180 度。 - 揭示:牌面内容淡入。
- 牌阵:从"选牌"阶段过渡到"揭示"阶段时,牌阵应变形为最终的解读布局。
- 翻牌动画:
技术规范:
- 技术栈:
react-native-reanimated。 - 逻辑:
- 旋转的共享值(翻转状态)。
- 插值处理翻转透视(正面/背面)。
- 需要一种方式处理"翻转正面"与"背面"的渲染,避免双重渲染开销(条件透明度或 z-index 切换)。
- 用户翻牌时,触发解读结果的 API 请求(如果尚未预取)。
上下文:
- Web 应用在卡牌仍面朝下时就预取解读结果。如果可能,我们应保留这种"预创建"逻辑。
交付物:
src/components/CardRevealSpread.tsx(处理揭示后牌阵的布局)src/components/FlipCard.tsx(单张卡牌翻转逻辑)