flutter - 如何在 Flutter 中添加 Rive 动画

Question

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

Answer 1

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

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

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

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

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

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

   

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

   

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

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

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