Flutter动画加载插件 rive_loading 的使用

rive_loading 是一个基于 Rive 动画的加载小部件，允许您创建自定义加载小部件或对话框。本文将介绍如何在 Flutter 项目中使用 rive_loading 插件，并提供完整的示例代码。

安装

首先，在您的 pubspec.yaml 文件中添加 rive_loading 依赖：

dependencies:
  rive_loading: ^0.1.6

然后运行 flutter pub get 来安装该插件。

使用方法

基本用法

以下是一个基本的 RiveLoading 小部件的使用示例：

RiveLoading(
  name: 'animation.riv',
  startAnimation: 'intro',
  loopAnimation: 'circle',
  endAnimation: 'end',
);

参数说明

• name: Rive 动画的路径和名称。
• until: 返回一个 Future 的回调函数，用于处理初始化过程。
• isLoading: 如果您想通过布尔值管理加载状态，则可以使用此参数（作为 until 的替代）。
• loopAnimation: 要循环播放的动画名称。
• endAnimation: 当 until 完成或 isLoading 为 false 时要播放的结束动画名称。
• startAnimation: 开始时要播放一次的动画名称。
• height: 强制设置 Rive 动画的高度，默认情况下它会占用所有可用空间。
• width: 强制设置 Rive 动画的宽度，默认情况下它会占用所有可用空间。
• alignment: 设置 Rive 动画的对齐方式，默认居中。
• onSuccess: 当动画完成且 isLoading 为 false 或 until 完成时调用的回调函数。
• onError: 当 until 失败时调用的回调函数。

可用模式

根据您的需求，您可以选择不同的动画模式：

单个动画

如果您只需要显示一个动画并停留在最后一帧，只需指定 startAnimation：

RiveLoading(
  name: 'loading.riv',
  startAnimation: 'loading',
);

开始和循环动画

如果您的动画有一个开头和一个循环部分，只需指定 startAnimation 和 loopAnimation：

RiveLoading(
  name: 'loading.riv',
  startAnimation: 'intro',
  loopAnimation: 'loading',
);

结束和循环动画

如果您的动画有一个结束部分和一个循环部分，只需指定 endAnimation 和 loopAnimation：

RiveLoading(
  name: 'loading.riv',
  endAnimation: 'success',
  loopAnimation: 'loading',
);

开始和结束动画

如果您的动画有一个开头和一个结束部分，只需指定 startAnimation 和 endAnimation：

RiveLoading(
  name: 'loading.riv',
  startAnimation: 'intro',
  endAnimation: 'success',
);

开始、结束和循环动画

如果您的动画有一个开头、一个结束部分和一个循环部分，需指定 startAnimation、endAnimation 和 loopAnimation：

RiveLoading(
  name: 'loading.riv',
  startAnimation: 'intro',
  loopAnimation: 'loading',
  endAnimation: 'success',
);

示例代码

下面是一个完整的示例代码，展示了如何在实际应用中使用 rive_loading 插件：

import 'package:flutter/material.dart';
import 'package:rive_loading/rive_loading.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RiveLoading(
            name: 'loading.riv',
            loopAnimation: 'loading',
            endAnimation: 'success',
            width: 200,
            height: 200,
            fit: BoxFit.fill,
            until: () => Future.delayed(Duration(seconds: 5)),
            onSuccess: (_) {
              print('Finished');
            },
            onError: (err, stack) {
              print('error: $err');
            },
          ),
          Expanded(
            child: Row(
              children: <Widget>[
                Expanded(
                  child: RiveLoading(
                    name: 'loading.riv',
                    loopAnimation: 'loading',
                    endAnimation: 'success',
                    isLoading: _isLoading,
                    onSuccess: (_) {
                      print('Finished');
                    },
                    onError: (err, stack) {
                      print(err);
                    },
                  ),
                ),
                ElevatedButton(
                  child: Text('Toggle loading'),
                  onPressed: () => setState(
                    () {
                      _isLoading = !_isLoading;
                    },
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}