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?
Convert PNG files to Lottie You can try converting your PNG file to an SVG file using an online automatic vectorization tool, then using LottieFiles' SVG to Lottie tool. But this may only work with PNG files that feature simple, 2D illustrations.
While Lotties are typically created from vectors, images can easily be added as part of the composition with a simple tweak to the settings.
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:
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];
You can put all images next to the json.
After that you can just play animation:
let animation = LOTAnimationView(name: "LogoAnimation")
animation.play()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With