带有Flutter隐性动画的颜色/数字游戏有没有想过用一些动画来为您的Flutter应用程序增色，但不知道怎么做？隐式

有没有想过用一些动画来为您的Flutter应用程序增色，但不知道怎么做？

隐式动画通常是最简单的方法，本教程将告诉您如何使用它们。

但首先，这里有一个我为你建立的有趣的游戏。你可以在这个嵌入式Flutter网络视图上直接运行它。

Flutter网页演示：使用隐式动画的颜色/数字游戏

这个游戏的目的是按照指示，点击正确的项目。但这有点像脑筋急转弯，因为文字的颜色和文字的内容是不匹配的。

所以，玩一玩这个游戏，看看你是否能打败我的高分，也就是11分。

这些动画是怎么做的？

这里有一个Dartpad操场，你可以用它来运行这个游戏并研究代码。

颜色/数字游戏。要以单独的Dartpad窗口打开，请点击此链接。

这个操场玩的游戏和上面的一样，但不包括动画代码。所以我们来看看如何启用它。

一个好的开始是看一下build() 方法。这将返回一个Stack ，其中包含一些子节点，包括一些Align 小部件。

// Player
// TO DO: Convert to AnimatedAlign & add a duration argument
Align(
  alignment: _playerAlignment,
  child: Container(
    width: 100,
    height: 100,
    decoration: BoxDecoration(
      color: _targetData.color,
      shape: BoxShape.circle,
    ),
  ),
),
// Targets
for (var i = 0; i < _targetColors.length; i++)
  GestureDetector(
    // Handle taps on targets
    onTapDown: (details) => _handleTapDown(details, i),
    // TO DO: Convert to AnimatedAlign & add a duration argument
    child: Align(
      alignment: _targets[i],
      child: Target(
        color: _targetColors[i],
        textColor: _textColors[i],
        text: i.toString(),
      ),
    ),
  ),

这段代码负责渲染玩家（游戏中的大圆圈），以及所有的目标（里面有文字的小圆圈）。

这段代码使用Align 小部件来定位玩家和目标在屏幕上的特定位置。

每当我们点击一个目标，所有的目标就会立即移动到一个新的随机位置。但我们怎样才能把它变成一个动画过渡呢？AnimatedAlign 就是答案。

Align → AnimatedAlign

AnimatedAlign 是你可以在Flutter中使用的许多 隐含的动画小部件之一。

让我们看看如何使用它，先关注一下播放器。我们所要做的就是把这段代码。

Align(
  alignment: _playerAlignment,
  child: Container(
    width: 100,
    height: 100,
    decoration: BoxDecoration(
      color: _targetData.color,
      shape: BoxShape.circle,
    ),
  ),
)

到这个。

// 1. convert to AnimatedAlign
AnimatedAlign(
  alignment: _playerAlignment,
  // 2. Add a duration
  duration: Duration(milliseconds: 250),
  child: Container(
    width: 100,
    height: 100,
    decoration: BoxDecoration(
      color: _targetData.color,
      shape: BoxShape.circle,
    ),
  ),
)

就这样了。如果我们再次运行这个应用程序，我们可以看到，每当我们点击某个地方，播放器（大圆圈）现在就会以动画的形式出现在新的位置。

同样地，我们可以通过将目标转换为AnimatedAlign widgets来实现动画：

for (var i = 0; i < _targetColors.length; i++)
  GestureDetector(
    // Handle taps on targets
    onTapDown: (details) => _handleTapDown(details, i),
    // 1. convert to AnimatedAlign
    child: AnimatedAlign(
      alignment: _targets[i],
      // 2. Add a duration
      duration: Duration(milliseconds: 250),
      curve: Curves.easeInOut,
      child: Target(
        color: _targetColors[i],
        textColor: _textColors[i],
        text: i.toString(),
      ),
    ),
  ),

工作完成。我们现在可以玩这个游戏了，一切都在运动中。 🙂然而，玩家和目标都以恒定的速度移动，这不是物体在现实世界中的表现。

曲线我们

可以调整动画曲线，使转换的速度感觉更自然一些。

curve 为了达到这个目的，我们需要给我们的AnimatedAlign widgets添加一个参数：

curve: Curves.easeInOut,

而如果我们再次运行，我们可以看到，当一个新的过渡发生时，所有的项目都以更自然的方式移动。

Flutter网页演示：使用Implicit Animations的颜色/数字游戏Flutter

支持各种预制的曲线。请查看曲线类的文档以了解更多信息。Flutter的所有隐式动画部件都需要一个curve 参数，您也可以使用显式动画的曲线。

我在哪里可以学到更多关于动画的知识？

很高兴你这么问。Flutter文档中有一个非常好的动画介绍，在那里您可以了解到所有的基础知识。