search

dnfield / lottie-flutter

A pure Dart/Flutter implementation of Lottie
Apache License 2.0
115 stars 24 forks source link

Fix Gradients #8

Closed sroddy closed 5 years ago

sroddy commented 5 years ago

Hi @dnfield I've tested various Lottie files with gradients and none seemed to work fine. So I took the one attached below as reference (it's the one included in Lottie Android tests) and I fixed the code in order to be able to see it as close as possible to the web rendering.

Linear gradients seem almost perfect, while radial ones appear correct but the animation in this specific file is not working as intended. If you print the various values inside _createRadialGradientShader you will notice that all the values remain the same during the whole animation. I couldn't figure out if this is due to a wrong parsing/initializing of the animations or if there is a transform happening on the whole gradient by a parent group which is not correctly applied to the Shader.

I found out that maybe something similar was addressed here: https://github.com/airbnb/lottie-android/commit/5d0a44c746eb6a59d42e36e2f35b0903f5943619

Do you have by chance any time to take a look?

Thank you a lot

GradientFill.json.zip

dnfield commented 5 years ago

This looks entirely reasonable to me. This project in general needs a lot of work, and I'm not as invested in it at the moment - but I'm happy to merge this if it's working for you.

sroddy commented 5 years ago

Thanks. Do you have any other approach to recommend in order to export and play some vector-based animations in Flutter?

dnfield commented 5 years ago

I think the widget end of this needs some work, and in general the parsing is too tightly coupled. The original author tried to directly port from Android, but some of that feels wrong here.

I'm hoping that at some point, there'll be a way to get Skia's new Lottie functionality exposed up to Flutter, but that doesn't solve any immediate problems (and there are some challenges to work through making that happen right now).