ios json檔案載入動態圖,讓app真正動起來
最近專案中遇到的需求是這樣的:開啟app,我們需要載入一個動態的網路圖片(gif圖).但美工做好之後,給了我們一個幾十兆的gif動畫圖片(而且還是壓縮壓縮再壓縮的都有毛邊兒效果了),先不說效果怎麼樣,單純的加在專案中,而且還是動態獲取,可想而知,使用者開啟app.首先下載個幾十兆的動態圖!估計app在使用者端的手機上存活的時間不超過三秒!!!更別說後續體驗怎麼樣了.
鑑於以上弊端,在網上查了些資料,發現了一個ios、 Android、 macOS、React Native中均可使用的開源庫:Lottie!
大致工作原理是:Lottie是一個可以解析使用【bodymovin】外掛從
至於如何製成並匯出動畫json檔案及lottie的使用 ,大家可以參考一下兩個連結,我也在博主的部落格中受益!!!再次也多謝技術分享的大佬們!
那麼本篇文章中,不詳細敘述關於lottie的原理等.只粘出lottie在專案中的使用情況.
假設我們已經在專案中配置了lottie.
場景1:UI設計提供了動畫json 檔案及所需images包資源.(此場景在app中每次固定顯示,耦合度較高,使用條件有限!)
場景1中效果,我們可以直接使用官網給出的簡單實現方法:
1.先將json檔案及images圖片資源包拖到工程中.
例: json檔案為:data.json
宣告個lottie動畫物件:
@property(nonatomic,strong)LOTAnimationView *launchAnimation;
//新增動畫:
_launchAnimation =[LOTAnimationViewanimationNamed:@"data"];//例項化物件
_launchAnimation.cacheEnable =NO;
_launchAnimation.
_launchAnimation.contentMode =UIViewContentModeScaleToFill;
_launchAnimation.animationSpeed =0.5;//動畫時間
_launchAnimation.loopAnimation =YES;//是否迴圈動畫
[_launchAnimationplay];//開始動畫
[self.viewaddSubview:_launchAnimation];
場景2:動態網路獲取相關json檔案及所需images包資源.(此場景可應對專案中gif動圖根據需求隨時修改,耦合度較低,也經常被使用!)
//建立資料夾
NSFileManager *fileManager = [NSFileManagerdefaultManager];
NSString *str1 = NSHomeDirectory();
NSString *filePath = [NSStringstringWithFormat:@"%@/Documents/imageViews",str1];
if(![fileManager fileExistsAtPath:filePath]){
NSString *path = [NSHomeDirectory() stringByAppendingPathComponent:@"Documents"];
NSString *directryPath = [path stringByAppendingPathComponent:@"imageViews"];
[fileManager createDirectoryAtPath:directryPath withIntermediateDirectories:YESattributes:nilerror:nil];
filePath =directryPath;
}
//NSLog(@"filePath --- %@",filePath);
//假設img資源包有12個元素(當然返回多少圖片根據伺服器返回結果確定!)
for (int i =0; i <12; i ++) {
NSString *urlString =[NSStringstringWithFormat:@"http://192.168.1.188/images/img_%d.png",i];
NSData *data = [NSDatadataWithContentsOfURL:[NSURLURLWithString:urlString]];
UIImage *image = [UIImage imageWithData:data]; // 取得圖片
NSString * string =[NSString stringWithFormat:@"%@/images/img_%d.png",filePath,i];
BOOL success = [UIImagePNGRepresentation(image) writeToFile:string atomically:YES];
if (success){
NSLog(@"寫入本地成功");
}
}
//data.json檔案儲存這裡不描述
//找到data.json檔案路徑.
NSString * dataPath =[NSStringstringWithFormat:@"%@/data.json",filePath];
_launchAnimation =[LOTAnimationViewanimationWithFilePath:dataPath];
_launchAnimation.cacheEnable =NO;
_launchAnimation.frame =CGRectMake(20, 200, 350, 250);//動畫範圍
_launchAnimation.contentMode =UIViewContentModeScaleToFill;
_launchAnimation.animationSpeed =0.5;//動畫時間
_launchAnimation.loopAnimation =YES;//是否迴圈動畫
[_launchAnimationplay];//開始動畫
[self.viewaddSubview:_launchAnimation];
到此,lottie載入json檔案gif動畫,在專案中的使用基本解決,更多特效如有需要繼續研究,也希望大佬們有好的建議,積極分享討論!歡迎加入技術交流群One Team: 234713941