How to use png images with Lottie iOS?

Question

I tried exporting an after effect file with bodymovin, that after effect file has a few png images. How do we use this with Lottie in iOS? Do we include those images in the asset catalog, and use them alongside the json file?

Solution 1

According to this function

https://github.com/airbnb/lottie-ios/blob/973c08da8ccf3dbc171bcd9e8748e6368c5a2107/lottie-ios/Classes/AnimatableLayers/LOTLayerContainer.m#L126

It tries to load it different ways including from the asset catalog -- that's what line 147 in that file would do:

  NSArray *components = [asset.imageName componentsSeparatedByString:@"."];
  image = [UIImage imageNamed:components.firstObject inBundle:asset.assetBundle compatibleWithTraitCollection:nil];

Solution 2

The answer to your question is YES. Drop in your JSON file and place the images in the assets catalog. I tried it with this sample JSON/assets https://www.lottiefiles.com/1187-puppy-run. One thing to note that on Xcode when you drop the image assets, you may need to move them to 2x.

This is my current setup:

Solution 3

You can put all images next to the json.

After that you can just play animation:

let animation = LOTAnimationView(name: "LogoAnimation")
animation.play()

Comments

[i_ll_be_back]

Same solution is valid for Xamarin Forms as well! I looked in many places until I end up here! Great explanation!