剛開始學習AE的小夥伴，可能會遇到各種各樣的圖層，讓人傻傻分不清，好似回到了多年前學習PS的年代。

形狀圖層（Shape Layer）是UI設計師最需要掌握也是最實用的一種圖層類型，它可以滿足一般矢量圖形從創建到設置動畫的大部分需求。

AE圖層界面

Shape Layer圖層和大多數圖層類型一樣，具有 Anchor Point（中心點）、Position（移動）、Rotation（旋轉）、 Scale( 縮放 ) 和 Opacity（不透明度）等基本屬性，并且可以對以上的任何一個屬性進行動畫的設置。

但真正明白了形狀圖層的原理後，操作起來是非常簡單的，下面就讓我們來學習一下，形狀圖層的運用方法。

如何創建Shape Layer

這裡給大家介紹創建Shape Layer常用的4種方式。

第1種方式：打開After Effects，在頂部菜單欄中執行“Layer”（圖層）>“New”（新建）>“Shape Layer”（形狀圖層）命令，完成創建，如圖所示。

執行“Layer”>“New”> “Shape Layer”命令

第2種方式：用鼠标右擊After Effects編輯區的空白區域，激活彈窗，執行“New”（新建）> “ShapeLayer”（形狀圖層）命令，完成創建，如圖所示。

執行“New”>“Shape Layer”命令

第3種方式：在未選中任何圖層的情況下，使用“鋼筆工具” 勾勒出任意一個路徑，會自動生成一個Shape Layer圖層。

TIPS：在此種操作中，如果先選中某個圖層之後再使用“鋼筆工具” 勾勒路徑的話，After Effects會默認在選中的圖層中創建Mask蒙版圖層，請大家注意。

第4種方式：在未選中任何圖層的情況下，使用“幾何圖形工具” 繪制出一個基本幾何圖形，會自動生成一個Shape Layer圖層，如圖所示。

Shape Layer圖層

TIPS：一個Shape Layer下面可以連續創建多個路徑圖形，且基礎圖形和鋼筆路徑圖形皆可。

Contents屬性的使用

有關Shape Layer 的Contents屬性是UI設計師需要重點關注的，因為常見的扁平化UI動效大部分是通過這些屬性來實現的。

在創建好Shape Layer圖層之後，激活該圖層的下拉箭頭，會看到一個有關“Contents”（内容）的字符，而在該字符的右邊會看到一個Add（增加）的擴展箭頭，這就是Contents屬性命令的隐藏面闆，單擊該箭頭後的效果如圖所示。

Shape Layer圖層的下拉選項

1. 如何給蒙版添加Contents屬性

單擊Contents字符右側的Add（增加）擴展箭頭，在下拉菜單中選擇“Rectangle”（矩形）選項 ,之後單擊“完成添加”選項，添加完成之後該屬性會在Contents中顯示出來，如圖所示。

添加“Rectangle”屬性

2. Contents屬性堆棧

針對Contents屬性，如果單獨使用，隻能算是一些單獨的小命令，不足為奇。但是，如果将多個屬性配合使用，你會發現很多效果其實是可以多元化表現的，而這便是Shape Layer的魅力所在，如圖所示。

Contents屬性堆棧

接下來為大家講解多個Contents屬性疊加堆棧的使用方法。

（1）圖形創建小分隊

首先，創建一個空白的Shape Layer圖層，然後使用Contents屬性中的Rectangle（矩形）功能創建一個矩形，此時該矩形是沒有任何顔色填充的，如圖所示。

Rectangle（矩形）功能

然後，利用Ellipse（橢圓形）、Polystar（星形）和 Path（自定義用鋼筆去畫）屬性功能分别繪制一個圓形、星形和自定義圖形，由此與上一步繪制出的矩形組建整個Contents屬性的圖形小分隊，如圖所示。

創建 Contents 屬性的圖形小分隊

最後，針對其他的圖形路徑命令做一下介紹：

Rectangle：矩形。

Size：矩形尺寸。

Position：矩形位移。

Roundness：矩形圓角。

Ellipse：橢圓形。

Size：橢圓尺寸。

Position：橢圓位移。

Polystar：星形。

Type：星形（其中Star/ Polygon是可選擇的具體星形類型）。

Points：星形頂點數。

Position：星形位移參數。

Rotation：星形旋轉參數。

Outer Radius：星形外部半徑。

Inner Radius：星形内部半徑。

Inner Roundness：星形内部圓角。

Outer Roundness：星形外部圓角。

Path：路徑（單擊之後會全部選中自定義創建的路徑錨點）。

（2）填充上色小分隊

當根據需要創建出想要的圖形路徑之後，我們需要對圖形進行填充上色。這裡将針對Contents屬性下的填充上色小分隊做一下介紹。在具體的UI動效制作中，可以根據實際需要使用不同的命令填充上你想要的顔色或者描邊。

實際操作中，我們常會用到Fill（純色填充）、Stroke（描邊）、GradientFill（漸變填充）和Gradient Stroke（漸變描邊）這幾個填充上色命令，這裡依次進行效果展示，如圖所示。

填充上色小分隊

疑難問答：關于Composite合成選項

在 該 選 項 中 有 兩 個 參 數 可 供 選 擇，Above Previous in SameGroup( 同 組 内 前 層 顯 示 )和Below Previous in Same Group( 同組内後層顯示 )，主要用來判斷當有兩個或者兩個以上的填充屬性被使用時填充屬性之間的前後顯示關系。

下面我們來舉個例子。

圖中的4個圖形被賦予了一個紅色的Fill（純色填充）和一個GradientStroke（漸變描邊）效果，由于這裡為Gradient Stroke（漸變描邊）選擇的是“Above Previous in Same Group( 同組内前層顯示 )”命令，為 Fill（純色填充）選擇的是“Below Previous in Same Group” ( 同組内後層顯示 )命令，因此在圖中可以看到其填充的關系是“漸變描邊”在“純色填充”的前面顯示，且描邊蓋住了紅色的填充效果。

“漸變描邊”在“純色填充”的前面顯示

接下來，把上邊的命令屬性反過來進行選擇，即把紅色的Fill（純色填充）調整到前層顯示，Gradient Stroke（漸變描邊）調整到後層顯示，圖形效果則會存在較明顯的差别，如圖所示。

“漸變描邊”在“純色填充”的後面顯示

下面針對其他的填充上色命令做一下介紹：

Stroke（描邊）參數介紹

Composite：合成選項。

Color：顔色選擇器。

Opacity：不透明度。

Stroke Width：描邊寬度。

Line Cap：線帽（此操作必須在下面的 Dashes 選項激活時才能看到效果）。

Line Join：線段類型（圓角 / 導角 / 尖角 ）。

Miter Limit：角限制設置。

Dashes：調節描邊的虛線效果（包含段數 / 位移）。

Gradient Fill（漸變填充）參數介紹

Fill Rule/Even-odd：奇偶規則。

non-zero winding rule：非零環繞規則。

Composite：合成選項。

Type：漸變方式（線性漸變 / 環狀漸變）。

Start Point：漸變開始的位置。

End Point：漸變結束的位置。

Color：顔色選擇器。

Opacity：不透明度。

Gradient Stroke（漸變描邊）參數介紹

Composite：合成選項。

Type：漸變方式（含有線性漸變 / 環狀漸變）。

Start Point：漸變開始的位置。

End Point：漸變結束的位置。

Color：顔色選擇器。

Opacity：不透明度。

Stroke Width：描邊寬度。

Line Cap：線帽（此效果必須在下面的Dashes選項激活時才能看到效果）。

Line Join：線段類型（圓角 / 導角 / 尖角）。

Miter Limit：角限制設置。

Dashes：調節描邊的虛線效果（含有段數 、位移兩種）。

（3）路徑效果小分隊

當根據需要創建出了想要的圖形路徑，并填充了合适的顔色和描邊之後，接下來給這些圖形添加動态效果。這裡就要使用到 Contents 屬性的“路徑效果小分隊”了。在這個小分隊裡，有各種各樣的動态效果可供設置，下面一一為大家進行介紹。

Merge Path（路徑融合）：該命令類似于路徑的布爾運算，它的主要作用是可以将一個Shape Layer下的若幹個圖形進行交叉并集的計算，效果如圖所示。

Merge Path（路徑融合）

TIPS：Merge Path命令不同于布爾運算命令的是，布爾運算是針對Mask圖層操作的，而Merge Path命令是針對Shape Layer圖層操作的。

Offset Path（路徑偏移） ：該命令主要負責把圖形路徑進行膨脹或收縮的偏移處理，同時調節圓角，如圖所示。

Offset Path（路徑偏移）

具體參數說明

Amount ：數值（正數為向外膨脹，負數為向内收縮）。

Line Join：線段類型（圓角 / 導角 / 尖角 ）。

Miter Limit：角限制設置。

Pucker / Bloat（褶皺 / 膨脹）：該命令主要用來創建圖形有規律的褶皺和膨脹效果，如圖所示。其中，Amount數值為正數， 則中心向外膨脹；Amount數值為負數， 則中心向内收縮。

Pucker / Bloat（褶皺 / 膨脹）

Repeater（重複）：該命令主要用來創建圖形的重複效果，并可以對重複圖形的個數、旋轉和縮放等參數進行設置。圖所示是使用了一個圓環路徑并賦予Repeater屬性之後的效果。

Repeater（重複）

具體參數說明

Copies：重複的個數。

Offset：偏移值。

Composite：合成選項。

Transform：變換參數。

Anchor Point：中心點。

Position：位移。

Scale：縮放。

Rotation：旋轉。

Start Opacity：開始時的透明參數。

End Opacity：結束時的透明參數。

Round Corners（圓角）：該命令主要負責創建圖形的圓角效果，如圖所示。其中，Radius（圓角值）數值越大，圓角效果越明顯，反之亦然。

Round Corners （圓角）

Trim Paths（修剪路徑）：該命令主要用來創建比較常用的路徑運動效果，對于ICON動效的制作來說非常實用，如圖所示。

Trim Paths（修剪路徑）

具體參數說明

Start：路徑開始時的位置。

End：路徑結束時的位置。

Offset：偏移值。

Trim Multiple Shapes：多圖形修剪時的參數設置。

Individually：獨立類型（指如果有多個路徑在同一個Shape Laye圖層中，選擇此命令則會使裡面涉及的多個路徑動畫依次完成運動，而不是若幹個路徑動畫同時完成運動）。

Simultaneously：同期類型（與Individually類型相反，在同一個Shape Layer圖層中，若選擇此命令則會使所有的路徑動畫同時進行運動）。

Twist ( 扭曲）：該命令主要用來創建路徑的扭曲變形效果，如圖所示。

Twist ( 扭曲）

具體參數說明

Angle：扭曲角度。

Center：扭曲中心位置。

Wiggle Paths（路徑抖動）：該命令主要用來創建路徑抖動或電波變形的效果，如圖所示。

Wiggle Paths（路徑抖動）

具體參數說明

Size：尺寸。

Detail：細節參數。

Points：頂點類型（尖銳 / 圓滑 ）。

Wiggles/Second：每秒抖動的次數。

Correlation：抖動段數值。

Temporal Phase：時間相位值。

Spatial Phase：空間相位值。

Random Seed：随機值。

Wiggle Transform（路徑變換抖動）：該命令與Wiggle Paths命令相似，兩者不同之處在于Wiggle Paths是控制單個路徑的抖動效果，路徑本身會發生變形。而Wiggle Transform更像是控制該Shape Layer圖層的空間抖動效果，單個路徑本身不會發生抖動變形，如圖所示。

Wiggle Transform（路徑變換抖動）

其具體參數配置與Wiggle Paths相同，隻是在此基礎上增加了Anchor Point ( 中心點 )、Position( 位移 )、Scale（縮放）和 Rotation（旋轉）等參數。

Zig Zag ( 路徑波折 ) ：該命令主要用來創建類似均勻的波峰、波谷的路徑效果，如圖所示。

Zig Zag ( 路徑波折 )

具體參數說明

Size：尺寸。

Ridges Per Segment：突起段數。

Points：頂點類型（尖銳 / 圓滑 ）。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!