詳解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內部又沒有加載完成的回調，因此只能通過監(jiān)聽sceneModel設置或者生成一個sceneModel傳入這兩種方式來實現(xiàn)Lottie圖片資源加載。
以下介紹實現(xiàn)方式。
1. 實現(xiàn)LOTAnimationDelegate代理
首先需要實現(xiàn)LOTAnimationView的圖片請求代理方法。Lottie內部不會自行請求圖片，而是通過代理方法的形式將圖片請求拋到外部實現(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內部生成的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/"，則你需要在服務端存儲的文件結構如下：
- 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)絡資源做動畫的詳細內容，更多關于iOS Lottie網(wǎng)絡資源做動畫的資料請關注腳本之家其它相關文章！
相關文章
本文主要介紹了iOS利用TabBarItem設置紅點（未讀消息）的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-04-04
IOS 開發(fā)之PickerView自定義視圖的實例詳解
這篇文章主要介紹了IOS 開發(fā)之PickerView自定義視圖的實例詳解的相關資料,這里提供實例幫助大家學習理解這部分知識，需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細介紹了iOS實現(xiàn)音樂播放器圖片旋轉，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家詳細介紹了iOS CoreData 增刪改查的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
本文主要介紹了IOS開發(fā)過程中的消息通知--小紅點的相關知識。大致分為兩種方法：系統(tǒng)方法和自定義方法。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了IOS React Native FlexBox詳解的相關資料,并附實例代碼，需要的朋友可以參考下2016-11-11
這篇文章主要針對iOS10新增Api進行詳細研究，基于Api層面，著重看一些具體用法所做的筆記，感興趣的小伙伴們可以參考一下2016-09-09
iOS中利用CAGradientLayer繪制漸變色的方法實例
有時候iOS開發(fā)中需要使用到漸變色，來給圖片或者view蓋上一層，使其顯示效果更好，所以這篇文章主要給大家介紹了關于iOS中利用CAGradientLayer繪制漸變色的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-11-11
這篇文章主要介紹了蘋果公司推出的新編程語言Swift簡介和入門教程,Swift是蘋果于WWDC 2014.6.3發(fā)布的編程語言,主要用來替代Objective-C,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細介紹了iOS獲取手機的Mac地址的多種方法，感興趣的小伙伴們可以參考一下2016-04-04