Flutter 发牌效果

Question

我正在寻找一种发牌效果，这样就有一副牌，然后在单击时，它会将牌发到网格视图（牌移动到网格中的位置）以便用户使用玩记忆游戏。它与英雄动画非常相似，只是它不是过渡（或者可能是？我不确定）

有没有办法在 Flutter 中做到这一点？

Answer 1

与其尝试使用 GridView，不如将卡片（我假设是一系列 Image 小部件）放入 Stack，然后使用 AnimatedPositioned 小部件来移动它。例如：

  Stack(
    children: [
      AnimatedPositioned(
        duration: const Duration(milliseconds: 500),
        left: 20, // try change this to `0` and "hot reload"
        top: 20,
        child: FlutterLogo(),
      ),
      AnimatedPositioned(
        duration: const Duration(milliseconds: 500),
        left: 30,
        top: 30,
        child: FlutterLogo(),
      ),
    ],
  ),

与上面的代码示例类似，但您可以使用 _slided ? 20 : 0 等变量，而不是使用 20 等硬编码值。每当您希望动画发生时，只需切换布尔变量并调用设置状态即可。

为了让它更逼真，你可以将curve: Curves.easeOut传递给AnimatedPositioned小部件，这样移动动画开始时会更快，然后逐渐变慢（就像卡片在table并逐渐因摩擦而完全停止）。

Flutter 发牌效果

Flutter card dealing effect

flutter

flutter-animation