直播礼物的专栏

在一个月黑风高的夜里，一位开发Da Lao在朋友圈吐槽『你们UED设计的动画，太炫了！我们实现不了……！』，接着小B（UED掌门人）与这位Da Lao谈了一整晚的人生。第二天，小B把Pony捉到了会议室，说道：『给你个死任务，把UED设计出来的动画，实现到《ME直播》中，不然就拿你去祭天』。Pony差点当场就尿了……先给你看看，UED的动画是酱紫的。这个动画，如果输出成GIF的话，要3MB，尺寸是750*750。在上一篇文章中已经介绍过几种被否掉的方法，这里再稍作补充说明，如果使用GIF实现，有以下问

在当下移动直播火爆的年代，如果你曾经使用过移动端直播应用，相信会被里面那令人惊叹的礼物动画效果迷住，比如像下面这样的效果。从开发人员的角度来看，这样的效果虽然漂亮，实现但却是一大挑战，除了要考虑编码实现的效率、性能表现外，还要结合直播业务本身的特性等。实现思路首先，从实现思路方面入手，有以下几个方案作为考虑： 方案一：帧动画； 方案二：属性动画； 方案三：Gif或WebP； 方案四：实现一套播放动画的框架，客户端只需要继承进来，UI设计师按照约定的动画语

——⑤序列帧怎么节省，抽帧又是什么意思？ 答： 压缩图片是减少文件大小，与内存占用是两个值。 节省考虑：时长不变，减少精度（画面大小），减少帧率（图片张数）。 如果应用熟练，可以将序列帧消耗仅用在复杂的部分表现，好钢用在刀刃上。 具体可以移步之前帖子，传送门。   ...

序列资源使用篇： ——④序列资源闪烁问题修复 问：AE输出序列帧会闪\可能重叠前一帧\又或者少一帧\每次bug还随机？？ 答： 序列帧的资源如果能够做到不滥用序列帧，还是可以进阶使用的。 很多同学反映序列帧在SVGA输出时重复绘制的问题，BUG询问了官方，没有得到反馈。 在群友的交流下，得知AN输出序列帧资源不会出问题。 经过测试和部分同学验证，给出大家以下解决方法： 序列帧资源添加透明度关键帧，0→100→0, 关键帧切换类型改为定格切换 原理： AE的关键帧过渡更为多样

——③输出SVGA后缀名丢失 问：输出时后缀名丢失？导出没有后缀的文件（.svga）咋整？ 答：莫慌，肯定是你在导出操作时，把文件命名.svga一起从新输入了，仔细看图。 即便习惯不好或者感觉不顺手，那导出后，手动重命名添加.svga也ok的。     ...

——②png命名后缀bug(X.X.png)导致输出丢失。 问：我这次做礼物是使用的png资源，但全都无法输出，为什么？ 答：命名不规范，引擎时代，程序会禁止美术使用乱七八糟符号命名，甚至限制空格的使用； 如果需要字符隔开，可以使用下划线（_）。 回到正题，为了更清楚的介绍这个问题，我给大家复现一下BUG。 输出两组图片，不同命名，A组Test.01（乱加了.符号点）,B组Test_01 同样的效果如下 输出后，BUG出现，A组命名的图片输出丢失，不要乱加符号，有必要就

资源输出丢失： ——①jpg资源导致输出黑屏\强调检查习惯、使用在线预览功能。 问：输出的svga会突然变黑，文件刚开始做，还没有牵扯到复杂的做法。 答：收到他的文件，使用官方的在线预览发现了端倪。 地址如下：http://svga.io/svga-preview.html  在线预览相比本地输出有一个更强大的功能，”浏览素材” 很实用。 ![预览](https://img-blog.c...

SVGA介绍SVGA 是一种动画格式SVGA 类似于 Dragonbones / CreateJS格式规范1.x1.x 使用 JSON 描述动画，JSON 是一种易于扩展的、强大的描述语言，但是，JSON 也有一个致命的缺点，当动画极度复杂时，JSON 文件会变得非常大，解析耗时以及内存开销会增大。因此，JSON 方案已于 2.0 开始，被弃用。2.x2.x 使用 ProtoBuf 描述动画，相关的 Proto 协议可以在此获取2.x SVGA 文件是使用 ProtoBuf 编写的二

vue-svga这是基于svga.lite封装的一个Vue组件支持其所有配置，且默认值也保持一致组件接受参数属性名说明类型默认值必须src资源链接(需使用require包裹链接)stringundefined是options包括官网的所有配置，详情见这里object{}否options.autoPlay加载完毕后是否自动播放booleantrue否安装yarn add vue-svga# 或者npm i vue-svga

SVGAPlayer-Web-Lite这是一个 SVGA 在移动端 Web 上的播放器，它的目标是 更轻量、更高效，但它也放弃了对旧版本浏览器的兼容性支持。依赖 Promise若出现 Promise is not a constructor 等问题，外链 polyfill 或配置 babel 进行兼容<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></scri

SVGAPlayerVersion1.2.3首个 SVGAPlayer - React Native 官方支持版本使用import SVGAPlayer from 'svgaplayer';...render() { return ( <SVGAPlayer style={{width: 200, height: 200}} source="http://yourserver/xxx.svga" /> )}参数source: String

SVGA-Format介绍SVGA 是一种动画格式SVGA 类似于 Dragonbones / CreateJS格式规范1.x1.x 使用 JSON 描述动画，JSON 是一种易于扩展的、强大的描述语言，但是，JSON 也有一个致命的缺点，当动画极度复杂时，JSON 文件会变得非常大，解析耗时以及内存开销会增大。因此，JSON 方案已于 2.0 开始，被弃用。2.x2.x 使用 ProtoBuf 描述动画2.x SVGA 文件是使用 ProtoBuf 编写的二进制文件，并使用 zli

# SVGAPlayer-Web-Lite这是一个 SVGA 在移动端 Web 上的播放器，它的目标是 **更轻量**、**更高效**，但它也放弃了对旧版本浏览器的兼容性支持。## 依赖 Promise若出现 `Promise is not a constructor` 等问题，外链 polyfill 或配置 babel 进行兼容```html<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promis

SVGAPlayer-Flutter介绍SVGAPlayer 是一个轻量的动画渲染库。你可以使用工具从 Adobe Animate CC 或者 Adobe After Effects 中导出动画文件，然后使用 SVGAPlayer 在移动设备上渲染并播放。SVGAPlayer-Flutter 通过 Flutter CustomPainter 原生渲染动画，为您带来高性能，低成本的动画体验。如果你想要了解更多细节，请访问官方网站。SVGAPlayer-Flutter 只支持 2.0 版本格式.