动画库 - 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
  1. 导入资源文件(18KB)
设计师使用插件导出的资源文件
  1. 具体实现
    SVGAImageView *imageView = [[SVGAImageView alloc]initWithFrame:CGRectMake(0, 400, 420, 200)];
    [imageView setImageName:@"底部动画"];
    imageView.autoPlay = YES;
    [self.view addSubview:imageView];
  1. 动画特效图


    动画特效图

目录:

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

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 目录: 动画库 - Lottie-iOS[https://www.jianshu.com/p/1bbd64b047...
    恩莱客阅读 4,147评论 0赞 3
  • 在一个月黑风高的夜里,一位开发 Da Lao 在朋友圈吐槽『你们 UED 设计的动画,太炫了!我们实现不了……!』...
    PonyCui阅读 24,551评论 19赞 42
  • 前言 在开发APP的过程中,需要在APP中实现设计同学的UE效果动画,一般都是通过代码实现的,当对于较复杂的动画时...
    Japho阅读 66,402评论 27赞 117
  • 历时两个月断断续续终于整理完了这篇文章,希望能对大家工作中遇到的一些问题有所帮助(多图慎点)* 部分素材来源网络(...
    Jadon7阅读 2,294评论 6赞 8
  • 近期项目出于项目的包体大小缩减和复杂动画的流畅性与还原度考虑,将序列帧动画根据在不同动画库的表现进行替换,主要考虑...
    bluedaquiri阅读 2,459评论 0赞 2

友情链接更多精彩内容