Skip to content

提示 02:弧形选牌轮盘(手势与布局)

目标: 构建基于弧形的交互式选牌轮盘("选牌器")。

设计需求(来自 总设计指南):

  • OLED Noir: 背景必须是纯黑(#000000)。
  • 仪式节奏: 运动必须给人厚重且有意图的感觉。使用 react-native-reanimated 配合 useAnimatedGestureHandleruseSharedValue
  • 触觉反馈:
    • 选中牌时产生小而尖锐的触觉"滴答"。
    • 轮盘旋转时产生微妙的低强度触觉震动,以模拟物理阻力。
  • 手势控制:
    • 使用 PanGestureHandler 控制旋转。
    • 使用 RotationGestureHandlerPanGestureHandler 旋转牌轮。
  • 布局:
    • 卡牌沿弧形排列。
    • 可见区域:仅显示上方弧形的卡牌(与 Web 版一致)。
    • 响应式:适配移动端屏幕。使用安全区域。
  • 动画:
    • 入场:卡牌应交错进入(useAnimatedStylestagger)。
    • 旋转:基于惯性的旋转,类似 Web 版本。
    • 拖拽手势:用于提示用户交互的视觉指引(拖拽图标),首次用户交互后淡出。

技术规范:

  • 技术栈: react-native-reanimatedreact-native-gesture-handler
  • 逻辑:
    • 卡牌位置需要基于半径为 R 的圆上的角度来计算。
    • 旋转:轮盘的 rotate 值应是在平移时更新的共享值。
    • 惯性:使用 withDecay 使旋转动画更真实。
  • 渲染:
    • FlatList 可能不适合环形布局。使用 View 配合绝对定位,在 useMemo 中基于圆的半径计算卡牌位置。

交付物:

  • src/components/CardPickerWheel.tsx(轮盘)
  • src/components/CardPickerCard.tsx(单张卡牌渲染,含翻转状态和动画)

Internal documentation for MysticX team