SVGA-Format 动画格式 JSON 描述动画

Question

介绍

• SVGA 是一种动画格式
• SVGA 类似于 Dragonbones / CreateJS

格式规范

1.x

1.x 使用 JSON 描述动画，JSON 是一种易于扩展的、强大的描述语言，但是，JSON 也有一个致命的缺点，当动画极度复杂时，JSON 文件会变得非常大，解析耗时以及内存开销会增大。

因此，JSON 方案已于 2.0 开始，被弃用。

点此了解 1.x 的格式规范

2.x

2.x 使用 ProtoBuf 描述动画，相关的 Proto 协议可以在此获取

2.x SVGA 文件是使用 ProtoBuf 编写的二进制文件，并使用 zlib 压缩后得到。

Player 规范

2.0.0

2.0.0 的 Player 理应播放 2.x 的格式文件，并向下兼容 1.x 格式文件。

1.x

1.x 的 Player 只能播放 1.x 的格式文件，不能播放 2.x 的格式文件。

JSON 格式

JSON 格式是 1.x 的描述标准，在 2.x 版本中已经使用 Protobuf 替代。

介绍

• SVGA 是一种专有动画格式
• SVGA 的类似格式是 GIF / A-PNG / WebP

格式规范

• SVGA 文件以 .svga 作为后缀使用（该后缀不是ISO格式）
• SVGA 使用 ZIP 进行压缩、打包
• SVGA 解压后不允许拥有子目录
• SVGA 打包前、解压后的文件名不允许包含非标准文件名字符存在（不允许中文、日文等字符）

图像文件

• 位图文件要求格式为 PNG-8 或 PNG-24
• 位图文件建议使用 pngquant 进行压缩
• 位图文件以 .png 后缀命名

描述文件

• 描述文件协议为 JSON，文件名为 movie.spec。

JSON 结构

{
  ver: "1.1.0",                // SVGA 格式版本号
  movie: {
    viewBox: {
      width: 300.0,
      height: 300.0
    },                     // 画布大小
    fps: 20,                 // 动画每秒播放帖数，合法值是 [1, 2, 3, 5, 6, 10, 12, 15, 20, 30, 60] 中的任意一个。
    frames: 144                // 动画总帖数        
  },
  images: {
    Key: "Path"                // Key 是位图键名，Path 是位图文件名。
  },
  sprites: [
    {
      imageKey: "AwesomeSprite",       // 元件所对应的位图键名, 如果 imageKey 含有 .vector 后缀，该 sprite 为矢量图层。
      matteKey: "AwesomeSprite",       // 被遮罩图层的 matteKey 对应的是其遮罩图层的 imageKey.
      frames: [
        {
          alpha: 1.0,          // 元件透明度
          layout: {
            x: 0,
            y: 0,
            width: 100,
            height: 100
          },               // 元件初始约束大小
          transform: {
            a: 1.0,
            b: 0.0,
            c: 0.0,
            d: 1.0,
            tx: 0.0,
            ty: 0.0
          },               // 元件变化矩阵，3 * 3 矩阵中的具体含义，参照 CSS transform。
          clipPath: "",        // 遮罩路径，使用 SVG 标准 Path 绘制图案进行 Mask 遮罩。
          shapes: [
            {
              type: enum("shape", "rect", "ellipse", "keep"),  // 矢量类型
              args: {},                    // 矢量参数 [附1]
              styles: {
                fill: [0.0, 0.0, 0.0, 1.0],          // 填充色, RGBA
                stroke: [0.0, 0.0, 0.0, 1.0],        // 描边色, RGBA
                strokeWidth: 0,                // 描边宽
                lineCap: enum("butt", "round", "square"),  // 线段端点样式
                lineJoin: enum("miter", "round", "bevel"),   // 线段连接样式
                miterLimit: 0,                 // 尖角限制
                lineDash: [0.0, 0.0, 0.0]          // 虚线参数, dash,gap,offset
              },
              transform: {
                a: 1.0,
                b: 0.0,
                c: 0.0,
                d: 1.0,
                tx: 0.0,
                ty: 0.0
              }
            }
          ]              // 矢量路径，使用 SVG 标准 Path 绘制图案，如果 shapes[0].type == "KEEP" 时，则使用上一帖进行绘制。
        }
      ]                  // 元件在每一帖中的表现，对于某一帖中隐藏的元件，也需要使用一个对象进行占位。
    }
  ]                      // 元件列表，在数组中索引值越大，代表层级越高。
}

类型参考

• "1.0.0" = String
• 1.0 = Double
• 1 = Int
• true = Boolean

附1, 矢量参数

shape

{
  d: "M 0 0 C 0 0 0 0 0"            // SVG Path
}

rect

{
  x: 0.0,                   // x
  y: 0.0,                   // y
  width: 0.0,                 // 宽
  height: 0.0,                // 高
  cornerRadius: 0.0               // 圆角大小
}

ellipse

{
  x: 0.0,                   // 圆中心点 X
  y: 0.0,                   // 圆中心点 Y
  radiusX: 0.0                // 圆半径
  radiusY: 0.0                // 圆半径
}

项目地址：https://github.com/svga/SVGA-Format