Flutter动画渲染插件flare_flutter的使用

Flutter动画渲染插件flare_flutter的使用

Flare-Flutter 是一个用于在 Flutter 中渲染 Flare 动画的运行时库，它依赖于 flare_dart 库。

安装

在你的 pubspec.yaml 文件中添加 flare_flutter 作为依赖。如果你打算编写自定义控制器或者想要访问库的更多功能，你还需要包含 flare_dart，它是负责加载、实例化、动画处理等工作的基础库。示例包括了这两种场景的用法。

dependencies:
  flutter:
    sdk: flutter
  flare_flutter: ^4.0.0
  flare_dart: ^4.0.0

导出为 Flutter

从 Flare 导出文件时，选择“导出到引擎”菜单，在引擎下拉列表中选择“Flutter”，并在格式下拉列表中选择你最喜欢的压缩格式。

添加资源

将导出的 .flr 文件添加到项目的 Flutter 资源中。

示例

你可以查看提供的 示例应用 来了解如何使用 FlareActor 小部件嵌入导出的 Flutter 角色动画。

使用方法

最简单的方法是使用提供的 FlareActor 小部件。这是一个无状态的 Flutter 小部件，允许你在 Flutter 应用中嵌入一个 Flare 文件的一个活动动画。

你可以通过改变 animation 属性的名称来切换当前播放的动画。你还可以指定 mixSeconds 来确定动画从上一个动画过渡所需的时间。值为 0 表示直接跳转到新的动画。值为 0.5 表示新动画将在旧动画之上完全混合需要半秒。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flare Animation Example')),
        body: Center(
          child: FlareActor(
            "assets/Filip.flr",
            alignment: Alignment.center,
            fit: BoxFit.contain,
            animation: "idle",
          ),
        ),
      ),
    );
  }
}

更多关于Flutter动画渲染插件flare_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画渲染插件flare_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 flare_flutter 插件在 Flutter 中渲染动画的示例代码。flare_flutter 是一个强大的插件，用于在 Flutter 应用中渲染 2D 动画，这些动画通常使用 Riverpod Studio 的 Flare 工具创建。

首先，确保你已经在 pubspec.yaml 文件中添加了 flare_flutter 依赖：

dependencies:
  flare_flutter: ^3.0.2  # 请检查最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，你需要一个 .flr 文件，这是 Flare 动画文件。假设你已经有一个名为 animation.flr 的文件，并且它包含了一个名为 untitled 的动画。

以下是一个完整的 Flutter 应用示例，展示如何使用 flare_flutter 来渲染这个动画：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flare Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flare Animation Demo'),
        ),
        body: Center(
          child: FlareActor(
            'assets/animation.flr', // 确保动画文件已放置在 assets 文件夹下
            animation: 'untitled', // 动画名称
            fit: BoxFit.contain,
            alignment: Alignment.center,
            callback: (String animationName) {
              // 动画完成时的回调
              print('Animation $animationName completed!');
            },
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 导入必要的包：flare_flutter 和 flutter/material.dart。
  2. 定义主函数：void main() => runApp(MyApp());，这是 Flutter 应用的入口点。
  3. 创建 MyApp 类：它继承自 StatelessWidget 并定义了应用的根结构。
  4. 在 MyApp 的 build 方法中：
    • 使用 MaterialApp 创建了一个 Material 风格的应用。
    • 使用 Scaffold 创建了一个包含 AppBar 和 Center 小部件的页面。
    • 在 Center 小部件中，使用了 FlareActor 小部件来渲染 Flare 动画。
      • assets/animation.flr：指定了动画文件的路径（确保在 pubspec.yaml 的 flutter: 部分添加了对应的资源路径）。
      • animation: 'untitled'：指定了要播放的动画名称。
      • fit: BoxFit.contain 和 alignment: Alignment.center：控制动画如何适应其父容器。
      • callback：提供了一个回调函数，当动画完成时会被调用。

在 pubspec.yaml 中添加资源路径的示例：

flutter:
  assets:
    - assets/animation.flr

这样，当你运行这个 Flutter 应用时，你应该能够看到 Flare 动画在屏幕上播放。这个示例展示了基本的 Flare 动画渲染，flare_flutter 还支持更多的高级功能，比如控制动画播放、循环等，你可以查阅官方文档获取更多信息。

回到顶部