如何在 Flutter 中添加 Rive 动画

Question

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

Answer 1

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

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

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

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

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

2. 现在，打开 VS Code 或 Android Studio 并 在应用程序的根目录中创建新的文件夹 资产并粘贴您从 rive 下载的文件。我在资产文件夹中有 2 个文件。

   

3. 现在，由于动画已完成并加载到项目中。在您的 文件中添加 rive 和flare_flutter插件依赖项pubspec.yaml：

   

4. 但是，现在我们将创建一个简单的小部件，它使用 小部件animation 可用 的字段加载其中一个动画 FlareActor。

   FlareActor(
     'assets/loading_animation_sun_flare.flr',
     animation: 'My Test',
   )
   

   注意：不要忘记给出你在 Rive 上设置动画名称的动画字段类型，就像在这个例子中我在 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/