Skip to content

提示 03:卡牌揭示动画

目标: 实现"揭示牌阵"和"翻牌"动画。

设计需求:

  • 暗黑/极简风格: 卡牌在被点击前保持牌面朝下(使用用户当前的"卡牌皮肤"资源)。
  • 触觉/慢 UI:
    • 翻牌动画:需要有触感。
    • 震动:大阿尔卡纳的"揭示"应比小阿尔卡纳更长、更沉浸、更"厚重"。
  • 有机运动: 避免突兀的切换。卡牌沿 Y 轴翻转(或 X 轴,根据用户体验感受决定——通常 Y 轴更像真实翻牌)。
  • 动画:
    • 翻牌动画:rotateY 从 0 到 180 度。
    • 揭示:牌面内容淡入。
    • 牌阵:从"选牌"阶段过渡到"揭示"阶段时,牌阵应变形为最终的解读布局。

技术规范:

  • 技术栈: react-native-reanimated
  • 逻辑:
    • 旋转的共享值(翻转状态)。
    • 插值处理翻转透视(正面/背面)。
    • 需要一种方式处理"翻转正面"与"背面"的渲染,避免双重渲染开销(条件透明度或 z-index 切换)。
    • 用户翻牌时,触发解读结果的 API 请求(如果尚未预取)。

上下文:

  • Web 应用在卡牌仍面朝下时就预取解读结果。如果可能,我们应保留这种"预创建"逻辑。

交付物:

  • src/components/CardRevealSpread.tsx(处理揭示后牌阵的布局)
  • src/components/FlipCard.tsx(单张卡牌翻转逻辑)

Internal documentation for MysticX team