酷炫的動效開源庫-lottie

關於 lottie

Airbnb 開源項目：lottie-ios

lottie能干啥？

如上圖所示，lottie 能快速的讓你的APP動起來！

---

lottie有啥優勢？

• 跨平台：支持 Android、iOS 以及 ReactNative，共用一套 json 動畫描述文件。
• 動效復雜度：可以繪制復雜的動畫，並能控制它的繪制進度，速度。
• 消耗小：相比於幀動畫、GIF圖、短視頻，lottie 的性能消耗和內存占用小。
• 屏幕尺寸兼容性：lottie是矢量繪圖不使用圖片，你只需要做簡單的屏幕布局就可以完美兼容不同尺寸屏幕。
• 支持“熱更新”：lottie支持URL格式的json動畫描述文件，這意味着可以在線更新你的動畫效果。

---

lottie如何使用？

你需要一名會使用 After Effects 的動效設計師（一般公司都配備），而你最終動畫的效果也就要看設計師的功力了。設計師調整好動畫后用一款插件叫做 Bodymovin 的 After Effects 插件導出描述了動畫的一些關鍵點的信息（坐標，顏色）以及運動軌跡的 json 動畫描述文件。有了這個 json文件，lottie就能幫你簡單快速的集成動畫了。
json文件內容長這樣 ：

   {"assets":[],"layers":[{"ddd":0,"ind":0,"ty":1,"nm":"N7","parent":2,"ks":{"o":{"k":0},"r":{"k":0},"p":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p667_1_0p167_0p167","t":215,"s":[164.77,73.598,0],"e":[164.77,72.723,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":221,"s":[164.77,72.723,0],"e":[164.77,73.598,0],"to":[0,0,0],"ti":[0,0,0]},{"t":227}]},"a":{"k":[60,60,0]},"s":{"k":[100,100,100]}},"ao":0,"sw":120,"sh":120,"sc":"#ffffff","ip":199,"op":378,"st":-29,"bm":0,"sr":1},...}

iOS工程代碼：

   //URL json文件
   //LAAnimationView *lottieView = [[LAAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:@"http://...."]];
   //本地json文件
   LAAnimationView *lottieView = [LAAnimationView animationNamed:@"Lottie-json"];
   lottieView.contentMode = UIViewContentModeScaleAspectFill;
   [self.view addSubview:lottieView];

值得一提的是 lottie 還是支持轉場動畫，更多使用方式去參考官方demo吧。