刚开始学习AE的小伙伴，可能会遇到各种各样的图层，让人傻傻分不清，好似回到了多年前学习PS的年代。
形状图层（ShapeLayer）是UI设计师最需要掌握也是最实用的一种图层类型，它可以满足一般矢量图形从创建到设置动画的大部分需求。
AE图层界面
ShapeLayer图层和大多数图层类型一样，具有AnchorPoint（中心点）、Position（移动）、Rotation（旋转）、Scale(缩放)和Opacity（不透明度）等基本属性，并且可以对以上的任何一个属性进行动画的设置。
但真正明白了形状图层的原理后，操作起来是非常简单的，下面就让我们来学习一下，形状图层的运用方法。
如何创建ShapeLayer
这里给大家介绍创建ShapeLayer常用的4种方式。
第1种方式：打开AfterEffects，在顶部菜单栏中执行“Layer”（图层）>“New”（新建）>“ShapeLayer”（形状图层）命令，完成创建，如图所示。
执行“Layer”>“New”>“ShapeLayer”命令
第2种方式：用鼠标右击AfterEffects编辑区的空白区域，激活弹窗，执行“New”（新建）>“ShapeLayer”（形状图层）命令，完成创建，如图所示。
执行“New”>“ShapeLayer”命令
第3种方式：在未选中任何图层的情况下，使用“钢笔工具”勾勒出任意一个路径，会自动生成一个ShapeLayer图层。
TIPS：在此种操作中，如果先选中某个图层之后再使用“钢笔工具”勾勒路径的话，AfterEffects会默认在选中的图层中创建Mask蒙版图层，请大家注意。
第4种方式：在未选中任何图层的情况下，使用“几何图形工具”绘制出一个基本几何图形，会自动生成一个ShapeLayer图层，如图所示。
ShapeLayer图层
TIPS：一个ShapeLayer下面可以连续创建多个路径图形，且基础图形和钢笔路径图形皆可。
Contents属性的使用
在创建好ShapeLayer图层之后，激活该图层的下拉箭头，会看到一个有关“Contents”（内容）的字符，而在该字符的右边会看到一个Add（增加）的扩展箭头，这就是Contents属性命令的隐藏面板，单击该箭头后的效果如图所示。
ShapeLayer图层的下拉选项
1.如何给蒙版添加Contents属性
单击Contents字符右侧的Add（增加）扩展箭头，在下拉菜单中选择“Rectangle”（矩形）选项,之后单击“完成添加”选项，添加完成之后该属性会在Contents中显示出来，如图所示。
添加“Rectangle”属性
2.Contents属性堆栈
针对Contents属性，如果单独使用，只能算是一些单独的小命令，不足为奇。但是，如果将多个属性配合使用，你会发现很多效果其实是可以多元化表现的，而这便是ShapeLayer的魅力所在，如图所示。
Contents属性堆栈
接下来为大家讲解多个Contents属性叠加堆栈的使用方法。
（1）图形创建小分队
首先，创建一个空白的ShapeLayer图层，然后使用Contents属性中的Rectangle（矩形）功能创建一个矩形，此时该矩形是没有任何颜色填充的，如图所示。
Rectangle（矩形）功能
然后，利用Ellipse（椭圆形）、Polystar（星形）和Path（自定义用钢笔去画）属性功能分别绘制一个圆形、星形和自定义图形，由此与上一步绘制出的矩形组建整个Contents属性的图形小分队，如图所示。
创建Contents属性的图形小分队
最后，针对其他的图形路径命令做一下介绍：
Rectangle：矩形。
Size：矩形尺寸。
Position：矩形位移。
Roundness：矩形圆角。
Ellipse：椭圆形。
Size：椭圆尺寸。
Position：椭圆位移。
Polystar：星形。
Type：星形（其中Star/Polygon是可选择的具体星形类型）。
Points：星形顶点数。
Position：星形位移参数。
Rotation：星形旋转参数。
OuterRadius：星形外部半径。
InnerRadius：星形内部半径。
InnerRoundness：星形内部圆角。
OuterRoundness：星形外部圆角。
Path：路径（单击之后会全部选中自定义创建的路径锚点）。
（2）填充上色小分队
当根据需要创建出想要的图形路径之后，我们需要对图形进行填充上色。这里将针对Contents属性下的填充上色小分队做一下介绍。在具体的UI动效制作中，可以根据实际需要使用不同的命令填充上你想要的颜色或者描边。
实际操作中，我们常会用到Fill（纯色填充）、Stroke（描边）、GradientFill（渐变填充）和GradientStroke（渐变描边）这几个填充上色命令，这里依次进行效果展示，如图所示。
填充上色小分队
疑难问答：关于Composite合成选项
在该选项中有两个参数可供选择，AbovePreviousinSameGroup(同组内前层显示)和BelowPreviousinSameGroup(同组内后层显示)，主要用来判断当有两个或者两个以上的填充属性被使用时填充属性之间的前后显示关系。
下面我们来举个例子。
图中的4个图形被赋予了一个红色的Fill（纯色填充）和一个GradientStroke（渐变描边）效果，由于这里为GradientStroke（渐变描边）选择的是“AbovePreviousinSameGroup(同组内前层显示)”命令，为Fill（纯色填充）选择的是“BelowPreviousinSameGroup”(同组内后层显示)命令，因此在图中可以看到其填充的关系是“渐变描边”在“纯色填充”的前面显示，且描边盖住了红色的填充效果。
“渐变描边”在“纯色填充”的前面显示
接下来，把上边的命令属性反过来进行选择，即把红色的Fill（纯色填充）调整到前层显示，GradientStroke（渐变描边）调整到后层显示，图形效果则会存在较明显的差别，如图所示。
“渐变描边”在“纯色填充”的后面显示
下面针对其他的填充上色命令做一下介绍：
Stroke（描边）参数介绍
Composite：合成选项。
Color：颜色选择器。
Opacity：不透明度。
StrokeWidth：描边宽度。
LineCap：线帽（此操作必须在下面的Dashes选项激活时才能看到效果）。
LineJoin：线段类型（圆角/导角/尖角）。
MiterLimit：角限制设置。
Dashes：调节描边的虚线效果（包含段数/位移）。
GradientFill（渐变填充）参数介绍
FillRule/Even-odd：奇偶规则。
non-zerowindingrule：非零环绕规则。
Type：渐变方式（线性渐变/环状渐变）。
StartPoint：渐变开始的位置。
EndPoint：渐变结束的位置。
GradientStroke（渐变描边）参数介绍
Type：渐变方式（含有线性渐变/环状渐变）。
LineCap：线帽（此效果必须在下面的Dashes选项激活时才能看到效果）。
Dashes：调节描边的虚线效果（含有段数、位移两种）。
（3）路径效果小分队
当根据需要创建出了想要的图形路径，并填充了合适的颜色和描边之后，接下来给这些图形添加动态效果。这里就要使用到Contents属性的“路径效果小分队”了。在这个小分队里，有各种各样的动态效果可供设置，下面一一为大家进行介绍。
MergePath（路径融合）：该命令类似于路径的布尔运算，它的主要作用是可以将一个ShapeLayer下的若干个图形进行交叉并集的计算，效果如图所示。
MergePath（路径融合）
TIPS：MergePath命令不同于布尔运算命令的是，布尔运算是针对Mask图层操作的，而MergePath命令是针对ShapeLayer图层操作的。
OffsetPath（路径偏移）：该命令主要负责把图形路径进行膨胀或收缩的偏移处理，同时调节圆角，如图所示。
OffsetPath（路径偏移）
具体参数说明
Amount：数值（正数为向外膨胀，负数为向内收缩）。
Pucker/Bloat（褶皱/膨胀）：该命令主要用来创建图形有规律的褶皱和膨胀效果，如图所示。其中，Amount数值为正数，则中心向外膨胀；Amount数值为负数，则中心向内收缩。
Pucker/Bloat（褶皱/膨胀）
Repeater（重复）：该命令主要用来创建图形的重复效果，并可以对重复图形的个数、旋转和缩放等参数进行设置。图所示是使用了一个圆环路径并赋予Repeater属性之后的效果。
Repeater（重复）
Copies：重复的个数。
Offset：偏移值。
Transform：变换参数。
AnchorPoint：中心点。
Position：位移。
Scale：缩放。
Rotation：旋转。
StartOpacity：开始时的透明参数。
EndOpacity：结束时的透明参数。
RoundCorners（圆角）：该命令主要负责创建图形的圆角效果，如图所示。其中，Radius（圆角值）数值越大，圆角效果越明显，反之亦然。
RoundCorners（圆角）
TrimPaths（修剪路径）：该命令主要用来创建比较常用的路径运动效果，对于ICON动效的制作来说非常实用，如图所示。
TrimPaths（修剪路径）
Start：路径开始时的位置。
End：路径结束时的位置。
TrimMultipleShapes：多图形修剪时的参数设置。
Individually：独立类型（指如果有多个路径在同一个ShapeLaye图层中，选择此命令则会使里面涉及的多个路径动画依次完成运动，而不是若干个路径动画同时完成运动）。
Simultaneously：同期类型（与Individually类型相反，在同一个ShapeLayer图层中，若选择此命令则会使所有的路径动画同时进行运动）。
Twist(扭曲）：该命令主要用来创建路径的扭曲变形效果，如图所示。
Twist(扭曲）
Angle：扭曲角度。
Center：扭曲中心位置。
WigglePaths（路径抖动）：该命令主要用来创建路径抖动或电波变形的效果，如图所示。
WigglePaths（路径抖动）
Size：尺寸。
Detail：细节参数。
Points：顶点类型（尖锐/圆滑）。
Wiggles/Second：每秒抖动的次数。
Correlation：抖动段数值。
SpatialPhase：空间相位值。
RandomSeed：随机值。
WiggleTransform（路径变换抖动）：该命令与WigglePaths命令相似，两者不同之处在于WigglePaths是控制单个路径的抖动效果，路径本身会发生变形。而WiggleTransform更像是控制该ShapeLayer图层的空间抖动效果，单个路径本身不会发生抖动变形，如图所示。
WiggleTransform（路径变换抖动）
其具体参数配置与WigglePaths相同，只是在此基础上增加了AnchorPoint(中心点)、Position(位移)、Scale（缩放）和Rotation（旋转）等参数。
ZigZag(路径波折)：该命令主要用来创建类似均匀的波峰、波谷的路径效果，如图所示。
ZigZag(路径波折)
RidgesPerSegment：突起段数。
更多内容可以购买《UI动效大爆炸—AfterEffects移动UI动效制作学习手册》详细阅读哦！