詳解iOS如何讓Lottie使用網(wǎng)絡(luò)資源做動畫的實現(xiàn)
背景
手上有需求需要使用CDN資源來讓Lottie做動畫,但由于動畫需要加載圖片,而Lottie提供的初始化接口只能加載json配置,Github上的issues也沒人回答,因此特地寫下本文記錄一下方案。
為了實現(xiàn)這個功能還把Lottie看了一遍也是醉了。。。
方案
首先需要明確的一個點是如果你的Lottie資源帶圖片,那么直接使用LOTAnimationView的initWithContentsOfURL:方法是無法自動加載圖片資源的。因為加載圖片需要為LOTComposition設(shè)置baseURL,但通過url初始化animatonView時,由于json配置需要異步加載,所以該view的sceneModel為空,你無法直接設(shè)置,而view內(nèi)部又沒有加載完成的回調(diào),因此只能通過監(jiān)聽sceneModel設(shè)置或者生成一個sceneModel傳入這兩種方式來實現(xiàn)Lottie圖片資源加載。
以下介紹實現(xiàn)方式。
1. 實現(xiàn)LOTAnimationDelegate代理
首先需要實現(xiàn)LOTAnimationView的圖片請求代理方法。Lottie內(nèi)部不會自行請求圖片,而是通過代理方法的形式將圖片請求拋到外部實現(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è)置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是你的請求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ù)端存儲Lottie文件的路徑。
假設(shè)你有一個叫animation的Lottie資源,那么請先打開配置json觀察assets.u的值。這里假設(shè)assets.u為"images/",則你需要在服務(wù)端存儲的文件結(jié)構(gòu)如下:
- animation - data.json - images - img_0.png - img_1.png
此時,如果json的請求url是os.xxx.cn/lottie/anim… ,那么需要給LOTComposition的baseURL設(shè)置為os.xxx.cn/lottie/anim… 。
3. 初始化LOTAnimationView
最后只需要請求資源并傳給LOTAnimationView即可。
- (LOTAnimationView *)animationView { if (!_animationView) { //注意,如果想先初始化view再請求資源,不要使用new或者init來初始化 _animationView = [[LOTAnimationView alloc] initWithFrame:CGRectZero]; _animationView.animationDelegate = self; NSURL *url = [NSURL URLWithString:@"https://os.xxx.cn/lottie/animation/data.json"]; //請求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ò)資源做動畫的詳細(xì)內(nèi)容,更多關(guān)于iOS Lottie網(wǎng)絡(luò)資源做動畫的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
iOS應(yīng)用開發(fā)中使UITextField實現(xiàn)placeholder屬性的方法
這篇文章主要介紹了iOS應(yīng)用開發(fā)中使UITextField實現(xiàn)placeholder屬性的方法,示例代碼為傳統(tǒng)的Objective-C語言,需要的朋友可以參考下2016-04-04淺談關(guān)于如何檢測iOS14本地網(wǎng)絡(luò)權(quán)限的一些思路
這篇文章主要介紹了淺談關(guān)于如何檢測iOS14本地網(wǎng)絡(luò)權(quán)限的一些思路,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09