<a href="https://www.lottiefiles.com"> Lottie(https://www.lottiefiles.com)</a>是Android和iOS的移动图书馆，可解析Adobe After Effects动画，并以bodymovin作为json导出，并通过React Native在本机上呈现矢量动画！
设计师可以创建和运送美丽的动画，而无需工程师手动重新创建它。由于动画由JSON支持，因此它们的体积非常小，但复杂程度可能很大！动画可以播放，调整大小，循环，加速，减慢，甚至交互。
Lottie 动画其实就是加载通过AE导出的一个JSON文件, 设计师先通过AE把动画制作好, 然后通过bodymovin插件导出文件, 如果动画需要图片, 也需要把图片导出. 就可以了, 对于比较复杂的动画来说, Lottie就是福音呀, 在于不用写复杂的动画代码了.
使用:
使用cocoaPod导入Lottie动画库
pod 'lottie-ios'
导入Lottie头文件
#import <Lottie/Lottie.h>
执行动画的代码
//data就是一个json文件, data.json, 这个文件可以自己通过AE来制作, 也可以去https://www.lottiefiles.com去下载文件
LOTAnimationView *animation = [LOTAnimationView animationNamed:@"data"];
[self.view addSubview:animation];
animation.frame = self.view.bounds;
animation.contentMode = UIViewContentModeScaleAspectFit;
animation.loopAnimation = YES;
[animation playWithCompletion:^(BOOL animationFinished) {
NSLog(@"succ");
}];
这样一个复杂的动画界制作完成了.
如果动画需要图片别忘了把图片也导入工程
除了加载本地文件之外, Lottie也支持加载网络文件
LOTAnimationView *animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];
[self.view addSubview:animation];
Lottie目前来说加载动画很流畅, 很轻量级, 加载复杂的动画再也不需要使用Gif图了, 而且是一套动画的json文件可以再iOS, Android, Web上运行, 大大节省了编写动画的时间. 但是目前Lottie的动画交互不好, 不能根据用户的操作, 把动画分为介个步骤来执行, 交互还需解决, 另外执行动画的json源文件可独性太差, 再次编辑的伴读很大, 如果需要修改, 还需AE重新导出.
<a href="https://www.lottiefiles.com">Lottie动效库<a>
<a href="https://github.com/airbnb/lottie-ios">Lottie GItHub地址<a>
