如何修复 Flutter Lottie 中的动画故障

Question

我有一个包含很多 Lottie 动画的应用程序。它们在 Windows UWP 应用程序和 AirBnB sample Android app 中运行良好。在 lottiefiles.com 在线测试工具中看起来也不错。

但是它们在使用 Lottie for Flutter 包的 Flutter 中出现故障。不是全部，但很多，也许大约三分之一。

下面是完整的源代码，你可以自己试试。

故障是帧重叠或闪烁，好像帧之间有间隙。

故障是一致的，即总是发生在同一个地方，所以看起来不像是性能问题。此外，它们不是在重复之间发生，而是在动画中间发生，因此同样不是应用程序问题，但似乎是它们如何呈现的问题。

我尝试使用 controller 从内存中将它们加载为 composition。我还尝试了普通资产加载来排除我的实施问题，它们的行为是一样的。该问题同时出现在模拟器和实际 phone 中。所以在我看来，这不是由我的实现方式引起的，而是由 Lottie 包本身引起的，或者 Lottie JSON 的问题由于某种原因只影响 Android.

完整示例如下。只需将其粘贴到 main.dart 并将依赖项添加到 yaml：lottie: ^1.2.1.

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.dark,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Lottie Test"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Lottie.network(
                  'https://assets6.lottiefiles.com/packages/lf20_uz92k22x.json'),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

我在我的应用程序中使用 Lottie for Flutter，它在模拟器或低性能手机上也运行良好。该问题可能与错误的转换动画有关，或者您可以尝试使用 Lottie.asset(yourjson) 来避免潜在的网络获取问题。

Answer 2

尝试添加 frameRate: FrameRate.max 如下所述。

       Expanded(
          child: Lottie.network('https://assets6.lottiefiles.com/packages/lf20_uz92k22x.json', 
              frameRate: FrameRate.max,
              ),
        ),

这将以与应用相同的帧速率渲染 Lottie 动画。在 Lottie 插件中，它将根据 json 文件中提到的帧速率渲染 json。使用 25 FPS 编码的动画每秒只会绘制 25 次，即使 AnimationController 每秒会使小部件无效 60 次。因此这个 framerate 是从 Lottie 0.6.0

引入的

Answer 3

根据官方包documentation 对于 Flutter Web，运行应用具有：flutter run --web-renderer canvaskit

我在最新版本中工作正常：lottie: ^1.2.1

如何修复 Flutter Lottie 中的动画故障

How to fix animation glitches in Flutter Lottie

flutter

dart

lottie