直播App中Android酷炫礼物动画实现方案(下篇):SVGA由来与Lottie的对比

本文主要是介绍直播App中Android酷炫礼物动画实现方案(下篇):SVGA由来与Lottie的对比,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这个动画,如果输出成GIF的话,要3MB,尺寸是750*750。在上一篇文章中已经介绍过几种被否掉的方法,这里再稍作补充说明,如果使用GIF实现,有以下问题。

  • 动画文件太大(4MB的大小)

  • 播放资源占用高(测试机子内存占用约30MB/CPU占用约50%)

  • 效果差(GIF只支持8位)

使用WebP呢?嗯,使用WebP可以把动画文件大小压缩到一半,但是,播放资源占用问题没有解决,这依然是头疼的问题,想想,一个视频直播流已经占用了系统给进程分配的大量内存,然后直播间里面可能成千上万甚至更大体量的人同时在线,观众们一个个赠送礼物的动画出来,应用直接给搞挂掉了……

如果使用A-PNG呢?使用A-PNG可以完美地解决效果差的问题,因为PNG支持32位颜色啊,但是,同样的天使动画,大小可以达到9M,播放资源占用更更更高!

探索

早在2015年,Adobe就已经把CreateJS收归旗下,并且可以完美地将Flash动画导出至Web中。也正是同一个时期,BodyMovin出现了,BodyMovin可以将另一个Adobe的软件After Effects所设计的动画完美地导出至Web中。这两者的出现,是我们开发SVGA灵感的源泉。

具体的思路是,将动画脚本导出,再将动画元素(位图)导出,然后在对应的客户端,重新拼合这些位图。这样做的好处很明显,元素是有限的,动画脚本也非常轻量,我们只需要一次性地把元素还原出来就可以了。

相比序列帧,这种方案得到的动画文件非常小,播放资源占用也非常小,效果却相当好(因为使用PNG支持32位颜色)。

实现

在2016年的时候,Lottie还没开源,并且BodyMovin的文档也相当欠缺,我们是不可能重新实现一个BodyMovin在iOS/Android上的播放器的。

于是,干脆重写一个?然后Pony就用了两周的时间,把SVGA Flash转换器写出来了,再用两周时间,把iOS和Android的Player也写出来(当然,只是Demo阶段)。一个月后,拿出来,给Da Lao们欣赏欣赏,Da Lao们都惊呆了……

这个方案,不仅资源占用很小很小(当时测试的数据内存占用约8M左右,CPU占用约2%),文件大小也非常小(天使动画只需295K),效果还狂拽酷炫高逼格。

紧接着接着,在YY内部就开始有了SVGA这个项目(当时没有开源),经过了一整年的迭代,在YY系的产品中有超过十多个产品的使用,应用范围涵盖iOS/Android/Web/PC客户端等。

SVGA与Lottie

在上一篇文章发出后,很多同学都在关注一个问题,SVGA和Lottie有什么区别?嗯,没有对比就没有伤害,既然Lottie这么强大,我们就用SVGA来跟它做一番对比,以下列了一些特性差异:

  • 从CreateJS/Lottie实现的原理来看,都是将设计软件中的时间轴完整地导出来,包括里面的各种关键帧信息、矢量路径、样式等等。其中,最为关键的是『关键帧』!由于使用的是关键帧动画描述,那么对应的Player就难免变得复杂起来。如果只是简单的一次线性方程,比如,物体从A点匀速移动至B点,还OK。但是,当遇到二次线性方程、贝塞尔曲线方程这些高阶插值计算的时候,Player就会很吃力。(矢量动画就是通过一些公式能表达的矢量线条和色块,以此来表示每一帧动画)

  • CreateJS可以导出Flash动画,Lottie可以导出After Effects动画,但是它们都不能导出对方的动画(每种设计工具的脚本都是不一致的),这也意味着,你家的设计师只能使用其中一种设计工具。

  • Lottie在导出位图动画方面不够友好,从UI设计师和开发人员使用角度来看都比较麻烦,开发人员需要先将做好的效果打包成ZIP,再解压到本地目录,才能播放。

  • SVGA使用另外一套逻辑,它不关心关键帧,因为SVGA里面的每一帧都是关键帧!也就是说,SVGA已经在导出动画的时候,把每一帧的信息都计算好了,如此一来,Player也就不用关心插值计算的过程。正因为如此,SVGA可以同时支持Flash和After Effects的导出,只需要在各自转换器中计算差值就好了。

  • SVGA在设计之初就支持位图元素,在1.x格式时使用ZIP进行打包,在2.x格式中,直接使用ProtoBuf+Zlib方式打包,作为开发者,完全不用关心应该怎样下载、解压、获取位图文件,直接把svga文件扔进去Player就可以了。

  • 功能上,SVGA更贴合直播应用场景,SVGA所提供的动态文本、动态图像功能都是其它库所不能提供的。

生态

SVGA提供一整套的动画解决方案,从设计、产品、开发三个环节保障动画可快速落地。

为了让设计师可以快速地导出动画,我们开发了Flash/After Effects插件。

http://svga.io/designer.html

为了让开发者可以轻易地接入动画,我们开源了iOS/Android/Web三个平台的源码。

  • https://github.com/tmacyi/SVGAPlayer-iOS

  • https://github.com/tmacyi/SVGAPlayer-Android

  • https://github.com/tmacyi/SVGAPlayer-Web-Lite

为了让所有人都可以快速获知动画是否正常,动画中的元素属性,我们开发了动画预览器。

http://svga.io/svga-preview.html

欢迎关注

这篇关于直播App中Android酷炫礼物动画实现方案(下篇):SVGA由来与Lottie的对比的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/900701

相关文章

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

openCV中KNN算法的实现

《openCV中KNN算法的实现》KNN算法是一种简单且常用的分类算法,本文主要介绍了openCV中KNN算法的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录KNN算法流程使用OpenCV实现KNNOpenCV 是一个开源的跨平台计算机视觉库,它提供了各

OpenCV图像形态学的实现

《OpenCV图像形态学的实现》本文主要介绍了OpenCV图像形态学的实现,包括腐蚀、膨胀、开运算、闭运算、梯度运算、顶帽运算和黑帽运算,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起... 目录一、图像形态学简介二、腐蚀(Erosion)1. 原理2. OpenCV 实现三、膨胀China编程(

通过Spring层面进行事务回滚的实现

《通过Spring层面进行事务回滚的实现》本文主要介绍了通过Spring层面进行事务回滚的实现,包括声明式事务和编程式事务,具有一定的参考价值,感兴趣的可以了解一下... 目录声明式事务回滚:1. 基础注解配置2. 指定回滚异常类型3. ​不回滚特殊场景编程式事务回滚:1. ​使用 TransactionT

Android实现打开本地pdf文件的两种方式

《Android实现打开本地pdf文件的两种方式》在现代应用中,PDF格式因其跨平台、稳定性好、展示内容一致等特点,在Android平台上,如何高效地打开本地PDF文件,不仅关系到用户体验,也直接影响... 目录一、项目概述二、相关知识2.1 PDF文件基本概述2.2 android 文件访问与存储权限2.

使用Python实现全能手机虚拟键盘的示例代码

《使用Python实现全能手机虚拟键盘的示例代码》在数字化办公时代,你是否遇到过这样的场景:会议室投影电脑突然键盘失灵、躺在沙发上想远程控制书房电脑、或者需要给长辈远程协助操作?今天我要分享的Pyth... 目录一、项目概述:不止于键盘的远程控制方案1.1 创新价值1.2 技术栈全景二、需求实现步骤一、需求

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S

SpringBatch数据写入实现

《SpringBatch数据写入实现》SpringBatch通过ItemWriter接口及其丰富的实现,提供了强大的数据写入能力,本文主要介绍了SpringBatch数据写入实现,具有一定的参考价值,... 目录python引言一、ItemWriter核心概念二、数据库写入实现三、文件写入实现四、多目标写入

Android Studio 配置国内镜像源的实现步骤

《AndroidStudio配置国内镜像源的实现步骤》本文主要介绍了AndroidStudio配置国内镜像源的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、修改 hosts,解决 SDK 下载失败的问题二、修改 gradle 地址,解决 gradle