background
If you have a need, you need to use CDN resources to make Lottie animate, but since the animation needs to load pictures, the initialization interface provided by Lottie can only load json configuration, and no one answers the issues on Github, so I wrote down this article to record the plan.
In order to realize this function, Lottie was also drunk. . .
plan
The first point that needs to be clear is that if your Lottie resource has an image, then directly use the initWithContentsOfURL of the LOTAnimationView's initWithContentsOfURL: method cannot automatically load the image resource. Because loading an image requires setting the baseURL for LOTComposition, but when initializing animatonView through url, since the json configuration needs to be loaded asynchronously, the view's sceneModel is empty, you cannot set it directly, and there is no callback for loading within the view, so you can only realize Lottie image resource loading by listening to the sceneModel settings or generating a sceneModel to pass it in.
The following describes the implementation method.
1. Implement LOTAnimationDelegate proxy
First, we need to implement the image request proxy method of LOTAnimationView. Lottie does not request images by itself, but throws image requests to the external implementation through proxy methods.
- (void)animationView:(LOTAnimationView *)animationView fetchResourceWithURL:(NSURL *)url completionHandler:(LOTResourceCompletionHandler)completionHandler {
[CDNService requestLottieImageWithURL:url completion:^(UIImage * _Nullable image, NSError * _Nullable error) {
if (completionHandler) {
completionHandler(image, error);
}
}];
}
2. Generate LOTComposition
Secondly, since external services cannot directly perceive the timing of the LOTComposition generated internally by LOTAnimationView, you can choose to generate it yourself and set the baseURL.
+ (void)requestLottieModelWithURL:(NSURL *)url completion:(void(^)(LOTComposition * _Nullable sceneModel, NSError * _Nullable error))completion {
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void) {
NSData *animationData = [NSData dataWithContentsOfURL:url];
if (!animationData) {
return;
}
NSError *error;
NSDictionary *animationJSON = [NSJSONSerialization JSONObjectWithData:animationData options:0 error:&error];
if (error || !animationJSON) {
if (completion) {
completion(nil, error);
}
return;
}
LOTComposition *model = [[LOTComposition alloc] initWithJSON:animationJSON withAssetBundle:[NSBundle mainBundle]];
dispatch_async(dispatch_get_main_queue(), ^(void) {
[[LOTAnimationCache sharedCache] addAnimation:model forKey:];
//Note that the baseURL here is your request path and needs to be set by yourself according to your business situation = @"/lottie/animation/";
= ;
if (completion) {
completion(model, nil);
}
});
});
}
It should be noted that the baseURL setting of LOTComposition not only requires viewing Lottie's json configuration file, but also paying attention to the path where the Lottie file is stored on the server.
Suppose you have a Lottie resource called animation, then please open the value of configuration json observation first. Assume here as "images/", the file structure you need to store on the server is as follows:
- animation
-
- images
- img_0.png
- img_1.png
At this time, if the request url of json is /lottie/anim..., then the baseURL of LOTComposition needs to be set to /lottie/anim....
3. Initialize LOTAnimationView
Finally, you only need to request the resource and pass it to the LOTAnimationView.
- (LOTAnimationView *)animationView {
if (!_animationView) {
//Note that if you want to initialize the view first and then request resources, do not use new or init to initialize it _animationView = [[LOTAnimationView alloc] initWithFrame:CGRectZero];
_animationView.animationDelegate = self;
NSURL *url = [NSURL URLWithString:@"/lottie/animation/"];
//Request json configuration, generate LOTComposition and pass it to view @weakify(self);
[CCDNService requestLottieModelWithURL:url completion:^(LOTComposition * _Nullable sceneModel, NSError * _Nullable error) {
@strongify(self);
= sceneModel;
}];
}
return _animationView;
}The above is the detailed content of how iOS lets Lottie use network resources to animation. For more information about iOS Lottie network resources to animation, please follow my other related articles!