最近專案中遇到的需求是這樣的:開啟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];