Flutter for OpenHarmony：构建一个沉浸式 Flutter 掷骰子游戏,深入解析动画控制器、CustomPaint 自定义绘制与状态同步

发布时间 ：2026年1月28日
技术栈 ：Flutter 3.22+、Dart 3.4+、Material Design 3
适用读者：熟悉 Flutter 基础，希望掌握复杂动画编排、自定义绘制（CustomPaint）及响应式状态管理的开发者

在移动应用中，微交互（Micro-interaction） 是提升用户体验的关键。一个简单的"掷骰子"功能，若仅显示随机数字，会显得机械而无趣；但若加入 旋转、弹跳、点阵变化 等视觉反馈，则能瞬间营造出游戏般的沉浸感。

今天，我们将深入剖析一个用 Flutter 实现的 高保真掷骰子应用 ，重点探讨其如何通过 AnimationController 编排复合动画 、CustomPaint 手绘骰子点阵 、状态机控制动画生命周期 以及 AnimatedBuilder 高效重绘 ，打造一个兼具趣味性与工程美感的微型互动体验。

🎲 功能需求与核心挑战

我们的掷骰子应用需满足以下体验目标：

真实骰子视觉：1~6 点按标准布局绘制
掷骰动画：包含旋转 + 弹跳效果，模拟物理落地
状态反馈 ：
- 动画中显示"🎲"图标（表示不确定）
- 动画结束后显示真实点数
防重复点击：动画期间禁用按钮
纯 Flutter 实现：不依赖图片资源，完全代码绘制

这些需求背后隐藏着多个技术难点：

如何组合多个动画（旋转 + 位移）？
如何在动画结束后才更新点数，避免"穿帮"？
如何高效绘制不同点数的骰面？

接下来，我们将逐层拆解。

🌀 动画系统：`AnimationController` 与复合动画编排

核心组件：`SingleTickerProviderStateMixin`

dart 复制代码

class _DiceScreenState extends State<DiceScreen> with SingleTickerProviderStateMixin

必要条件 ：使用 AnimationController 必须混入此 mixin
作用：提供 vsync（垂直同步）信号，防止后台动画消耗资源

动画控制器初始化

dart 复制代码

_animationController = AnimationController(
  duration: const Duration(milliseconds: 800),
  vsync: this,
);

时长 800ms：足够长以体现动画，又不至于拖沓

1. 旋转动画（`_rotateAnimation`）

dart 复制代码

_rotateAnimation = Tween<double>(begin: 0, end: 2 * π).animate(
  CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
);

完整一圈 ：2π 弧度（约 360°）
缓动曲线 ：easeInOut 起停自然

2. 弹跳动画（`_bounceAnimation`）

dart 复制代码

_bounceAnimation = TweenSequence<double>([
  TweenSequenceItem(tween: Tween(begin: 0.0, end: -30.0), weight: 40),
  TweenSequenceItem(tween: Tween(begin: -30.0, end: 0.0), weight: 60),
]).animate(
  CurvedAnimation(parent: _animationController, curve: Curves.bounceOut),
);

TweenSequence ：将动画分为两段
- 前 40%：向上移动 30px（模拟抛起）
- 后 60% ：落回原位，并带 bounceOut 弹性效果
Y 轴负值：Flutter 坐标系中，负 Y 表示向上

动画状态监听

dart 复制代码

_animationController.addStatusListener((status) {
  if (status == AnimationStatus.completed) {
    setState(() { _isRolling = false; });
  }
});

精准控制：仅在动画真正结束时解除"滚动中"状态

🎮 交互逻辑：状态机与防抖设计

核心状态变量

dart 复制代码

int _diceValue = 1;
bool _isRolling = false;

掷骰流程

dart 复制代码

void _rollDice() {
  if (_isRolling) return; // 防重复点击

  setState(() { _isRolling = true; });

  _animationController.forward(from: 0).then((_) {
    final newValue = 1 + Random().nextInt(6);
    setState(() { _diceValue = newValue; });
  });
}

关键设计亮点

动画与数据分离：
- 动画期间显示 Icons.casino（通用骰子图标）
- 动画结束后才生成并设置真实点数
- ✅ 避免用户看到"点数在旋转中变化"的穿帮效果
防抖保护 ：if (_isRolling) return; 确保动画不被中断
重置动画 ：forward(from: 0) 保证每次从头播放

🖌️ 自定义绘制：`CustomPaint` 实现骰子点阵

为什么不用图片？

包体积小：无需引入 6 张 PNG
可缩放无损：矢量绘制，任意尺寸清晰
主题适配：颜色可随主题动态变化

`DicePainter` 绘制逻辑

dart 复制代码

void paint(Canvas canvas, Size size) {
  final paint = Paint()..color = Colors.black..style = PaintingStyle.fill;
  final centerX = size.width / 2;
  final centerY = size.height / 2;
  final padding = size.width * 0.2; // 内边距比例
  final radius = 6.0;

  void drawDot(double x, double y) {
    canvas.drawCircle(Offset(x, y), radius, paint);
  }

  switch (value) {
    case 1: drawDot(centerX, centerY); break;
    case 2: 
      drawDot(padding, padding);
      drawDot(size.width - padding, size.height - padding);
      break;
    // ... 其他 case
  }
}

点阵布局标准（符合真实骰子）

点数	布局说明
1	中心一点
2	左上 + 右下
3	2 的基础上加中心
4	四角各一点
5	4 的基础上加中心
6	左右两列，每列三点

💡 技巧：使用 padding = size.width * 0.2 实现响应式内边距，确保在不同尺寸下比例一致。

性能优化：`shouldRepaint`

dart 复制代码

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;

简单场景：点数变化即重绘
进阶优化 ：可比较 oldDelegate.value != value 减少不必要重绘

🧱 UI 构建：`AnimatedBuilder` 与高效重绘

为什么用 `AnimatedBuilder`？

直接在 build 中使用 _rotateAnimation.value 会导致 整个 Widget 树重建 。而 AnimatedBuilder 仅重建其 builder 子树，性能更优。

dart 复制代码

AnimatedBuilder(
  animation: _animationController,
  builder: (context, child) {
    return Transform.rotate(
      angle: _rotateAnimation.value,
      child: Transform.translate(
        offset: Offset(0, _bounceAnimation.value),
        child: Container(...),
      ),
    );
  },
)

嵌套变换顺序

先旋转 ：Transform.rotate
再平移 ：Transform.translate

⚠️ 注意：变换顺序影响最终效果。此处先绕中心旋转，再整体上下移动，符合物理直觉。

🎨 视觉设计：Material 3 与细节打磨

1. 骰子容器

圆角：borderRadius: 20
阴影：BoxShadow 模拟立体感
白色背景：经典骰子外观

2. 按钮设计

dart 复制代码

ElevatedButton.icon(
  style: ElevatedButton.styleFrom(
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
  ),
)

大圆角：24dp，符合 Material 3 容器风格
图标+文字：提升识别度

3. 状态提示

动画中：不显示点数（避免干扰）
动画后：显示"当前点数：X"，增强反馈

🧹 资源清理：动画控制器释放

dart 复制代码

@override
void dispose() {
  _animationController.dispose();
  super.dispose();
}

这是使用 AnimationController 的 强制要求，否则会导致内存泄漏和性能问题。

🚀 扩展方向：从单骰到多骰游戏

当前实现可轻松扩展为更复杂的游戏：

1. 多骰子支持

使用 List<int> 存储多个点数
并排显示多个 DiceFace
添加"总和"显示

2. 历史记录

记录最近 10 次掷骰结果
用柱状图展示点数分布

3. 音效与震动

集成 audioplayers 播放掷骰音效
使用 vibrate 插件提供触觉反馈

4. 3D 效果（进阶）

使用 flutter_cube 或 three_dart 实现 3D 骰子旋转
更真实的物理模拟

✅ 总结：小动画，大学问

这个掷骰子应用约 150 行代码，却完整体现了 Flutter 高级动画与绘制的核心能力：

技术点	实现方式	价值
复合动画	`TweenSequence` + 多 `Animation`	模拟真实物理效果
状态同步	动画完成回调 + `setState`	避免视觉穿帮
自定义绘制	`CustomPaint` + `Canvas`	无资源依赖，矢量清晰
性能优化	`AnimatedBuilder`	减少不必要的 rebuild
交互细节	防抖 + 状态反馈	提升用户体验

它证明了：优秀的微交互，不在炫技，而在对用户心理预期的精准满足。

Happy Coding with Flutter! 🐦

愿你的每一行动画代码，都能带来一丝惊喜与愉悦。

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

Flutter for OpenHarmony：构建一个沉浸式 Flutter 掷骰子游戏,深入解析动画控制器、CustomPaint 自定义绘制与状态同步