Lottie-iOS使用心得

移動開發發展了10多年了，在當今一個APP想要脫穎而出必須在使用者體驗上足夠出色，而APP使用者介面動畫就能極大地提升使用者體驗流暢感和互動感，這也常常是區分APP優秀與否的一個重要標準。但是實現一個試圖切換複雜的動畫是非常複雜費時的gif體驗太差！！。每次設計師向我展示一個很好很酷的動畫並希望能置入應用時，我也覺得這很酷炫啊，高大上啊，道理我都懂，可是專案版本時間有限啊，然後就不了了之。

Airbnb開源的Lottie，可以讓開發者免去寫一行一行的程式碼而非常容易地渲染動畫。你可以直接把 Adobe After Effects的動畫用在你的Xcode 專案中。並且Android、macOS、React Native都可使用。

首先要說的是：什麼是Lottie呢？由Airbnb開發的[Lottie](https://github.com/airbnb/lottie-ios)是一個將After Effects動畫提供給任意一個iOS，macOS，Android還有React Native原生APP的檔案庫。這些動畫通過一個叫[Bodymovin](https://github.com/bodymovin/bodymovin)的開源After Effects外掛，以JSON檔案的形式進行輸出。Lottie通過JSON格式下載動畫資料並實時提供給開發者。

Lottie現在不僅在GitHub上已經開源，而且還提供一個示例專案和一系列的示例動畫

   在Xcode中使用Lottie

  到https://github.com/airbnb/lottie-ios下載最新版本原始碼，其中自帶了 Demo，可執行方便學習。

  整合的方法可以使用 cocoapods 方式整合，也可以使用 Carthage 方式整合。整合方法見官網說明。

  pod install 安裝成功後，在需要使用的檔案中加入標頭檔案的引用

#import  <Lottie/Lottie.h>

獲取到本地的動畫json檔名

  self.jsonFiles = [[NSBundle mainBundle] pathsForResourcesOfType:@"json" inDirectory:nil];

  NSString *fileURL = self.jsonFiles[indexPath.row];

  NSArray *components = [fileURL   componentsSeparatedByString:@"/"];   

  if (self.completionBlock)

   {     

 self.completionBlock(components.lastObject);  

   }

通過json檔名開始動畫

  self.laAnimation = [LOTAnimationView animationNamed:named];

  self.laAnimation.contentMode = UIViewContentModeScaleAspectFit;  

  [self.view addSubview:self.laAnimation];

  [self.view setNeedsLayout];

通過遠端url建立動畫

  self.laAnimation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];      self.laAnimation.contentMode = UIViewContentModeScaleAspectFit;   [self.view addSubview:self.laAnimation];   [self.view setNeedsLayout];

更多功能待補充

優缺點

優點：

1、開發成本低。設計師匯出 json 檔案後，扔給開發即可。原本要1天甚至更久的動畫實現，現在只要不到一小時。

2、動畫的實現成功率高，只有想不到，沒有辦不到。

3、支援服務端 URL 方式建立。所以可以通過服務端配置 json 檔案，隨時替換客戶端的動畫，不用通過發版本就可以做到了。比如 app 啟動動畫可以根據活動需要進行變換了。（重要）

4、效能。可以替代原來需要使用幀圖完成的動畫。

5、跨平臺。iOS、安卓平臺可以使用一套檔案。省時省力，動畫一致。不用設計師跑去兩邊去跟著微調確認了。

6、支援轉場動畫。 PresentViewController／DismissViewController 時可以做轉場效果。

不足：

1、對系統平臺版本限制，如 iOS8 及以上，安卓 API14 及以上。

2、對可互動的動畫暫時還不行。主要是以播放型別動畫。