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?

Ecospecies

something to consider, it is MUCH, MUCH, MUCH more efficient if you stick to SVG. we never use any PNGs/JPGs, whatsoever, in apps now. (other than for actual photos of course.) surely, your illustrator or designer that created the file, has the original? Just have them export it as an svg and go from there in the Lottie pipeline.... much as you now just use PaintCode for all icons/etc in iOS (and indeed Android), it's really ideal if you can avoid raster files inside Lottie as well ! – Sheets

I'd also be curious to know if it's possible to use PDF-based vector images with the library. I was able to get the PNGs rendering fairly easily, but haven't figured out PDF/SVG yet. – Colored

Answer 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];

Brewis

Answer 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:

Zenas

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

Answer 3

You can put all images next to the json.

After that you can just play animation:

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

Roldan