提示 05:每日一牌(每日仪式)
目标
构建 Card of the Day(每日一牌)独立仪式界面。这是一个高互动、游戏化的功能,用户抽取一张牌以获得每日积分和快速洞察。它必须给人一种"神圣暂停"的感觉。
设计约束(来自主设计指南)
- 视觉: "OLED Noir"(
#000000基底)配"Ethereal Glaze"。背景应有缓慢移动的微妙径向渐变(如深紫晶色到黑色),聚焦在屏幕中心。 - 排版: 双字体系统。使用 Playfair Display 作为仪式提示语("寻求你的每日洞察")。使用 Inter 作为"抽牌获得 +5 积分"副标题。
- 节奏: 极致"慢 UI"。这是一次微冥想。卡牌的入场应该延迟,从底部缓慢浮升。
需求
- 组件:
CardOfDayRitualView。 - 抽牌前状态:
- 标题:"每日一牌"(金色
#c5a059)。 - 副标题:"抽牌获得 +5 积分"(柔和文本
#999490)。 - 中央:三张牌面朝下的卡牌水平排列或略呈弧形。它们应有连续的、微妙的悬浮动画(低于 0.1Hz 的
translateY和rotateZ)。
- 标题:"每日一牌"(金色
- 交互(抽牌):
- 当用户点击一张牌时,其余两张淡出(
opacity: 0,duration: 500ms)。 - 所选卡牌滑动到屏幕的绝对中心。
- 发生戏剧性的 3D 翻转动画(
react-native-reanimated)。 - 翻转后的卡牌背后绽放发光的"光环"(使用
expo-blur和径向渐变)。
- 当用户点击一张牌时,其余两张淡出(
- 抽牌后状态:
- 卡牌名称(衬线体)和 1-2 句简短解读以打字机效果流入卡牌下方。
- 出现"领取 +5 积分"按钮。
实现指南
- 触觉反馈(关键):
- 三张牌初始出现时触发
impactAsync(ImpactFeedbackStyle.Light)。 - 用户点击所选牌时触发
impactAsync(ImpactFeedbackStyle.Medium)。 - 卡牌完成 180° 翻转的瞬间触发独特的自定义触觉序列(如三次快速
Heavy冲击或连续震动(如果专用库支持),否则使用延迟的Heavy冲击)。
- 三张牌初始出现时触发
- 性能: 预加载可能的每日卡牌正面图片,以避免翻转动画在加载远程图片时卡顿。
- 状态管理: 使用之前构建的
zustand仪式 store 跟踪每日抽牌是否已完成,防止重复抽牌。