动画库 - Lottie-iOS

目录：

动画库 - Lottie-iOS
动画库 - SVGA-iOS
动画库 - Keyframes-iOS

APP常见的动画库对比：

动画库	Lottie	SVGA	Keyframes
支持平台	Android/iOS/Web	Android/iOS/Web	Android/iOS
设计工具支持	AfterEffects(AE)	AE&Flash	AE
功能边界	所有	部分	矢量图
导出工具	插件	插件	脚本
设计成本	需要命名规范	无	需要脚本
资源包大小zip	2.6M	767K
官网	airbnb.design/lottie/	svga.io/	git地址

简介

Lottie是一个可以解析使用【bodymovin】插件从 Adobe After Effects 中导出的格式为json的文件，并在 iOS、Android、macOS、React Native 和 Windows 中进行解析使用的开源库。

设计师导出流程图

优缺点

优点：

1. 开发效率高，设计满意度高。设计师导出json + images文件，开发几行代码就能实现其效果。
2. 替换GIF，远程配置动画，跨品台。运营直接在配置设计师给的json文件和资源文件，就能实现动画效果。
3. 提升APP性能体验。比如iOS的GIF图非常浪费CPU和内存，但Lottie会好很多。

缺点：(转自知乎博主)

1. Lottie不支持任何形式的表达式，如果把表达式转换为关键帧会降低性能，请自行斟酌
2. 对于描边来说，由于AE本身不支持内外描边，lottie只能导出中心描边。在sketch/ai中请不要使用内外描边。
3. 果动画中涉及到大量位图，最终性能会大幅度降低。

demo实例：

1. Pods引入解析库lottie-ios。为了快速实现demo，没有使用最新版本的库，如果你开发用到此功能，建议学习使用最新版本，毕竟Lottie库越来越完善。

pod 'lottie-ios', '~> 2.5.2'

2. 导入资源文件

   
   
   json + images
3. 具体实现

    LOTAnimationView *calculateView = [[LOTAnimationView alloc] init];
    calculateView.frame = self.view.bounds;
    [calculateView setContentMode:UIViewContentModeScaleAspectFit];
    [calculateView setAnimationNamed:@"xinghe" inBundle:[NSBundle bundleWithPath:[[NSBundle mainBundle] pathForResource:@"xinghe" ofType:@"bundle"]]];
    [calculateView play];
    [calculateView setLoopAnimation:YES];
    [self.view addSubview:calculateView];

4. 动画效果

   
   
   动画效果

目录：

动画库 - Lottie-iOS
动画库 - SVGA-iOS
动画库 - Keyframes-iOS