如何在 Flutter 中添加 Rive 动画

Question

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

Answer 1

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

借助 Rive 云应用程序，创建动画现在变得非常容易，它可以让您生成 flr 文件，然后可以在 Flutter 上运行申请

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

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

文件扩展名应为.flr，格式应为二进制。

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

完整代码如下：

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/

如何在 Flutter 中添加 Rive 动画

How to add Rive animations in Flutter

flutter

dart

animation

flutter-animation

rive