酷炫的动效开源库-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吧。

转载于:https://www.cnblogs.com/moyazi/p/6367690.html