Flutter动画展示插件overlay_lottie的使用

展示互动性在应用程序中非常重要，即使在执行阻塞任务（如登录）时也是如此。在这些期间，可以使用神奇的 Lottie Files 展示一个精美的动画。

虽然构建和展示动画很容易，但根据 StatefulWidget 的状态来构建它会更简单。而且如果不需要控制何时停止展示动画（例如，当动画结束、重复特定次数或任务完成时），那就更好了。

这个包提供了一个混入类，简化了在任意小部件上叠加 Lottie 动画的过程，以便在执行长时间任务时显示活动。

特性

这个混入类的基本特性包括：

1. 从动画开始到结束展示一次（即 1 次循环）

   

2. 从动画开始到结束展示多次（即多次循环）

   

3. 在限定时间内展示动画（例如 2 秒）

   

4. 在执行函数期间展示动画

   

开始使用

要开始使用此包，请将其添加到您的 pubspec.yaml 文件中：

dependencies:
    overlay_lottie:

然后获取依赖项（例如 flutter pub get），并在应用中导入它们：

import 'package:overlay_lottie/overlay_lottie.dart';

使用方法

您需要将混入类添加到您的 StatefulWidget 中，并且与 TickerProviderStateMixin 混入一起使用。然后在 build 方法中使用 buildWithLottieOverlay 函数：

class _LottieOverlayHomeState extends State<LottieOverlayHome> with TickerProviderStateMixin, OverlayLottie {
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: null,
            body: buildWithLottieOverlay(
                animationUrl: "https://assets6.lottiefiles.com/packages/lf20_fj8rlma5.json",
            ),
            child: Center(
                child: ElevatedButton(
                    onPressed: () => showLottieOverlay(repetitions: 1),
                    child: const Text("show Lottie")
                )
            )
        );
    }
}

这将产生以下应用：

额外信息

有多种机制和选项可以控制如何以及何时显示覆盖层：通过编程隐藏动画（即 showLottieOverlay … hideLottieOverlay）、在函数执行期间显示动画，或者在一段时间内显示动画。

构建覆盖层的函数接口如下：

Widget buildWithLottieOverlay({
      required Widget child, 
      String? animationUrl, 
      Duration? durationPerRepetition, 
      int defaultNumberOfRepetitions = 1, 
      bool blurContent = false, 
      double opacity = 0.8,
      VoidCallback? onHide,
      fadeIn = true
    })

该函数定义了过程的默认值，但其中一些值可以在展示动画时被覆盖。

• child：显示在覆盖层下的内容。
• animationUrl：指向 Lottie 文件的字符串。如果以 https:// 或 http:// 开头，将使用 Lottie.network 创建。否则，将被视为资源文件并使用 Lottie.asset 创建。
• durationPerRepetition：每次循环的持续时间。如果您有一个（例如 4 秒）的动画，但想让它在 2 秒内运行。
• defaultNumberOfRepetitions（默认为 1）：使用 showLottieOverlay 展示动画时，动画需要循环的次数才能自动关闭。如果希望动画不自动关闭并继续重复直到调用 hideLottieOverlay，请设置此值为 double.maxFinite.toInt()。
• blurContent（默认为 false）：如果设置为 true，子部件将被模糊（以产生非交互的感觉）。
• opacity（默认为 0.8）：如果设置为 1 以外的值，子部件将通过此因子设置为半透明。
• onHide：动画隐藏时调用的回调（无论是自动关闭还是使用 hideLottieOverlay 函数关闭）。
• fadeIn：是否在显示动画时添加淡入效果（true 淡入；false 跳过淡入）。

显示覆盖层

有多重函数用于显示覆盖层：

Future<bool> showLottieOverlay({
    bool? force, 
    int? repetitions, 
    String? animationUrl, 
    VoidCallback? onHide
})

这是基本函数，用于展示动画 animationUrl，循环 repetitions 次，并在动画隐藏时调用函数 onHide。如果没有提供 repetitions、animationUrl 或 onHide，则它们将默认为 buildWithLottieOverlay 调用中的值。

如果动画已经正在显示，则小部件的状态不会改变，并且不会调用 onHide。除非参数 force 设置为 true。

该函数返回 Future<bool> 以启用函数链式执行（例如使用 then）。未来的结果指的是动画是否已显示（即 true）或已经显示（即 false）。

void hideLottieOverlay([bool force = false])

此函数隐藏覆盖层并重新启用子部件。该函数旨在在调用 showLottieOverlay 后使用，但建议使用自动关闭功能（例如运行动画几次循环，或在执行函数期间）。

如果动画已经隐藏，则小部件的状态不会改变，除非参数 force 设置为 true。

Future<bool> showLottieOverlayWhile(
    Function callback, 
    {String? animationUrl, Duration? timeout, Function? onTimeout, VoidCallback? onHide}
)

此函数在执行 callback 期间显示 Lottie 动画 animationUrl。可以设置 timeout 用于执行。如果执行时间超过该时间，callback 的执行将被中止，并调用 onTimeout 函数。

如果没有提供 animationUrl 或 onHide，则它们将默认为 buildWithLottieOverlay 调用中的值。

该函数返回 Future<bool>，在 callback 执行完毕（或中止）后解析。因此，可以使用 await 或 then 过程链式执行其他函数。此过程独立于 onHide 回调，因此两者都可能被调用并且 then 可能被执行。

结果为 true 表示动画已显示并隐藏。如果调用 showLottieOverlayWhile 时动画已经显示，则 future 的结果将被设置为 false。

Future<bool> showLottieOverlayDuring(Duration period, {String? animationUrl, VoidCallback? onHide});

此函数在 period 时间内显示 Lottie 动画 animationUrl。如果没有提供 animationUrl 或 onHide，则它们将默认为 buildWithLottieOverlay 调用中的值。

实际上，这是 return showLottieOverlayWhile(() async => await Future.delayed(period), onHide: onHide, animationUrl: animationUrl) 的快捷方式。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Overlay Lottie Demo',
      home: LottieOverlayHome(),
    );
  }
}

class LottieOverlayHome extends StatefulWidget {
  const LottieOverlayHome({super.key});

  [@override](/user/override)
  State<LottieOverlayHome> createState() => _LottieOverlayHomeState();
}

class _LottieOverlayHomeState extends State<LottieOverlayHome>
    with TickerProviderStateMixin, OverlayLottie {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: buildWithLottieOverlay(
          animationUrl:
              "https://assets6.lottiefiles.com/packages/lf20_fj8rlma5.json",
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                    onPressed: () => showLottieOverlay(repetitions: 3),
                    child: const Text("show Lottie")),
                ElevatedButton(
                    onPressed: () {
                      showLottieOverlayWhile(
                        () async {
                          await Future.delayed(const Duration(seconds: 3));
                        },
                        animationUrl:
                            "https://assets6.lottiefiles.com/packages/lf20_z3pnisgt.json",
                      ).then((value) {
                        showLottieOverlay(
                            animationUrl:
                                "https://assets8.lottiefiles.com/packages/lf20_slGFhN.json");
                      });
                    },
                    child: const Text("simulate login")),
              ],
            ),
          )),
    );
  }
}