Skip to content

提示 05:每日一牌(每日仪式)

目标

构建 Card of the Day(每日一牌)独立仪式界面。这是一个高互动、游戏化的功能,用户抽取一张牌以获得每日积分和快速洞察。它必须给人一种"神圣暂停"的感觉。

设计约束(来自主设计指南)

  • 视觉: "OLED Noir"(#000000 基底)配"Ethereal Glaze"。背景应有缓慢移动的微妙径向渐变(如深紫晶色到黑色),聚焦在屏幕中心。
  • 排版: 双字体系统。使用 Playfair Display 作为仪式提示语("寻求你的每日洞察")。使用 Inter 作为"抽牌获得 +5 积分"副标题。
  • 节奏: 极致"慢 UI"。这是一次微冥想。卡牌的入场应该延迟,从底部缓慢浮升。

需求

  1. 组件: CardOfDayRitualView
  2. 抽牌前状态:
    • 标题:"每日一牌"(金色 #c5a059)。
    • 副标题:"抽牌获得 +5 积分"(柔和文本 #999490)。
    • 中央:三张牌面朝下的卡牌水平排列或略呈弧形。它们应有连续的、微妙的悬浮动画(低于 0.1Hz 的 translateYrotateZ)。
  3. 交互(抽牌):
    • 当用户点击一张牌时,其余两张淡出(opacity: 0duration: 500ms)。
    • 所选卡牌滑动到屏幕的绝对中心。
    • 发生戏剧性的 3D 翻转动画(react-native-reanimated)。
    • 翻转后的卡牌背后绽放发光的"光环"(使用 expo-blur 和径向渐变)。
  4. 抽牌后状态:
    • 卡牌名称(衬线体)和 1-2 句简短解读以打字机效果流入卡牌下方。
    • 出现"领取 +5 积分"按钮。

实现指南

  • 触觉反馈(关键):
    • 三张牌初始出现时触发 impactAsync(ImpactFeedbackStyle.Light)
    • 用户点击所选牌时触发 impactAsync(ImpactFeedbackStyle.Medium)
    • 卡牌完成 180° 翻转的瞬间触发独特的自定义触觉序列(如三次快速 Heavy 冲击或连续震动(如果专用库支持),否则使用延迟的 Heavy 冲击)。
  • 性能: 预加载可能的每日卡牌正面图片,以避免翻转动画在加载远程图片时卡顿。
  • 状态管理: 使用之前构建的 zustand 仪式 store 跟踪每日抽牌是否已完成,防止重复抽牌。

Internal documentation for MysticX team