lottie-flutter icon indicating copy to clipboard operation
lottie-flutter copied to clipboard

JSON files with similar animations render incorrect animation

Open colbymaloy opened this issue 6 years ago • 9 comments

I have 2 separate .json files, both named uniquely in my assets folder.

Viewing them in an online Lottie previewer, everything looks correct. Both animations are different.

When I actually load the asset and run the animation in my project, it shows the EXACT SAME asset in both widgets. I can load alternate .json animations just fine, but i THINK since the 2 I'm using are so similar in looks, it some how is showing the same asset instead of the correct one.

Tried one of the other lottie packages that use platform view and the animations show correctly.

colbymaloy avatar Mar 07 '19 08:03 colbymaloy

Can you provide a reproduction?

dnfield avatar Mar 07 '19 09:03 dnfield

yes, use the files here - https://drive.google.com/open?id=1dAS6UYVpERsP0mmBBVblwHBKfHjFeGWj

and try previewing them, you'll see that they show the same animation in the app but when previewed online, they are different animations

colbymaloy avatar Mar 08 '19 04:03 colbymaloy

I suspect the issue might be the way you're loading them - can you share that code?

dnfield avatar Mar 08 '19 04:03 dnfield

i first used the example from the package when i noticed the issue but here is the code i ended up with:

void _loadButtonPressed(String assetName) {
loadAsset(assetName,context).then((LottieComposition composition) {
  setState(() {
    _assetName = assetName;
    _composition = composition;
    _controller.reset();
  });
});
}

loadAsset

Future<LottieComposition> loadAsset(String assetName,BuildContext 
context) async {
print("loading asset : "+assetName);
return await  DefaultAssetBundle.of(context)
  .loadString(assetName,cache: false)
  .then<Map<String, dynamic>>((String data) => json.decode(data))
  .then((Map<String, dynamic> map) =>LottieComposition.fromMap(map));
}

 @override
 Widget build(BuildContext context) {
 return Center(
    child: Container(
  width: 200,
  height: 200,
  child: Transform(transform: Matrix4.translationValues(0.0, 20.0, 
 0.0),
       child: Transform.scale(
        scale: 2.0,
        child: Lottie(
        composition: _composition,
        size: const Size(200.0, 200.0),
        controller: _controller,
      ),
    ),
  ),
));
}
}

colbymaloy avatar Mar 08 '19 06:03 colbymaloy

Just to help narrow this down, can you change

.then<Map<String, dynamic>>((String data) => json.decode(data))

to

.then<Map<String, dynamic>>((String data) {
  print(data);
  return json.decode(data);
})

dnfield avatar Mar 08 '19 17:03 dnfield

im actually loading them using your example and the bug is still present.

any update on this bug? this package seems like my last hope !

colbymaloy avatar Mar 26 '19 11:03 colbymaloy

I'm not able to reproduce your issue in a clean project. I would instrument your core and try to figure out where this is going wrong.

dnfield avatar Mar 26 '19 14:03 dnfield

I'm not too sure what "instrument your core" means. I created a new project and copy/pasted the example. Are you using the JSON assets linked in the above drive ? I've only had it happen with those two json animations. For clarity, they are two separate animations but if you load "Gongv4" it shows the animation for "timerv4". "Timerv4" animation works just fine

colbymaloy avatar Mar 27 '19 06:03 colbymaloy

Sorry, that should have been code not core.

I'm suggesting adding print statements to make sure your actual assets are different.

dnfield avatar Mar 27 '19 07:03 dnfield