动画库 - SVGA-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地址

简介

SVGA 是一种跨平台的开源动画格式，同时兼容iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。

优缺点

优点：

• 资源包小
• 测试工具齐全
• 跨平台，三端可用
• 回调完整
• Protobuf 序列化结构数据格式，序列化的数据体更小，传递效率比xml,json 更高。

缺点：

• 每个礼物播放时都重新解压，需要改一套缓存策略
• svga 用zlib打包(字节流数据压缩程序库)，不方便解压和追踪包内容。

SVGA动画库源码思路：

• 一帧一帧
• 通过设置帧率，来生成一个配置文件，使得每一帧都有一个配置，每一帧都是关键帧，通过帧率去刷每一帧的画面，这个思路跟gif很像，但是通过配置使得动画过程中图片都可以得到复用。性能就提升上来了。并且不用解析高阶插值（二次线性方程，贝塞尔曲线方程）

demo实例：

1. Pods引入解析库SVGAPlayer。

pod 'SVGAPlayer', '~> 2.5.7'

 pod install --repo-update

2. 导入资源文件（18KB）

设计师使用插件导出的资源文件

3. 具体实现

    SVGAImageView *imageView = [[SVGAImageView alloc]initWithFrame:CGRectMake(0, 400, 420, 200)];
    [imageView setImageName:@"底部动画"];
    imageView.autoPlay = YES;
    [self.view addSubview:imageView];

4. 动画特效图

   
   动画特效图

目录：

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