Lottie-ios: Use image resources in lottie-ios

[young0713]

Hi, I read your code in the 'LOTLayerView.m' file, there is a method called '- (void)_setImageForAsset' to load image resources in our app used in lottie animation. But in the method you use '+ (nullable UIImage *)imageNamed:(NSString *)name;' to load image, which means we can only load images in app's main bundle. Is there any way for us to load images in other bundle, or is it possible for us to load images from a specified directory, for example, the cache directory or the document directory. Looking forward to your reply.

[young0713]

I just reviewed the lottie-android repertory's issues and found a similar issue.
https://github.com/airbnb/lottie-android/issues/177

[clOudbb]

I also have this issue, when i use "animationNamed: inBundle" method, bundle is my custom bundle, or load image and json from server, but lottie log "-[LOTLayerView _setImageForAsset]: Warn: image not found: img_0", what should i do? plz help~

[clOudbb]

now, I can only modify source code. The following is for reference only.
if you want use "animationNamed: inBundle" method, you can cache your custom bundle in LOTAnimationCache, this is LOTFrameworkSingleton, go to "_setImageForAsset" methed,
you can like this
`

    if (!image) {

        NSBundle *bundle = [LOTAnimationCache sharedCache].bundle;

        NSString *path = [bundle pathForResource:components.firstObject ofType:[NSString stringWithFormat:@".%@", components.lastObject] inDirectory:@"images"];

        NSData *data = [NSData dataWithContentsOfFile:path];

        image = [UIImage imageWithData:data];

    }

`

after working on.
and if have better tell me ,thx

[adenisonafifi]

I noticed in that linked Android repository a delegate was added to support providing the Image Layer bitmap. Any intention to bring that modification over to the iOS library? I can look into implementing it in a PR if not.

[leimingdu]

Hi all,

after investigate the code, I found the right usage of image for iOS:

in the json file, just replace "id" with the animation name, and images as the picture.

{"assets":[{"id":"image_0","w":800,"h":678,"u":"images/","p":"img_0.png"}]

it works.

[robmontesinos]

@leimingdu I tried replacing "id" and all images disappeared. I really would like images in my animation. Can you post some sample code please?

[leimingdu]

@robmontesinos
following is the example:
the file name is image_1.json, I replace it's name in "id" and refid，meanwhile， I relate the image name as image_3.png in "p". I put the image_3.png in the project.

by above steps, it works.

Thanks
//Leiming

{"assets":[{"id":"image_1","w":800,"h":678,"u":"images/","p":"img_3.png"}],"layers":[{"ddd":0,"ind":0,"ty":2,"nm":"like shape.png","cl":"png","refId":"image_1","ks":{"o":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[100]},{"t":4}]},"r":{"k":0},"p":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":0,"s":[211.349,440.278,0],"e":[300,300,0],"to":[81.5845794677734,-36.2277030944824,0],"ti":[-1.92720031738281,29.8037090301514,0]},{"t":5}],"x":"var $bm_rt;\nvar nearestKeyIndex;\n$bm_rt = nearestKeyIndex = 0;\nif (numKeys > 0) {\n $bm_rt = nearestKeyIndex = nearestKey(time).index;\n if (key(nearestKeyIndex).time > time) {\n nearestKeyIndex--;\n }\n}\nif (nearestKeyIndex == 0) {\n $bm_rt = currentTime = 0;\n} else {\n $bm_rt = currentTime = sub(time, key(nearestKeyIndex).time);\n}\nif (nearestKeyIndex > 0 && currentTime < 1) {\n calculatedVelocity = velocityAtTime(sub(key(nearestKeyIndex).time, div(thisComp.frameDuration, 10)));\n amplitude = 0.3;\n frequency = 3;\n decay = 4;\n $bm_rt = sum(value, div(mul(mul(calculatedVelocity, amplitude), Math.sin(mul(mul(mul(frequency, currentTime), 2), Math.PI))), Math.exp(mul(decay, currentTime))));\n} else {\n $bm_rt = value;\n}"},"a":{"k":[400,339,0],"x":"var $bm_rt;\n$bm_rt = transform.anchorPoint;"},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,0.667]},"o":{"x":[1,1,0.333],"y":[0,0,0.333]},"n":["0p667_1_1_0","0p667_1_1_0","0p667_0p667_0p333_0p333"],"t":32,"s":[22,22,100],"e":[0,0,100]},{"t":43}]}},"ao":0,"ip":0,"op":150,"st":0,"bm":0,"sr":1}],"v":"4.5.0","ddd":0,"ip":0,"op":60,"fr":30,"w":600,"h":600}

[robmontesinos]

@leimingdu Thank you for your quick reply. My json file "SlideShow" is far more complex with the animations than the example above. It has seven images plus other effects including text. I'm starting to think that a lot of those items are not supported with this library. I don't see my text, images are showing up upside down, etc. I am experimenting with an animated gif to see if that works or if it is too large and cumbersome. Any thoughts?

[leimingdu]

@robmontesinos I think at this moment, lottie did not support some more fancy animation. I get such information from my colleague who is try do some fancy animation but failed. :(

[paulsumit1993]

@leimingdu I tried your fix, but it doesn't seem to work
JSON file name: loadingcafe.json
image name: img_0.png

{"assets":[{"id":"loadingcafe","w":2000,"h":2000,"u":"images/","p":"img_0.png"}],"layers":[{"ddd":1,"ind":0,"ty":2,"nm":"logoloading.png","cl":"png","refId":"loadingcafe","ks":{"o":{"k":100},"rx":{"k":0},"ry":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[90]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":15,"s":[90],"e":[180]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[180],"e":[270]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":45,"s":[270],"e":[360]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":60,"s":[360],"e":[450]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":75,"s":[450],"e":[540]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[540],"e":[630]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":105,"s":[630],"e":[720]},{"t":120.0000048877}]},"rz":{"k":0},"or":{"k":[0,0,0]},"p":{"k":[968,512,0]},"a":{"k":[1000,1000,0]},"s":{"k":[44.8,44.8,44.8]}},"ao":0,"ip":0,"op":328.000013359714,"st":0,"bm":0,"sr":1}],"v":"4.5.4","ddd":1,"ip":0,"op":121.000004928431,"fr":29.9700012207031,"w":1920,"h":1080}

For me taking the img_0.png out of images folder and putting alongside the json file worked.

[robmontesinos]

@leimingdu Thank you. I wound up using an animated gif maker on the After Effects video - not as smooth as animating 2D objects but it's ok for now

[fnazrala]

https://github.com/airbnb/lottie-ios/pull/210

[buba447]

Should be fixed in Lottie 2.0! If you still have a problem please create a new issue!

[mobyIsMe]

This issue is fixed in current version. Thanks a lot!!!
First keep in mind that the file directory is the same as the JSON file ruled. There is a key to describe this image file folder name:"u":"images/" So your resource file directory must be like this
YourFilePath/data.json
YourFilePath/images/img_0.png
YourFilePath/images/img_1.png
Then you can use this method to load you JSON file and lottie will search the images in the same folder automatically,
LOTAnimationView* lottieAnimation = [LOTAnimationView animationWithFilePath:YourFilePath];

[MemoryReload]

@mobyIsMe You really saved my ass, not like those cheap chats, up there.

[barankaraoguzzz]

Hi guys,

I think the best solution is AnimationImageProvider. Lottie has AnimationImageProvider. I am sharing sample code below.

    public init(with jsonName: String) {
        super.init(frame: .zero)
        let animation = Animation.named(jsonName, bundle: getBundle())
        let imageProvider = BundleImageProvider(bundle: getBundle(), searchPath: nil)
        animationView = AnimationView(animation: animation, imageProvider: imageProvider)
    }

Take care of yourself 🤘🏻

[TsingYii]

Hi guys,

I think the best solution is AnimationImageProvider. Lottie has AnimationImageProvider. I am sharing sample code below.

    public init(with jsonName: String) {
        super.init(frame: .zero)
        let animation = Animation.named(jsonName, bundle: getBundle())
        let imageProvider = BundleImageProvider(bundle: getBundle(), searchPath: nil)
        animationView = AnimationView(animation: animation, imageProvider: imageProvider)
    }

Take care of yourself 🤘🏻

thanks!it helps me!