Flutter通过Flare添加2D动画

Animations can breathe life into your app, making it more engaging and stunning. While Flutter provides a wide range of built-in animation widgets, sometimes you may need more complex animations. This is where Flare comes in. It's a powerful tool that allows you to add beautifully crafted 2D animations to your app.

动画可以为您的应用程序注入活力，使其更吸引人、更令人惊叹。虽然 Flutter 提供了大量内置动画部件，但有时您可能需要更复杂的动画。这就是 Flare 的用武之地。Flare 是一款功能强大的工具，可以为您的应用程序添加精美的二维动画。

What is Flare?

什么是 Flare？

Flare is a special tool made by 2Dimensions for crafting cool, smooth animations. These animations are super clear and sharp no matter what device you're using---whether it's a phone or a computer. They're perfect for spicing up mobile apps or websites!

Flare 是 2Dimensions 制作炫酷流畅动画的专用工具。无论您使用的是手机还是电脑，这些动画都非常清晰锐利。它们非常适合为移动应用程序或网站增色！

Here's how you can use Flare animations in your app:

下面介绍如何在应用程序中使用 Flare 动画：

Step 1: Install the flare_flutter Package

第 1 步：安装 flare_flutter 软件包

To get started with Flare in Flutter, you'll need to add the flare_flutter package to your pubspec.yaml file using this command below:

要开始在 Flutter 中使用 Flare，您需要使用下面的命令将 flare_flutter 软件包添加到您的 pubspec.yaml 文件中：

flutter pub add flare_flutter
flutter pub get

Don't forget to run flutter pub get to fetch the package. Here is the link to official documentation for this package

别忘了运行 flutter pub get 获取软件包。以下是该软件包官方文档的链接

Step 2: Create or Get a Flare Animation

第 2 步：创建或获取炫光动画

You can create your animations using the Flare design tool, or you can find pre-made Flare animations on websites like FlareFiles or [Rive] (https://rive.app/). Export the animations in .flr format, which is compatible with the flare_flutter package.

您可以使用 Flare 设计工具创建动画，也可以在 FlareFiles 或 [Rive] (https://rive.app/) 等网站上找到预制的 Flare 动画。以 .flr 格式导出动画，这种格式与 flare_flutter 软件包兼容。

我这里从Github找了一个: https://github.com/2d-inc/Flare-Flutter/blob/master/example/simple/assets/Animals.flr

Step 3: Add the FlareActor Widget

第 3 步：添加 FlareActor 部件

In your Flutter app, use the FlareActor widget to display the Flare animation. You'll need to provide the path to your .flr file and specify the animation you want to play.

在 Flutter 应用程序中，使用 FlareActor 部件显示 Flare 动画。您需要提供 .flr 文件的路径，并指定要播放的动画。

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

void main() {
  runApp(FlareAnimationExample());
}

class FlareAnimationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flare 2D动画"),
        ),
        body: const Center(
          child: FlareActor(
            "assets/Animals.flr", // 动画文件
            animation: "idle", // 动画格式
          ),
        ),
      ),
    );
  }
}

Step 4: Customize and Control the Animation

步骤 4：自定义和控制动画

You can customize various aspects of the animation, such as its size, alignment, and position, using the properties of the FlareActor widget. Additionally, you can control the animation's playback by changing the animation property. For example, to play a different animation when a button is pressed:

您可以使用 FlareActor widget 的属性自定义动画的各个方面，如大小、对齐方式和位置。此外，您还可以通过更改动画属性来控制动画的播放。例如，要在按下按钮时播放不同的动画：

FlatButton(
  onPressed: () {
    // Change to a different animation
    setState(() {
      _animationName = 'your_animation_name';
    });
  },
  child: Text('Play Animation'),
),

Step 5: Run Your Flutter App

步骤 5：运行 Flutter 应用程序

Run your Flutter app, and you'll see the Flare animation in action. You can integrate these animations into various parts of your app, such as splash screens, loading indicators, or interactive elements.

运行您的 Flutter 应用程序，您将看到 Flare 动画的实际效果。您可以将这些动画集成到应用程序的各个部分，例如闪屏、加载指示器或交互元素。

Flare opens up a world of possibilities for adding rich animations to your Flutter app without compromising performance. Whether you need subtle transitions or complex character animations, Flare can help you create captivating user experiences. Be sure to explore the Flare documentation for more details and advanced usage.

Flare 为您在 Flutter 应用程序中添加丰富的动画而不影响性能提供了无限可能。无论您需要微妙的过渡还是复杂的角色动画，Flare 都能帮助您创建迷人的用户体验。请务必查看 Flare 文档，了解更多详情和高级用法。

Remember to import the necessary packages:

记住要导入必要的软件包：

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

完整代码

pubspec.yaml

name: c01_hello
description: "A new Flutter project."
publish_to: 'none'
version: 1.0.0+1
environment:
  sdk: ^3.5.3
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  get:
  flare_flutter:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^4.0.0
flutter:
  uses-material-design: true
  assets:
    - assets/1.jpg
    - assets/2.jpg
    - assets/3.jpg
    - assets/Animals.flr

main.dart

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

void main() {
  runApp(FlareAnimationExample());
}

class FlareAnimationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flare 2D动画"),
        ),
        body: const Center(
          child: FlareActor(
            "assets/Animals.flr", // 动画文件
            animation: "idle", // 动画格式
          ),
        ),
      ),
    );
  }
}