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 Colors not showing properly #219

Open rdcoder33 opened 2 years ago

rdcoder33 commented 2 years ago

This is the lottie animation I am using through network: https://assets4.lottiefiles.com/private_files/lf30_8zscxore.json

And here's the code I used to render it in my flutter app

child: LottieBuilder.network(
        'https://assets4.lottiefiles.com/private_files/lf30_8zscxore.json',
      ),

This is the screenshot from the app,

WhatsApp Image 2022-05-29 at 8 46 14 AM

As you can see there is few shapes which are missing in screenshot compare to original animation.

But when I use delegates and change the color of the missing shapes is visible.

LottieBuilder.network(
        'https://assets4.lottiefiles.com/private_files/lf30_8zscxore.json',
        delegates:    LottieDelegates(
          values: [
            ValueDelegate.colorFilter(
              ['circle 2', '**'],
              value: const ColorFilter.mode(
                Colors.blue,
                BlendMode.hardLight,
              ),
            ),
          ],
        ),
      ),

WhatsApp Image 2022-05-29 at 8 46 15 AM

The difference between visible and not visible shape in after effects is that the mode is "multiply" for non-visible shape and "normal" for visible ones.

Screenshot 2022-05-29 at 8 49 07 AM

Since Lottie Player is supporting this feature, Is there any way I can make lottie flutter plugin support it without using value delegates?