如何修复Flutter Lottie中的动画故障
我有一个有很多Lottie动画的应用程序。它们在Windows UWP应用程序和AirBnB sample Android app中运行良好。在lottiefiles.com在线测试工具中看起来也很好。
但是它们在使用Lottie for Flutter包的Flutter中是有问题的。不是所有人，但很多，可能是三分之一左右。
下面是完整的源代码，你可以自己试试。
毛刺要么是帧重叠，要么是闪烁，就好像帧之间有间隙一样。
毛刺是一致的，即总是发生在同一个地方，所以看起来不像是一个性能问题。而且，它们不是在重复之间发生的，而是在动画的中间发生的，所以同样不是应用程序的问题，但似乎是如何渲染它们的问题。
我已经尝试过使用controller从内存中将它们加载为composition。我还尝试了一个普通的资产加载，以排除我的实现中的问题，它们的行为是相同的。仿真器和实际电话中都出现问题。所以在我看来，这不是由我实现的方式引起的，而是由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'),
),
],
),
),
);
}
}回答 2
Stack Overflow用户
发布于 2021-11-07 00:55:00
尝试添加如下所述的frameRate: FrameRate.max。
Expanded(
child: Lottie.network('https://assets6.lottiefiles.com/packages/lf20_uz92k22x.json',
frameRate: FrameRate.max,
),
),这将使用与应用程序相同的帧速率渲染Lottie动画。在Lottie插件中，它将按照json文件中提到的帧速率呈现json。使用25FPS编码的动画每秒仅绘制25次，即使AnimationController每秒将使小部件无效60次。因此，这个framerate是从lottie0.6.0引入的
Stack Overflow用户
发布于 2021-11-05 17:12:26
我在我的应用程序上使用Lottie for Flutter，它在模拟器或低性能手机上也能很好地工作。该问题可能与错误转换的动画有关，或者您可以尝试使用Lottie.asset(yourjson)来避免潜在的网络获取问题。
https://stackoverflow.com/questions/69790294
复制相似问题
腾讯云开发者
