詳解iOS如何讓Lottie使用網(wǎng)絡(luò)資源做動(dòng)畫的實(shí)現(xiàn)

更新時(shí)間：2023年02月03日 08:35:22 作者：QYizhong

這篇文章主要為大家介紹了iOS如何讓Lottie使用網(wǎng)絡(luò)資源做動(dòng)畫實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

背景

手上有需求需要使用CDN資源來(lái)讓Lottie做動(dòng)畫，但由于動(dòng)畫需要加載圖片，而Lottie提供的初始化接口只能加載json配置，Github上的issues也沒人回答，因此特地寫下本文記錄一下方案。

為了實(shí)現(xiàn)這個(gè)功能還把Lottie看了一遍也是醉了。。。

方案

首先需要明確的一個(gè)點(diǎn)是如果你的Lottie資源帶圖片，那么直接使用LOTAnimationView的initWithContentsOfURL:方法是無(wú)法自動(dòng)加載圖片資源的。因?yàn)榧虞d圖片需要為L(zhǎng)OTComposition設(shè)置baseURL，但通過url初始化animatonView時(shí)，由于json配置需要異步加載，所以該view的sceneModel為空，你無(wú)法直接設(shè)置，而view內(nèi)部又沒有加載完成的回調(diào)，因此只能通過監(jiān)聽sceneModel設(shè)置或者生成一個(gè)sceneModel傳入這兩種方式來(lái)實(shí)現(xiàn)Lottie圖片資源加載。

以下介紹實(shí)現(xiàn)方式。

1. 實(shí)現(xiàn)LOTAnimationDelegate代理

首先需要實(shí)現(xiàn)LOTAnimationView的圖片請(qǐng)求代理方法。Lottie內(nèi)部不會(huì)自行請(qǐng)求圖片，而是通過代理方法的形式將圖片請(qǐng)求拋到外部實(shí)現(xiàn)。

- (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. 生成LOTComposition

其次，由于外部業(yè)務(wù)無(wú)法直接感知LOTAnimationView內(nèi)部生成的LOTComposition的時(shí)機(jī)，因此可以選擇自己生成它，并設(shè)置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:url.absoluteString];
            //注意，這里的baseURL是你的請(qǐng)求path，需要根據(jù)你的業(yè)務(wù)情況自行設(shè)置
            model.baseURL = @"https://os.xxx.cn/lottie/animation/";
            model.cacheKey = url.absoluteString;
            if (completion) {
                completion(model, nil);
            }
        });
    });
}

需要注意的是LOTComposition的baseURL設(shè)置，不僅需要查看Lottie的json配置文件，還需要關(guān)注服務(wù)端存儲(chǔ)Lottie文件的路徑。

假設(shè)你有一個(gè)叫animation的Lottie資源，那么請(qǐng)先打開配置json觀察assets.u的值。這里假設(shè)assets.u為"images/"，則你需要在服務(wù)端存儲(chǔ)的文件結(jié)構(gòu)如下：

- animation
    - data.json
    - images
        - img_0.png
        - img_1.png

此時(shí)，如果json的請(qǐng)求url是os.xxx.cn/lottie/anim… ，那么需要給LOTComposition的baseURL設(shè)置為os.xxx.cn/lottie/anim… 。

3. 初始化LOTAnimationView

最后只需要請(qǐng)求資源并傳給LOTAnimationView即可。

- (LOTAnimationView *)animationView {
    if (!_animationView) {
        //注意，如果想先初始化view再請(qǐng)求資源，不要使用new或者init來(lái)初始化
        _animationView = [[LOTAnimationView alloc] initWithFrame:CGRectZero];
        _animationView.animationDelegate = self;
        NSURL *url = [NSURL URLWithString:@"https://os.xxx.cn/lottie/animation/data.json"];
        //請(qǐng)求json配置，生成LOTComposition后傳給view
        @weakify(self);
        [CCDNService requestLottieModelWithURL:url completion:^(LOTComposition * _Nullable sceneModel, NSError * _Nullable error) {
            @strongify(self);
            self.animationView.sceneModel = sceneModel;
        }];
    }
    return _animationView;
}

以上就是iOS如何讓Lottie使用網(wǎng)絡(luò)資源做動(dòng)畫的詳細(xì)內(nèi)容，更多關(guān)于iOS Lottie網(wǎng)絡(luò)資源做動(dòng)畫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: