iOS Lottie动画框架使用 AE导出JSON文件

介绍

Airbnb团队 发布的 Lottie 是一个面向 iOS、Android 和 React Native 的跨平台的开源动画库。

Lottie可以直接利用 AE上的bodymovin插件导出的 JSON 动画文件，将JSON文件解析为原生代码，实现动画效果。

工具

AE 破解版下载地址：http://www.dayanzai.me/after-effects-cc-2014.html

bodymovin 安装下载教程： http://www.mq2014.com/bodymovin-ae-cha-jian-mac-win-an-zhuang-xia-zai.html

Lottie-iOS :https://github.com/airbnb/lottie-ios

导出JSON动画文件

安装之后需要在preferences中打开"Allow Scripts to Write Files and Access Network"。

而Plugin可以在window -> extensions下看到bodymovin

在bodymovin plugin介面下记得先选择Destination Flder，然后就可以选择render拿到文件了。

测试过程中发现如果settings勾选了除了demo以外的内容，会生成js文件，而不是可以使用的JSON文件，应该是包括了其他内容。

这里Lottie提供了一些AE源

代码

1.

self.animationV= [LOTAnimationView animationNamed:@"HamburgerArrow"];

self.animationV.contentMode=UIViewContentModeScaleAspectFill;

[self.view addSubview:self.animationV];

[self.animationV play];

把相应json的文件名设置一下，就可以使用了。

2. 支持 远程json文件

self.animationV= [[LOTAnimationView alloc]i nitWithContentsOfURL:[NSURLURLWithString:@"http://cdn.trojx.me/blog_raw/lottie_data_origin.json"]];

self.animationV.frame=CGRectMake(0,0,375,667);

self.animationV.contentMode=UIViewContentModeScaleAspectFill;

[self.view addSubview:self.animationV];

[self.animationV play];

参考文章：http://www.jianshu.com/p/9a2136ecbc7b

           陳董DON的文章

          http://www.cocoachina.com/ios/20170208/18652.html