How to use png images with Lottie iOS?

Using PNG images in Lottie iOS is not directly supported because Lottie is primarily designed for handling and displaying vector animations (via JSON format). However, there are several methods to embed or use PNG images within Lottie animations.

Method 1: Convert PNG to Vector

The ideal approach is to convert the PNG image to a vector format, such as SVG, and then use tools like Bodymovin to export it from Adobe After Effects as a JSON format supported by Lottie. This ensures smooth and scalable animations.

Step-by-Step Guide:

1. Open the PNG image in Adobe Illustrator or other vector software and convert it to vector graphics.
2. Import the vector graphics into Adobe After Effects.
3. Create the animation and export it as JSON format using the Bodymovin plugin.

Method 2: Use Images as Part of Lottie Animations

Although Lottie does not directly support loading PNG images from external sources, you can import PNG images directly into After Effects while creating the animation and then export using Bodymovin. This method embeds the PNG into the JSON file as a base64-encoded string.

Step-by-Step Guide:

1. Import the PNG file into Adobe After Effects.
2. Place it into the required animation scene.
3. When exporting the animation with Bodymovin, check the "Include Images" option.

Method 3: Dynamically Load PNG Images

If your application requires dynamically loading external PNG images into Lottie animations, consider combining Lottie with other graphics processing libraries (such as SDWebImage) in your iOS app to dynamically replace the content of specific layers during animation playback.

Example Code Overview:

swift
import Lottie
import SDWebImage

func loadDynamicImageIntoLottie() {
    let animationView = AnimationView(name: "animation")
    addSubview(animationView)
    animationView.frame = bounds
    animationView.contentMode = .scaleAspectFit
    animationView.loopMode = .loop
    animationView.play()

    let imageURL = URL(string: "https://example.com/image.png")
    SDWebImageDownloader.shared.downloadImage(with: imageURL) { (image, data, error, finished) in
        if let image = image {
            // Replace the image in specific parts of the Lottie animation
            animationView.setImage(image, forKeypath: AnimationKeypath(keypath: "image_layer"), cache: nil)
        }
    }
}

The above method dynamically loads images and replaces specific Lottie animation paths using the setImage method.

Through these methods, although Lottie iOS does not natively support simple loading of external PNG images, you can achieve their integration in Lottie animations through various techniques. Each method has specific use cases and trade-offs, and you should select the appropriate implementation based on your requirements.