如何在Flutter应用程序中使用Lottie动画？

Question

我想在Flutter应用程序中动画Lottie文件。 我尝试搜索互联网的每个角落，但未能找到任何相关信息。

我发现有一个名为"flutter_lottie.dart"的Flutter包，并且它有一个可以实现动画效果的函数。

作者还提供了有关使用flutter_lottie.dart的示例， 但是当我尝试运行完全相同的示例：flutter Lottie example 它给出了相同的错误：

Creating Method Channel convictiontech/flutter_lottie_0
E/flutter (11371): [ERROR:flutter/shell/common/shell.cc(199)] Dart Error: Unhandled exception:
E/flutter (11371): PlatformException(error, java.lang.IllegalStateException: Unable to parse 
composition
E/flutter (11371):  at com.airbnb.lottie.LottieAnimationView$2.onResult(LottieAnimationView.java:68)

如何在Flutter中使用Lottie进行动画呈现？

- rahul Kushwaha

---

你可以使用Rive代替Lottie，它比Lottie更好，并且有一个在线编辑器。你可以将你的Lottie文件导入到这个平台并将其导出为Rive。https://rive.app/ 添加此包https://pub.dev/packages/flare_flutter 并按照此教程进行操作https://medium.com/flutterdevs/flutter-animation-with-flare-3863e8ff5030 - Amir

你可以在After Effects中开发动画，将动画导出为Flottie格式，然后在Rive中导入Flottie动画并导出为Flare格式。 - Amir

什么是Flottie？你能提供链接吗？ - rahul Kushwaha

Lottie在Flutter中不太稳定，我使用Lottie时遇到了很多问题，但是Rive是Flutter的一个很棒的动画平台，我建议你学习如何使用Rive。 - Amir

https://rive.app/a/veneno/files/flare/linkedin/preview - Amir

Answer 1

Lottie package是纯Flutter/Dart实现的Lottie播放器包。它是Lottie-Android的直接移植，支持相同的功能集。

在你的pubspec.yaml文件中包含这个包：

dependencies:
  lottie:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Lottie.asset('assets/lottiefile.json'),
      ),
    );
  }
}

发布地址：https://pub.dev/packages/lottie
GitHub 地址：https://github.com/xvrh/lottie-flutter

- Xavier

---

在 pub 中，“这个仓库是 Lottie-android 库的纯 Dart 非官方转换” 是什么意思？ - rahul Kushwaha

该库是Lottie-Android的直接移植：Java代码被逐个文件复制并转换为Dart/Flutter（没有架构更改）。 非官方：我与原作者没有任何联系。 - Xavier

这份文档还说：“性能不是很好，而且一些功能也缺失了。”我想展示很多动画，我能依赖它吗？ - rahul Kushwaha

该文档部分与Web编译有关。对于iOS/Android，性能应该是可以的（类似于原始库）。性能实际上取决于动画本身。有些动画非常昂贵（具有许多元素、许多渐变等），有些则非常便宜。请尝试并报告您遇到的任何问题。 - Xavier

如何在应用程序运行之前加载Lottie文件 我已经使用了didchangedependencies，但是出现了一些错误。 - ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ

Answer 2

您可以从lottiefiles网站下载以gif格式动画，并使用Image.assets打开，或者使用json格式。

class MyApp extends StatelessWidget {
   @override
 Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: ListView(
      children: [
        // Load a Lottie file from your assets
        Lottie.asset('assets/LottieLogo1.json'),

        // Load a Lottie file from a remote url
        Lottie.network(
            'https://raw.githubusercontent.com/xvrh/lottie- 
       flutter/master/example/assets/Mobilo/A.json'),

        // Load an animation and its images from a zip file
        Lottie.asset('assets/lottiefiles/angel.zip'),
      ],
    ),
  ),
);
}
}

- hosein moradi

---

我有一个Lottie文件在assets/lottie/lottie.json文件夹中，但是我遇到了无法加载资源的错误，我该如何解决？ - Rohmatul Laily

你必须将资源添加到 pubspec.xml。 - hosein moradi

@RohmatulLaily 你是否给文件设置了路径并将其添加到了pubspec.yaml中？ - hosein moradi