dnfield / lottie-flutter

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

JSON files with similar animations render incorrect animation #21

Open colbymaloy opened 5 years ago

colbymaloy commented 5 years ago

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.

dnfield commented 5 years ago

Can you provide a reproduction?

colbymaloy commented 5 years ago

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

dnfield commented 5 years ago

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

colbymaloy commented 5 years ago

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,
      ),
    ),
  ),
));
}
}
dnfield commented 5 years ago

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);
})
colbymaloy commented 5 years ago

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 !

dnfield commented 5 years ago

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.

colbymaloy commented 5 years ago

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

dnfield commented 5 years ago

Sorry, that should have been code not core.

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