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



作者:吴虎虎_zzz
链接:https://www.jianshu.com/p/3c8e8025757d
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
阅读更多
个人分类: 备忘
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭