如何在 Flutter 中添加 Rive 动画答案

【问题标题】：How to add Rive animations in Flutter如何在 Flutter 中添加 Rive 动画
【发布时间】：2021-03-17 04:02:20
【问题描述】：

众所周知，Rive 是一个非常有用的动画工具，可以创建漂亮的动画，我们可以将它们添加到我们的应用程序中。但是我们如何实现以及如何使用 Rive 应用程序和flare_flutter 插件创建一个超酷的动画？

【问题讨论】：

标签： flutter dart animation flutter-animation rive

【解决方案1】：

回答我自己的问题以分享我的知识

在 Rive Cloud 应用的帮助下，现在创建动画真的很容易，它可以让您生成 flr 文件，然后可以使用这些文件在 Flutter 应用上运行。

这是在我们的 Flutter 应用中实现 rive 的分步过程

第一步是继续https://rive.app/explore/popular/trending/all。并创建或您想要的任何动画导出由其他用户创建的动画。点击任意动画，然后点击在 Rive 中打开。然后点击导出按钮下载。

文件扩展名应为 .flr，格式应为 Binary。

现在，打开 VS Code 或 Android Studio 并在应用程序的根目录中创建新文件夹 assets 并粘贴您从 rive 下载的文件。我的资产文件夹中有 2 个文件。
现在动画已完成并加载到项目中。在 pubspec.yaml 文件的依赖项中添加 rive 和 flare_flutter 插件：
但是，现在我们将创建一个简单的小部件，该小部件使用animation 字段加载其中一个动画，该字段可用于FlareActor 小部件。
```
FlareActor(
  'assets/loading_animation_sun_flare.flr',
  animation: 'My Test',
)
```
注意：不要忘记给出你在 Rive 上设置动画名称的动画字段类型，就像在这个例子中我设置了“我的测试”和“Untitled”在 FlareActor Widget 中，否则您将无法获得任何动画效果。

这里是完整的代码：

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

void main() => runApp(HomePage());

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Coflutter - Dismiss Keyboard',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Rive Animation'),
          backgroundColor: Colors.deepPurple,
        ),
        body: RiveAnimationPage(),
      ),
    );
  }
}

class RiveAnimationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Container(
              width: 700,
              height: 300,
              child: FlareActor(
                "assets/loading_animation_sun_flare.flr",
                animation: "My Test",
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
                width: 400,
                height: 400,
                child: FlareActor(
                  'assets/Success_Check.flr',
                  animation: 'Untitled',
                )
            ),
          )
        ],
      )
    );
  }
}

欲了解更多信息，请参阅：https://androidmonks.com/flutter-rive-animated-buttons/

【讨论】：