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