介绍
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];