Flutter 动画

动画是 Flutter 中一个非常强大且重要的概念。 我们无法想象没有任何动画的移动应用程序。 当您点击按钮或从一个页面移动到另一个页面时，所有这些都是动画。 动画增强了用户体验，并使应用程序更具互动性。

Flutter 提供了对动画的极佳支持，可以将动画分为两个主要类别，如下所示：

• Tween 动画
• 基于物理的动画

Tween 动画

它是 in-betweening 的简写形式。 在 Tween 动画中，需要定义动画的起始和终点。 这意味着动画从起始值开始，然后经历一系列中间值，最后达到终点值。 它还提供时间线和曲线，用于定义过渡的时间和速度。 Widget 框架提供了一种计算如何从起始点过渡到终点的方法。

示例

基于物理的动画

这是一种动画类型，可让您的应用程序交互感觉逼真和互动。 它模拟真实世界的动画/运动，例如您想要使用重力来动画一个小部件，如弹簧、掉落或摆动。 因此，它是一种响应用户输入/运动而进行动画的动画。 最简单的例子是飞行时间，并且将根据物理定律计算所覆盖的行进距离。

Flutter 提供了两种动画技术。 这些技术是：

1. 隐式动画
2. 显式动画

下图概述了 Flutter 中的动画层次结构，并更清楚地解释了隐式动画和显式动画。

现在，我们将看看如何在 Flutter 中创建显式动画。 动画主要有三个支柱，如下所示：

1. Ticker
2. Animation 类
3. AnimationController

Ticker

Ticker 是一个类，它以固定的时间间隔发送信号，即大约每秒 60 次。 您可以用手表来理解它，手表会以固定的间隔滴答作响。 在每次滴答声时，Ticker 提供一个回调方法，其中包含自开始后每秒第一次滴答声以来的持续时间。 即使计时器在不同的时间开始，它也会自动同步。 其背后的原因是，计时器给出的经过时间是相对于开始后第一次滴答声而言的。

动画

Animation 类是动画系统的核心构建块。 动画只不过是表示可以在动画生命周期内更改的值（特定类型）。 在 Flutter 中，执行动画的小部件将动画对象作为参数。 此 Animation 对象提供信息，它们从中读取动画的当前值，并监听该值的更改。 Animation 类包含两个方法 addListener() 和 addStatusListener()。 当动画的值发生更改时，它会通知使用 addListener() 添加的所有侦听器。 同样，当动画的状态发生更改时，它会通知使用 addStatusListener() 添加的所有侦听器。

最常见的 Animation 类是：

• Animation<double>: 它在特定持续时间内在两个十进制数字之间插入值。
• Animation<Color>: 它在两个颜色值之间插入颜色。
• Animation<Size>: 它在两个大小值之间插入大小。

动画控制器

动画控制器是一个类，允许我们控制动画。 每当应用程序准备好新帧时，它总是生成新值。 例如，它可以控制动画的启动、停止、前进或重复。 创建动画控制器后，我们可以开始在其基础上构建其他动画，例如反向动画和曲线动画。

在此，duration 选项控制动画过程的持续时间，vsync 选项用于优化动画中使用的资源。

使用 AnimationController 所需的基本步骤是：

步骤 1： 首先，使用参数（例如持续时间和 vsync）实例化一个 AnimationController。

步骤 2： 添加所需的侦听器，例如 addListener() 或 addStatusListener()。

步骤 3： 启动动画。

步骤 4： 在侦听器回调方法中执行操作（例如，setState）。

步骤 5： 最后，释放动画。

让我们看一个简单的动画示例，该示例使用动画类和动画控制器。 以下示例显示了 Tween 动画，它给出了动画的起始点和终点。 打开项目并将以下代码替换为 main.dart 文件。

输出

当您在 Android Studio 中运行应用程序时，您将获得输出。 在屏幕中，您将看到 Flutter 徽标正在缩放前进和反向方向。

曲线动画

当您需要将非线性曲线应用于动画对象时，曲线动画非常有用。 因此，它将动画的进度定义为非线性曲线。

语法

让我们用前面的例子来理解它。 要添加曲线，请在 Android Studio 中打开上一个应用程序，然后添加 CurvedAnimation 而不是 animationController。 或替换以下行

用下面的这行。

现在，当您运行该应用程序时，您将在正向和反向方向缩放期间看到 Flutter 徽标带有弹跳效果。

Hero 动画

Hero 动画是一种动画类型，其中一个屏幕的元素在应用程序进入下一页时飞到新屏幕。 我们可以用以下示例来理解它，在该示例中，动画采用一个元素（如图标/图像），一旦您点击该图标，屏幕就会飞到下一页。 以下示例更清楚地解释了这一点。

打开 Flutter 应用程序，并将以下代码替换为 main.dart 文件。

输出

当您在 Android Studio 中运行应用程序时，您将获得以下屏幕。

要显示 Hero 动画，请点击绿色图标，它将立即飞到新屏幕，您将在其中获得有关点击项目的详细信息。