詳解iOS如何讓Lottie使用網(wǎng)絡(luò)資源做動(dòng)畫的實(shí)現(xiàn)
背景
手上有需求需要使用CDN資源來讓Lottie做動(dòng)畫,但由于動(dòng)畫需要加載圖片,而Lottie提供的初始化接口只能加載json配置,Github上的issues也沒人回答,因此特地寫下本文記錄一下方案。
為了實(shí)現(xiàn)這個(gè)功能還把Lottie看了一遍也是醉了。。。
方案
首先需要明確的一個(gè)點(diǎn)是如果你的Lottie資源帶圖片,那么直接使用LOTAnimationView的initWithContentsOfURL:方法是無法自動(dòng)加載圖片資源的。因?yàn)榧虞d圖片需要為L(zhǎng)OTComposition設(shè)置baseURL,但通過url初始化animatonView時(shí),由于json配置需要異步加載,所以該view的sceneModel為空,你無法直接設(shè)置,而view內(nèi)部又沒有加載完成的回調(diào),因此只能通過監(jiān)聽sceneModel設(shè)置或者生成一個(gè)sceneModel傳入這兩種方式來實(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ù)無法直接感知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來初始化 _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)文章!
相關(guān)文章
iOS應(yīng)用開發(fā)中使UITextField實(shí)現(xiàn)placeholder屬性的方法
這篇文章主要介紹了iOS應(yīng)用開發(fā)中使UITextField實(shí)現(xiàn)placeholder屬性的方法,示例代碼為傳統(tǒng)的Objective-C語言,需要的朋友可以參考下2016-04-04ios利用 AFN 上傳相冊(cè)或者拍照?qǐng)D片
這篇文章主要介紹了ios利用 AFN 上傳相冊(cè)或者拍照?qǐng)D片的相關(guān)資料,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-06-06iOS push側(cè)滑返回功能實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了iOS push側(cè)滑返回功能實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05IOS 中 new 和 alloc init 的對(duì)比
這篇文章主要介紹了IOS 中 new 和 alloc init 的區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-02-02淺談關(guān)于如何檢測(cè)iOS14本地網(wǎng)絡(luò)權(quán)限的一些思路
這篇文章主要介紹了淺談關(guān)于如何檢測(cè)iOS14本地網(wǎng)絡(luò)權(quán)限的一些思路,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09