reloadImages asks for images from AnimationImageProvider in main thread

[iago849]

Check these before submitting:

• [] The issue doesn't involve an Unsupported Feature
• [] This issue isn't related to another open issue

This issue is a:

• [v] Non-Crashing Bug (Visual or otherwise)
• [] Crashing Bug
• [] Feature Request
• [] Regression (Something that once worked, but doesn't work anymore)

Which Version of Lottie are you using?

Lottie 3.0

What Platform are you on?

• [] MacOS
• [v] iOS

What Language are you in?

• [v] Swift
• [] Objective-C

Expected Behavior

reloadImages method of LayerImageProvider class loading images in main thread. I have lot of PNG's so it takes relatively huge amount of time. I cannot subclass anything (all important classes are marked as final).

So when I assign an animation object to animation view

self.animationView?.animation = animation

it leads to asking the sceneImageProvider for images. But reading and uncompressing PNGs is a very consuming operation. Could you make an advice how I can move it to separate thread? Or the way my custom AnimationImageProvider subclass can get list of images to load them to memory on separate thread, and then assign animation object to animation view when it will have some cache.

Thanks in advance!

Actual Behavior

[iago849]

Guys,

I wrote an AnimationImageProvider subclass that loads all the images on separate thread (slightly more efficient than standard FilepathAnimationProvider) and notifies end with a callback. Also it maintains cache for each animation and global cache separately (to flush on memory warning for example).

It seems to be reliable and tested on extra huge 4k animations with tens of png's. The one disadvantage is that it assumes all images in the same folder. For example, if you export with AfterEffects plugin - it's not a problem, it puts all images under same folder by default, but I don't know if it's a rule for all possible exporters.

API is as simple as that:

`
if let url = Bundle.main.resourceURL?.appendingPathComponent("animation") {
            let imageProvider = SceneImageProvider(filepath: url)
            imageProvider.prepareOwnCache {
                DispatchQueue.main.async {
                    self.animationView.imageProvider = imageProvider
                    let animation = Animation.named("image")
                    self.animationView.animation = animation
                    self.animationView.play(fromProgress: 0, toProgress: 1, loopMode: .loop)
                }
            }
        } else {
            print("animation folder does not exist in bundle, can't load animation")
        }
`

If you wish I can post it here, probably anyone faced the same issue. Also, maybe you may wish to include it along with standard ImageProviders?

[nithindampetla]

Hey @iago849, I am facing the same issue with one of my projects. can you post the subclass you created? Thanks.

[iago849]

@nithindampetla sure here it is (you can change log to standard print)

import Foundation
import Lottie

public class SceneImageProvider: AnimationImageProvider {
    
    static var globalCache = NSCache<NSString, CGImage>()   //  holds all the cached images for all scenes
    
    var ownCachedKeys = [String]()  //  each scene contains its own SceneImageProvider which writes keys for cached images for particular scene
    
    let filepath: URL
    
    /**
     Initializes an image provider with a specific filepath.
     - Parameter filepath: The absolute filepath containing the images.
     */
    public init(filepath: URL) {
        self.filepath = filepath
    }
    
    public func imageForAsset(asset: ImageAsset) -> CGImage? {
        let url = filepath.appendingPathComponent(asset.name).resolvingSymlinksInPath()
        return imageForURL(url: url)
    }
    
    private func imageForURL(url: URL) -> CGImage? {
        let key = url.path
        if let cachedImage = SceneImageProvider.globalCache.object(forKey: key as NSString) {
            return cachedImage
        }
        
        if FileManager.default.fileExists(atPath: key) {
            if let provider = CGDataProvider(url: url as CFURL) {
                if let image = CGImage(pngDataProviderSource: provider, decode: nil, shouldInterpolate: true, intent: .defaultIntent) {
                    if Thread.current.isMainThread {
                        log("had to load image with key \(key) on main thread")                        
                    }
                    SceneImageProvider.globalCache.setObject(image, forKey: key as NSString)
                    ownCachedKeys.append(key)
                    return image
                }
            }
        }
        
        return nil
    }
    
    func flushOwnCache() {
        for key in ownCachedKeys {
            SceneImageProvider.globalCache.removeObject(forKey: key as NSString)
        }
    }
    
    //  destroy global cache
    static func memoryWarning() {
        globalCache = NSCache<NSString, CGImage>()
    }
    
    let precacheQueue = DispatchQueue(label: "precacheQueue")
    
    //  loads png images in a separate thread
    func prepareOwnCache(completion: @escaping Completion) {
        precacheQueue.async {
            let fileManager = FileManager()
            do {
                let files = try fileManager.contentsOfDirectory(at: self.filepath, includingPropertiesForKeys: nil, options: [.skipsHiddenFiles])
                //  we don't need files yet, just put them into cache
                for file in files where file.pathExtension == "png" {
                    _ = self.imageForURL(url: file.resolvingSymlinksInPath())
                }
                completion()
            } catch {
                log(error, msg: "unable to prepare cache", level: .error)
                completion()
            }
        }
    }
    
}

[iago849]

Here's the usage example

//  preload images asyncronously to make loader animation smooth
        if let url = Bundle.main.resourceURL?.appendingPathComponent("privacy-images") {
            let imageProvider = SceneImageProvider(filepath: url)
            imageProvider.prepareOwnCache {
                DispatchQueue.main.async {
                    self.animationView.imageProvider = imageProvider
                    let animation = Animation.named("privacy")
                    self.animationView.animation = animation
                    self.animationView.play(fromProgress: 0, toProgress: 1, loopMode: .loop)
                }
            }
        } else {
            log("privacy-images folder does not exist in bundle, can't load animation", level: .error)
        }