errnull-blog

[errnull-blog]

SVGA 设计使用指南

SVGA 提供了 AE 和 An 源文件导出 .svga 的插件， 方便设计师一键导出资源给开发使用， 以下是插件使用指南。

工作区

时间

SVGA 文件的动画时长，一般是由 Item 的工作区时长决定的:



插件右上角的设置中可以选择预设值：



如果选择 以动画实际时长为准 导出的动画时长会等于创建 Item 时设置的时长：



这个值随时可以修改。

这里要注意的是， SVGA 不支持修改动画的开始时间， SVGA 只从时间轴原点开始读取动画，动画时长为设置的动画时长(Duration)。

FPS

动效的 FPS 一般在 60 以内， 建议设置为 60 的约数： [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30, 60]

动效导出的时候会检查 FPS 是否合法， 如果不合法会自动就近修正，但不影响源文件。

合法 FPS 其实是个伪命题， 有这个规范主要是跟客户端屏幕刷新率有关， 客户端屏幕刷新帧率一般为 60 FPS， 播放动效跟这个节奏一致成本会低很多。

画布

每创建一个 Item 都会有一块预设画布， 可以在 Item 中设置画布的尺寸和背景颜色：



画布的尺寸对应 SVGA 文件的 width 和 height。

SVGA 动画没有预设背景色， 所以画布的背景颜色对 SVGA 动画没有影响。

图层

每创建一个图层，SVGA 动画中就会多一个动画元素， 它们通过图层名称和动画元素中的 imageKey 一一对应。

替换

播放 SVGA 动画的时候，可以通过 imageKey 动态替换图层内容。 需要提供给开发的信息:

imageKey

与图层一样尺寸的被替换素材

蒙版

图层可以通过设置蒙版属性：



控制图层的 alpha 通道， 达到只显示部分图案的效果。

蒙版一般为闭合路径，开放路径无法为图层创建透明区域。

遮罩

遮罩是图层间的关系，通过图层 TrkMat 设置，

可以一对一，也可以一对多， 在 SVGA 动效中对应动画元素的 matteKey。

注意将位图设置为遮罩图层的时候， 尽量使用 8-bpc 只带透明通道的图片以节约资源。

值得一提的是，位图遮罩的 imageKey 也是可以动态替换的， 就是说动效中的遮罩在播放的过程中是可变的。

SVGA 中的动画内容

SVGA 其实不叫 SVGA，应该叫 BVGA。 --官方吐槽

BVGA 即 Bitmap Vector Graphic Animation， 从名字可以看出，SVGA 中动画内容主要是位图和矢量。

位图

制作 SVGA 动画时可以使用：

png

jpg

psd

这三种格式， 但它们最终会被转成 png 素材。

这里要注意的是， SVGA 支持 psd 的图层样式， 导出 psd 文件的时候务必选择：

 合成 -> 合并图层样式 -> 确定

合并图层样式 合并图层样式 合并图层样式

重要的话说三遍， 否则会导致素材尺寸或者样式异常。

矢量

矢量是一组用来描绘图形的元数据， 在 AE 中可以使用：

钢笔工具

形状图形

来绘制， 但它们最终会被导成贝塞尔曲线。

SVGA 支持导入 .ai 文件 需要注意的是， .ai 文件同样会被导成贝塞尔曲线：



SVGA Converter 会自动执行转换， 不过更建议设计师导入 .ai 文件的时候自行转换，提前预览动画效果。

颜色

颜色深度（或位深度）是用于表示像素颜色的每通道位数 (bpc)。每个 RGB 通道（红色、绿色和蓝色）的位数越多，每个像素可以表示的颜色就越多。

在 After Effects 中可以使用 8-bpc、16-bpc 或 32-bpc 颜色。

除色位深度之外，用于表示像素值的数字的另外一个特性是数字是整数还是浮点数。浮点数可以表示具有相同位数的更大范围的数字。在 After Effects 中，32-bpc 像素值是浮点值。

8-bpc 像素的每个颜色通道可以具有从 0（黑色）到 255（纯饱和色）的值。16-bpc 像素的每个颜色通道可以具有从 0（黑色）到 32,768（纯饱和色）的值。如果所有三个颜色通道都具有最大纯色值，则结��是白色。32-bpc 像素可以具有低于 0.0 的值和超过 1.0（纯饱和色）的值，因此 After Effects 中的 32-bpc 颜色也是高动态范围 (HDR) 颜色。HDR 值可以比白色更明亮。

路径

修剪路径

路径修剪(TrimPath) 是一种矢量动效样式。 它一共有三个相关的属性：

trimPathStart, trimPathEnd, trimPathOffset，

它们分别表示 Path 从哪里开始，到哪里结束，距离起点多远。 在 AE 形状图层中可以添加：



可添加在形状(Shape)属性中，也可以添加在 Shape 之外对多个 Shape 造成影响：

 注意，SVGA 中现在还未支持外层修剪， 也不支持 trimPathOffset， 将在接下来的版本中完善。

文本

SVGA 中不支持文本导出，可以将文本图层转换为形状图层使用：



偶尔转换的图层会有问题， 不过转换是 AE 黑盒处理的，

咱也不知道咱也不敢问...

SVGA 中的动画属性

动效使用和展示

动画随时间而变化。 在 AE 中设计师通过使图层或图层上效果的一个或多个属性随时间变化， 来创建动画效果。

关键帧

关键帧用于设置动作、效果、音频以及许多其他属性的参数， 使这些参数随时间变化。

属性动画

属性包括了缩放、旋转、位移、透明度、颜色等等， 只要右侧属性面板中带小菱形标志， 都归纳到了这一类型中。

SVGA 支持属性动画的关键帧定制炫酷的效果， 这也是 SVGA 核心的动画能力。

这里要注意的是， 动画的属性，比如形状的透明度之类的， 最好直接设置在元素上，不要越级使用， 否则可能会合并异常。

最后

导出

打开插件



点击 选择位置 选择 SVGA 文件生成位置 注意：这里可以同时选择多个合成导出。

点击 开始转换，SVGA 文件就会生成在对应目录。

右上角设置中可以切换 SVGA 版本、选择导出时长。

特性总览

AE 除了上面提到的众多属性动效，还支持使用很多特性， SVGA 现在正在逐步完善中， 一下是特性总览表， 会逐步更新。



FAQ

友情链接

2D Manual SVGA 踩坑日记 After Effects Handbook README Board

[errnull-blog]

SVGA AE & An 问题解决日志

报告人：詹瞻 时间：2019 年 5 月 8 日 下午 10：39 项目：Converter-An 问题描述：矢量蒙版错位 提示：无 标签：matte to mask data lose

log: An 中的遮罩本是一个图层， 转到 svga 中的 mask 时 ��剩下 maskpath 丢失了落笔时 layout 记录的锚点数据 所以动画导出来会看到， 遮罩变成了从 (0,0) 点开始，错位。



解决方案： 将 layer 和 maskLayer 都转为 symbol， 这样子层级变成了 layer - symbol - vector 而此时这个 vector 落笔的点是(0, 0), layer 中记录的锚点数据会在合并 layer 时被写进到矢量数据中。





demo 下载 demo

return 0

[errnull-blog]

SVGA 动效格式调研

人眼通过动态图形的视觉残留产生动感,于是有了动效.

动态图形

无论是在 AE & Animate 中创作图形, 调节关键帧设置变化函数; 还是利用 PS 逐帧绘制导出 GIF, 本质上都是在产生一组连贯的序列画面. 动态图形也包含其中.

SVGA 最初就是为降低序列动画开销而生. SVGA 描述了组成动效的基本元素 (位图 & 矢量), 又将其在时间轴上的表现 (alpha & matrix) 逐帧导出, 播放逻辑也非常简单, 只需结合动效的每帧表现, 逐个渲染动画元素. 高还原动效的同时, 尽可能复用动画元素, 从而从各个方面降低了动效开销.

当我们谈论 SVGA 时，我们究竟在讨论什么

Animation(Player) Content(Frames) Tickers(FPS)

.svga(Parser) 序列化 反序列化

与序列帧动画的区别

动画元素颗粒度： SVGA 颗粒非常细而且可控。 序列帧只有一层。

降低序列动画开销.1

动画元素内容： SVGA 可以使用 矢量 和 位图 结合，平衡 CPU & GPU 的开销。 序列帧只能用位图。

降低序列动画开销.2

性能对比

"先定一个能达到的小目标, 比如动画达到 60 fps, 动画解析 100ms 内完成."

设备开销是一个很笼统的概念, 开销过大则设备卡顿,掉帧,发热,耗电,罪魁祸首,万恶之源.

从开发的角度来看, 文件大小, 解析耗时, 占用内存, CPU, GPU 都是可以衡量开销的维度, 以下从这几个维度对 1.x, 2.x, 序列帧 & GIF 做性能分析.

SVGA 1.x

1.x 是 SVGA 最初的版本格式, 实际上是由位图元素资源加上记录各元素每帧表现的 json 数据压缩成的 zip 包.

SVGA 2.x

2.x 的 SVGA 将 json 格式的动画描述文件转成 protobuf 二进制文件,极大提高了文件的解码速度.

序列帧 & GIF

序列帧 & GIF 属于全帧位图,特点是文件大小随动效还原程度拔高,播放的过程中会有长时间的内存高占用.

1.x & 2.x 比较

1.x & 2.x



概要：

在相对纯净的demo环境下进行测试;

测试手机为 iPhone 7P 12.3.1 小米 6 MIUI 9.6;

动效为 shengli(90% 位图) brithday(90% 矢量) ;

动效复杂度: shengli > brithday;

iOS 端：

在动效位图纹理比较多(90%)时，2.x 峰值解码时间比 1.x 快 70%, 平均快 84%;

在动效矢量元素比较多(90%)时，2.x 峰值解码时间比 1.x 快 66%, 平均快 104%;

其他数据相近, 解码后的渲染逻辑相同;

Android端：

在动效矢量元素比较多(90%)时，2.x 峰值解码时间比 1.x 快 308%, 平均快 276%;

伴随解码时间拉长,1.x 文件解码过程中, CPU 占用会出现长时间居高.

其他数据相近, 解码后的渲染逻辑相同;

安卓 1.x 动效 CPU 占用表:



结论：

SVGA 2.x 文件的解码速度高于 1.x, 平均高 120%,中低端机型差别更为明显.

矢量元素越多,动画描述文件越大,解码时间的差距越大.

后续渲染逻辑相同,其他数据相差不大.

附录

详细数据表