像一位魔法师一样使用Flutter，使用Flare书写动画！

2023-09-13 21:01:42

Flutter动画的秘密武器——Flare

Flare 是一种动画工具包，它可以让您创建出令人惊叹的 UI 动画。它使用矢量图形作为基础，这意味着您可以创建出清晰锐利的动画，无论屏幕分辨率如何。
快速上手 Flare

如果您想使用 Flare，首先需要安装它。您可以从 Flutter 的网站上下载 Flare 插件。

安装好 Flare 之后，您就可以创建一个新的项目。为此，请打开 Flare 编辑器，然后单击“新建项目”。在弹出的对话框中，选择“Flutter”作为目标平台。
核心流程

创建一个 Flare 项目后，您就可以开始创建动画了。首先，您需要创建一个矢量图形。您可以使用任何您喜欢的矢量图形软件，比如 Adobe Illustrator 或 Sketch。

创建好矢量图形后，您就可以将其导入 Flare 编辑器中。在编辑器中，您可以对图形进行各种编辑，比如添加骨骼、权重和动画。
导出动画到Flutter项目

创建好动画后，您就可以将其导出到您的 Flutter 项目中。为此，请单击“导出”按钮，然后选择“Flutter”作为导出格式。

导出动画后，您就可以在您的 Flutter 项目中使用它了。为此，请将导出的文件复制到您的 Flutter 项目的“assets”文件夹中。然后，您就可以在您的代码中使用它了。
实例展示：制作一个会跳舞的小人

现在，我们来举一个例子，看看如何使用 Flare 来制作一个会跳舞的小人。

首先，我们需要创建一个矢量图形。我们可以使用 Adobe Illustrator 或 Sketch 来创建这个图形。

创建好矢量图形后，我们就可以将其导入 Flare 编辑器中。在编辑器中，我们可以对图形进行各种编辑，比如添加骨骼、权重和动画。

创建好动画后，我们就可以将其导出到我们的 Flutter 项目中。导出的文件名为“小人.flr”。

接下来，我们需要在我们的 Flutter 项目中使用这个动画。为此，我们需要在“pubspec.yaml”文件中添加以下依赖：

dependencies:
  flare_flutter: ^2.0.0

添加好依赖后，我们需要在我们的代码中导入 Flare 包：

import 'package:flare_flutter/flare_flutter.dart';

现在，我们就可以在我们的代码中使用 Flare 动画了。例如，我们可以创建一个名为“小人”的类，并在其中使用 Flare 动画：

class 小人 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlareActor(
      "assets/小人.flr",
      animation: "跳舞",
    );
  }
}