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

Question

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

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

完整源码如下，大家可以自己尝试一下。

故障要么是帧重叠，要么是闪烁，就好像帧之间存在间隙一样。

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

我尝试过composition使用controller. 我还尝试了普通资产加载来排除我的实施问题，它们的行为是相同的。该问题同时出现在模拟器和实际手机中。所以在我看来，这不是由我实现的方式引起的，而是由 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

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

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

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