介紹
Airbnb團(tuán)隊(duì) 發(fā)布的 Lottie 是一個(gè)面向 iOS、Android 和 React Native 的跨平臺(tái)的開源動(dòng)畫庫。
Lottie可以直接利用 AE上的bodymovin插件導(dǎo)出的 JSON 動(dòng)畫文件,將JSON文件解析為原生代碼吕粹,實(shí)現(xiàn)動(dòng)畫效果。
工具
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
導(dǎo)出JSON動(dòng)畫文件
安裝之后需要在preferences中打開"Allow Scripts to Write Files and Access Network"。
而Plugin可以在window -> extensions下看到bodymovin
在bodymovin plugin介面下記得先選擇Destination Flder扭倾,然后就可以選擇render拿到文件了。
測(cè)試過程中發(fā)現(xiàn)如果settings勾選了除了demo以外的內(nèi)容挽绩,會(huì)生成js文件膛壹,而不是可以使用的JSON文件,應(yīng)該是包括了其他內(nèi)容唉堪。
這里L(fēng)ottie提供了一些AE源
代碼
1.
self.animationV= [LOTAnimationView animationNamed:@"HamburgerArrow"];
self.animationV.contentMode=UIViewContentModeScaleAspectFill;
[self.view addSubview:self.animationV];
[self.animationV play];
把相應(yīng)json的文件名設(shè)置一下模聋,就可以使用了。
2. 支持 遠(yuǎn)程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.reibang.com/p/9a2136ecbc7b
?? ? ? ? ??陳董DON的文章