SVGA 設計使用指南

flutter-talk發表於2019-07-29
SVG

SVGA 提供了 AE 和 An 原始檔匯出 .svga 的外掛，
方便設計師一鍵匯出 .svga 資原始檔給開發使用，
以下是外掛使用指南。

工作區

時間

SVGA 檔案的動畫時長，一般是由 Item 的工作區時長決定的:

worktime

外掛右上角的設定中可以選擇預設值:

worktimeSetting

如果選擇 以動畫實際時長為準
匯出的動畫時長會等於建立 Item 時設定的時長:

settingtime

這個值隨時可以修改。

**注意: **
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 中設定畫布的尺寸和背景顏色：

canvas

畫布的尺寸對應 SVGA 檔案的 width 和 height,
瀏覽素材的時候可以看到：

svgasize
開發在播放 SVGA 的時候可以對動效進行等比縮放。

SVGA 動畫沒有預設背景色，
所以畫布的背景顏色對 SVGA 動畫沒有影響。

圖層

每建立一個圖層，SVGA 動畫中就會多一個動畫元素，
它們通過圖層名稱和動畫元素中的 imageKey 一一對應。

替換

播放 SVGA 動畫的時候，可以通過 imageKey 動態替換圖層內容。
需要提供給開發的資訊:

  • imageKey
  • 與圖層一樣尺寸的被替換素材

蒙版

圖層可以通過設定蒙版屬性：

mask

控制圖層的 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 檔案的時候務必選擇：

importpsd
合成 -> 合併圖層樣式 -> 確定

合併圖層樣式
合併圖層樣式
合併圖層樣式

重要的話說三遍，
否則會導致素材尺寸或者樣式異常。

向量

向量是一組用來描繪圖形的後設資料，
在 AE 中可以使用：

  • 鋼筆工具
  • 形狀圖形

來繪製，
但它們最終會被導成貝塞爾曲線。

** 注意：**
SVGA 支援匯入 .ai 檔案
.ai 檔案同樣會被導成貝塞爾曲線：

inportai

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 形狀圖層中可以新增：

add-trimpath

可新增在形狀(Shape)屬性中，也可以新增在 Shape 之外對多個 Shape 造成影響：

muti-trimpath-1
** 注意：** SVGA 中現在還未支援外層修剪，
也不支援 trimPathOffset，
將在接下來的版本中完善。

文字

SVGA 中不支援文字匯出，
可以將靜態的 Text 渲染成 PNG，
將有動效文字圖層轉換為形狀圖層使用：

changetext

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

我們也不知道我們也不敢問...

SVGA 中的動畫屬性

動效使用和展示

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

關鍵幀

關鍵幀用於設定動作、效果、音訊以及許多其他屬性的引數，
使這些引數隨時間變化。

屬性動畫

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

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

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

最後

匯出

  • 開啟外掛

    extension

  • 點選 選擇位置 選擇 SVGA 檔案生成位置 ** 注意：**這裡可以同時選擇多個合成匯出。

  • 點選 開始轉換，SVGA 檔案就會生成在對應目錄。

  • 右上角設定中可以切換 SVGA 版本、選擇匯出時長。

特性總覽

AE 除了上面提到的眾多屬性動效，還支援使用很多特性，
SVGA 現在正在逐步完善中，
一下是特性總覽表，
會逐步更新。
AE 特性表

FAQ

為什麼 SVGA 老是匯出失敗。。。

友情連結

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

相關文章