xvrh / lottie-flutter

Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.
https://pub.dev/packages/lottie
MIT License
1.16k stars 196 forks source link

Lottie animation glitches #180

Closed under3415 closed 2 years ago

under3415 commented 2 years ago

Hi I have an app with lots of Lottie animations. They work fine in a Windows app. Also look fine in lottiefiles.com. But they are glitchy in Flutter. Not all of them, but many, maybe around a third.

Glitches are either frame overlaps or blinking, as if there is a gap between frames.

Glitches are consistent, i.e. always happen in the same place, so not a performance issue. Also, they are not happening between repeats, but in the middle of the animation.

I have tried loading them as composition from memory. I have also tried a vanilla asset load and they are behaving the same, so it seems to me it is not my fault.

I can provide json if anyone wants to test.

 Expanded(
            child: Lottie.asset('assets/lottie/4clear.json'),
  ),
under3415 commented 2 years ago

I have also tested the animation with Lottie android sample app and it works fine, so it seems the issue is with flutter implementation.

Some help would be appreciated.

under3415 commented 2 years ago

Sample animation is available here: https://assets6.lottiefiles.com/packages/lf20_uz92k22x.json

under3415 commented 2 years ago

Here is a full code to reproduce the issue. Just add lottie dependency

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'),
            ),
          ],
        ),
      ),
    );
  }
}
under3415 commented 2 years ago

@xvrh I think there is a bug in the Lottie port for flutter. My animations work fine everywhere else, including the official Android Lottie app from AirBnB.

under3415 commented 2 years ago

Setting frameRate to FrameRate.max fixes the problem

Thidiyas3d commented 2 years ago

Facing glitches with Lottie https://lottiefiles.com/89323-pulse. No luck after setting FrameRate.max.