SVGA 設計使用指南

SVGA 提供了 AE 和 An 源文件導出 .svga 的插件，
方便設計師一鍵導出 .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 動畫沒有影響。

圖層

每建立一個圖層，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 值能夠比白色更明亮。

AE中的8bpc、16bpc、32bpc

路徑

修剪路徑

路徑修剪(TrimPath) 是一種矢量動效樣式。
它一共有三個相關的屬性：

trimPathStart,
trimPathEnd,
trimPathOffset，
複製代碼

它們分別表示 Path 從哪裏開始，到哪裏結束，距離起點多遠。
在 AE 形狀圖層中能夠添加：

可添加在形狀(Shape)屬性中，也能夠添加在 Shape 以外對多個 Shape 形成影響：

** 注意：** SVGA 中如今還未支持外層修剪，
也不支持 trimPathOffset，
將在接下來的版本中完善。

文本

SVGA 中不支持文本導出，
能夠將靜態的 Text 渲染成 PNG，
將有動效文本圖層轉換爲形狀圖層使用：

偶爾轉換的圖層會有問題，
不過轉換是 AE 黑盒處理的，

咱也不知道咱也不敢問...

SVGA 中的動畫屬性

動效使用和展現

動畫隨時間而變化。
在 AE 中設計師經過使圖層或圖層上效果的一個或多個屬性隨時間變化，
來建立動畫效果。

關鍵幀

關鍵幀用於設置動做、效果、音頻以及許多其餘屬性的參數，
使這些參數隨時間變化。

屬性動畫

屬性包括了縮放、旋轉、位移、透明度、顏色等等，
只要右側屬性面板中帶小菱形標誌，
都概括到了這一類型中。

SVGA 支持屬性動畫的關鍵幀定製炫酷的效果，
這也是 SVGA 核心的動畫能力。

** 注意：** 動畫的屬性，好比形狀的透明度之類的，
最好直接設置在元素上，不要越級使用，
不然可能會合並異常。

最後

導出

• 打開插件

  

• 點擊 選擇位置 選擇 SVGA 文件生成位置 ** 注意：**這裏能夠同時選擇多個合成導出。

• 點擊 開始轉換，SVGA 文件就會生成在對應目錄。

• 右上角設置中能夠切換 SVGA 版本、選擇導出時長。

特性總覽

AE 除了上面提到的衆多屬性動效，還支持使用不少特性，
SVGA 如今正在逐步完善中，
一下是特性總覽表，
會逐步更新。
AE 特性表

FAQ

爲何 SVGA 總是導出失敗。。。

友情連接

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