Fill color animation not working

[fusion44]

Hi,

I have this simple test animation, which is just a circle changing its color from blue to red and back. The animation is displayed correctly in any online lottie previewer I've tried. Lotti for Flutter doesn't display the color animation. Any transforms other than Color seem to work though. The animation is created using Synfig which is an open source 2D animation application.

I'm not sure whether this is a Synfig or lottie-flutter incompatibility, but since the file works in online Lottie previewers, I tend to think it might be a lottie-flutter issue.

simple_circle_color_change.json

{ "w": 480, "h": 270, "nm": "circle_color_change.sifz", "ddd": 0, "v": "5.3.4", "fr": 24.0, "assets": [], "markers": [], "ip": 0.0, "op": 25.0, "layers": [ { "ddd": 0, "ind": 0, "ty": 1, "nm": "Circle003", "sr": 1, "ks": { "o": { "k": 100, "ix": 1, "a": 0 }, "r": { "k": 0, "ix": 2, "a": 0 }, "p": { "k": [240.0, 135.0], "ix": 0, "a": 0 }, "a": { "k": [240.0, 135.0], "ix": 3, "a": 0 }, "s": { "k": [100, 100, 100], "ix": 4, "a": 0 }, "sk": { "k": 0, "ix": 5, "a": 0 }, "sa": { "k": 0, "ix": 6, "a": 0 } }, "ef": [ { "ty": 21, "nm": "Fill", "ix": 0, "ef": [ { "ty": 10, "nm": "Fill Mask", "ix": 0, "v": { "k": 0, "ix": 0, "a": 0 } }, { "ty": 7, "nm": "All Masks", "ix": 1, "v": { "k": 0, "ix": 0, "a": 0 } }, { "ty": 2, "nm": "Color", "ix": 2, "v": { "ix": 0, "a": 1, "k": [ { "t": 0, "s": [0.066, 0.233, 1.0, 1.0], "e": [1.0, 0.066, 0.161, 1.0], "i": { "x": [0.167], "y": [0.167] }, "o": { "x": [0.167], "y": [0.167] } }, { "t": 12, "s": [1.0, 0.066, 0.161, 1.0], "e": [0.066, 0.233, 1.0, 1.0], "i": { "x": [0.167], "y": [0.167] }, "o": { "x": [0.167], "y": [0.167] } }, { "t": 24 } ] } }, { "ty": 7, "nm": "Invert", "ix": 3, "v": { "k": 0, "ix": 0, "a": 0 } }, { "ty": 0, "nm": "Horizontal Feather", "ix": 4, "v": { "k": 0, "ix": 0, "a": 0 } }, { "ty": 0, "nm": "Vertical Feather", "ix": 5, "v": { "k": 0, "ix": 0, "a": 0 } }, { "ty": 0, "nm": "Opacity", "ix": 6, "v": { "ix": 0, "a": 1, "k": [ { "t": 0, "s": [1.0], "e": [1.0], "h": 1 }, { "t": 1, "h": 1, "s": [1.0] } ] } } ] } ], "ao": 0, "sw": 480, "sh": 270, "sc": "#ff0000", "ip": 0.0, "op": 25.0, "st": 0, "bm": 0, "hasMask": true, "masksProperties": [ { "inv": false, "mode": "a", "pt": { "ix": 0, "a": 1, "k": [ { "i": { "x": 0.5, "y": 0.5 }, "o": { "x": 0.5, "y": 0.5 }, "t": 0, "s": [ { "i": [ [0, 0], [5.584, 5.61], [7.905, -0.02], [5.555, -5.604], [-0.016, -7.903], [-5.601, -5.556], [-7.903, 0.016], [-5.556, 5.601], [0.016, 7.903] ], "o": [ [-0.001, -7.903], [-5.616, -5.59], [-7.919, 0.02], [-5.549, 5.603], [0.007, 7.88], [5.566, 5.564], [7.88, -0.007], [5.564, -5.566], [0, 0] ], "v": [ [239.465, 128.273], [231.088, 108.003], [210.807, 99.648], [190.597, 108.084], [182.298, 128.343], [190.711, 148.497], [210.914, 156.819], [231.068, 148.406], [239.39, 128.203] ], "c": true } ], "e": [ { "i": [ [0, 0], [5.584, 5.61], [7.905, -0.02], [5.555, -5.604], [-0.016, -7.903], [-5.601, -5.556], [-7.903, 0.016], [-5.556, 5.601], [0.016, 7.903] ], "o": [ [-0.001, -7.903], [-5.616, -5.59], [-7.919, 0.02], [-5.549, 5.603], [0.007, 7.88], [5.566, 5.564], [7.88, -0.007], [5.564, -5.566], [0, 0] ], "v": [ [239.465, 128.273], [231.088, 108.003], [210.807, 99.648], [190.597, 108.084], [182.298, 128.343], [190.711, 148.497], [210.914, 156.819], [231.068, 148.406], [239.39, 128.203] ], "c": true } ] }, { "t": 1 } ] }, "o": { "k": 100, "ix": 1, "a": 0 }, "x": { "k": 0, "ix": 2, "a": 0 }, "nm": "Mask 1" } ] } ] }

Readable: https://gist.github.com/fusion44/23e6cd86075109b8d5be93bba1c75954

[xvrh]

Hello, thanks for the report.

Did you also try with a Lottie Android previewer?

[fusion44]

Thank you for the quick response!

Sorry, I didn't before, but tried right now. Result was that it doesn't work either. So, it probably is an exporter problem and the web viewers are more forgiving?

[fusion44]

I've found this alternative Synfig converter which does work as expected:

https://gitlab.com/mattbas/python-lottie