动画库 - SVGA-iOS
2021-11-02 本文已影响0人
恩莱客
目录:
动画库 - 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实例:
-
Pods
引入解析库SVGAPlayer
。
pod 'SVGAPlayer', '~> 2.5.7'
pod install --repo-update
- 导入资源文件(18KB)
- 具体实现
SVGAImageView *imageView = [[SVGAImageView alloc]initWithFrame:CGRectMake(0, 400, 420, 200)];
[imageView setImageName:@"底部动画"];
imageView.autoPlay = YES;
[self.view addSubview:imageView];
-
动画特效图
动画特效图