提示 02:弧形选牌轮盘(手势与布局)
目标: 构建基于弧形的交互式选牌轮盘("选牌器")。
设计需求(来自 总设计指南):
- OLED Noir: 背景必须是纯黑(
#000000)。 - 仪式节奏: 运动必须给人厚重且有意图的感觉。使用
react-native-reanimated配合useAnimatedGestureHandler或useSharedValue。 - 触觉反馈:
- 选中牌时产生小而尖锐的触觉"滴答"。
- 轮盘旋转时产生微妙的低强度触觉震动,以模拟物理阻力。
- 手势控制:
- 使用
PanGestureHandler控制旋转。 - 使用
RotationGestureHandler或PanGestureHandler旋转牌轮。
- 使用
- 布局:
- 卡牌沿弧形排列。
- 可见区域:仅显示上方弧形的卡牌(与 Web 版一致)。
- 响应式:适配移动端屏幕。使用安全区域。
- 动画:
- 入场:卡牌应交错进入(
useAnimatedStyle,stagger)。 - 旋转:基于惯性的旋转,类似 Web 版本。
- 拖拽手势:用于提示用户交互的视觉指引(拖拽图标),首次用户交互后淡出。
- 入场:卡牌应交错进入(
技术规范:
- 技术栈:
react-native-reanimated、react-native-gesture-handler。 - 逻辑:
- 卡牌位置需要基于半径为 R 的圆上的角度来计算。
- 旋转:轮盘的
rotate值应是在平移时更新的共享值。 - 惯性:使用
withDecay使旋转动画更真实。
- 渲染:
FlatList可能不适合环形布局。使用View配合绝对定位,在useMemo中基于圆的半径计算卡牌位置。
交付物:
src/components/CardPickerWheel.tsx(轮盘)src/components/CardPickerCard.tsx(单张卡牌渲染,含翻转状态和动画)