flutter - 有没有办法在 flutter 中预缓存 Lottie 动画？

Question

我有一个用作加载屏幕的 lottie 动画:

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:lottie/lottie.dart';

class Loading extends StatelessWidget {
  final String loadingText;
  Loading({this.loadingText});

  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          if (loadingText != null) _buildLoadingText(loadingText),
          _buildAnimation(),
        ],
      ),
    );
  }

  Widget _buildLoadingText(String text) {
    return Text(
      loadingText,
      style: GoogleFonts.poppins(
          textStyle:
              TextStyle(fontWeight: FontWeight.w500, color: Colors.black)),
    );
  }

  Widget _buildAnimation() {
    return Lottie.asset('assets/lottie/heartbeat_loading.json',
        width: 300, repeat: true, animate: true);
  }
}

当我的应用程序最初加载时，我会像这样使用它:

_determineHome() {
    return StreamBuilder(
      stream: AppBlocContainer().authenticationBloc().loggedIn,
      builder: (context, AsyncSnapshot<AuthenticationStatus> snapshot) {
        // return Loading();
        return AnimatedSwitcher(
            duration: Duration(seconds: 2),
            child: !snapshot.hasData
                ? Loading(
                    loadingText: 'Loading...',
                  )
                : _buildSecondChild(snapshot.data));
      },
    );

这是有效的，除了 lottie 动画的加载可能晚了一两秒，当 lottie Assets 加载时，已经太晚了，页面已经转换。

我想知道，因为我确实能够通过这样做在我的 main() 中预缓存我的 SVG 图像:

    Future.wait([
      precachePicture(
        ExactAssetPicture(
            SvgPicture.svgStringDecoder, 'assets/svg/login.svg'),
        null,
      ),
      precachePicture(
        ExactAssetPicture(
            SvgPicture.svgStringDecoder, 'assets/svg/logo.svg'),
        null,
      ),
      precachePicture(
        ExactAssetPicture(
            SvgPicture.svgStringDecoder, 'assets/svg/signup_panel_1.svg'),
        null,
      )
    ]);

我可以用 lottie 做同样的事情吗？

Answer 1

我发现 flutter 中的 lottie 包本身有一个内置的自动缓存。(不管你是否愿意，它都会将动画缓存到 ram 中)

方法A(自制):所以你基本上需要调用 Lottie.asset('assets/Logo.json') 一次，第二次你可以通过再次调用 Lottie.asset('assets/Logo.json') 来立即加载它，因为它是第一时间缓存。所以这可以用作作弊缓存方法，例如，您可以先在启动画面中加载它，如下所示:通过用 SizedBox 包装并给出 0 高度/宽度或使用可见属性为 false 但 maintainState 为 true 的 Visibility 小部件，因此它不可见但仍将位于小部件树中并加载到 ram 中。

        Visibility(
          visible: false,
          maintainSize: false,
          maintainState: true,
          maintainAnimation: false,
          maintainInteractivity: false,
          child: Row(
            children: [
               Lottie.asset('assets/Logo.json'),
            ],
          ),
        ),
            

下次您只需调用 Lottie.asset('assets/Logo.json') 即可立即加载。

方法二:一个叫 Pante 的人在 github 上提到了这一点。

class LottieCache {

  final Map<String, LottieComposition> _compositions = {};

  /// Caches the given [LottieAsset]s.

  Future<void> add(String assetName) async {
      _compositions[assetName] = await AssetLottie(assetName).load();
  }
  
  Widget load(String assetName, Widget fallback) {
    final composition = _compositions[assetName];
    return composition != null ? Lottie(composition: composition) : fallback;
  }

}

这里有两种方式:1)使用AssetLottie(assetName).load()方法；提供 LottieCache 对象，以便在需要时访问其加载方法。2)完全忽略load方法和组合方式(可以注释load方法)；因为AssetLottie(assetName).load()将动画加载到ram中，和Lottie.asset('assets/Logo.json')一样所以只要调用它的add方法就可以将动画加载到ram中，下次你需要的时候就可以毫不拖延地使用它。

方法三:这是flutter的lottie文档中提到的自定义加载方法。

class _MyWidgetState extends State<MyWidget> {
  late final Future<LottieComposition> _composition;

  @override
  void initState() {
    super.initState();

    _composition = _loadComposition();
  }

  Future<LottieComposition> _loadComposition() async {
    var assetData = await rootBundle.load('assets/LottieLogo1.json');
    return await LottieComposition.fromByteData(assetData);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<LottieComposition>(
      future: _composition,
      builder: (context, snapshot) {
        var composition = snapshot.data;
        if (composition != null) {
          return Lottie(composition: composition);
        } else {
          return const Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}