阅读 188

[译] Core Animation 编程指南 - 附录A:图层样式属性动画

渲染过程期间,Core Animation 采用图层的不同属性,并以特定顺序渲染它们。该顺序决定图层最终的展示样式。本章说明了通过设置不同的图层样式属性获得的渲染结果。

注意:图层的样式属性在 Mac OS X 和 iOS 上是不同的,本章都有说明。

几何属性

图层的几何属性指定了它如何在它的父图层上显示。几何属性也指定了图层的圆角半径,应用在图层及子图层上的形变。图 A-1 展示了示例图层的边界形状。

图 A-1 图层几何图形

下面的 CALayer 属性制定了图层的几何图形:

  • bounds
  • position
  • frame (通过 bounds 和 position 计算得来,它不可动画)
  • anchorPoint
  • cornerRadius
  • transform
  • zPosition

iOS 注意:cornerRadius 属性仅在 iOS 3.0 及以后版本可用。

背景属性

Core Animation 渲染的第一件事就是图层的背景。你可以给背景指定颜色。在 OS X 上,你也可以给背景内容指定你想应用的 Core Image 过滤器。图 A-2 展示了一个图层的两个版本。左边图层设置了 backgroundColor 属性;右边图层没有设置 backgroundColor 属性,但它有内容和边框,和赋值给 backgroundFilters 属性的收缩失真滤波器。

图 A-2 有背景色的图层

背景过滤器应用于图层后面的内容,该内容主要由父图层的内容组成。你可以使用背景滤镜来突出前景层内容;例如,通过应用模糊过滤器。

下面的 CALayer 属性影响图层的背景展示:

  • backgroundColor
  • backgroundFilters (不支持 iOS)

平台说明:在 iOS 上,CALayer 类有 backgroundFilters 属性的接口,但你给该属性赋的值会被忽略。

图层内容

如果图层有任何内容,该内容将在背景色上面渲染。你可以通过以下方式提供图层内容:

  • 直接设置位图
  • 使用 delegate 指定内容
  • 子类化图层直接绘制图层内容

你可以使用很多不同的绘制技术(包括 Quartz, Metal, OpenGL, 和 Quartz Composer)来提供内容。图 A-3 展示了通过直接设置位图来展示内容的图层。位图内容由一个大部分透明的空间组成,自动机图标位于右下角。

图 A-3 图层显示位图图像
图层的圆角半径不会自动剪切它们的内容;但将图层的 masksToBounds 属性设置为 YES 会导致图层剪切它的圆角。

下面 CALayer 的属性影响图层内容的显示:

  • contents
  • contentsGravity
  • masksToBounds

子图层内容

任何图层可能包含一个或者多个孩子图层(child layer),称为子图层(sublayers)。子图层递归渲染,并相对于父图层的边界矩形定位。另外, Core Animation 会将父图层的 sublayerTransform 应用到每一个和父图层锚点相关的子图层。你可以使用子图层变换将透视和其他效果均等地应用到所有图层。图 A-4 展示了有两个子图层的示例图层。左边的版本包含背景色,右边的则不包含。

图 A-4 显示子图层内容的图层
将图层的 masksToBounds 属性设置为 YES ,会造成超出图层边界的所有子图层内容被裁减。

CALayer 下面的属性影响图层的子图层内容显示:

  • sublayers
  • masksToBounds
  • sublayerTransform

边界线属性

图层使用指定的颜色和宽度显示一个可选边界线。边框遵循图层的边界矩形,并且会考虑任何圆角半径。图 A-5 展示了显示边界线的示例图层。注意图层边界线以外的内容和子图层,被渲染在边界线的下面。

图 A-5 显示边界线的图层

CALayer 下面的属性影响图层的边界线显示:

  • borderColor
  • borderWidth

平台说明: borderColor 和 borderWidth 属性仅在 iOS 3.0 及以后版本可用。

过滤器属性

在 OS X,你可以给图层内容应用一个或多个过滤器,也可以使用自定义的合成过滤器去指定图层内容如何和它底部图层的内容混合。图 A-6 展示了应用 Core Image 后置过滤器的示例图层。

图 A-6 显示过滤器的图层

CALayer 下面的属性指定图层内容过滤器:

  • filters
  • compositingFilter

平台说明: 在 iOS, 图层会忽略你赋值的任意过滤器。

阴影属性

图层可显示阴影效果,并且可以配置它们的形状、不透明度、颜色、偏移量和模糊半径。如果你没有指定自定义阴影形状,那阴影会基于图层中不完全透明的部分绘制。图 A-7 展示了同一应用红色阴影的示例图层的几个不同版本。左边和中间的图层有背景色,所以阴影只出现在边界线附近。而右边的图层没有背景色,在这种情况下,阴影会应用到图层的内容,边界线和子图层上。

图 A-7 显示阴影属性的图层

CALayer 下面的属性影响图层阴影的显示:

  • shadowColor
  • shadowOffset
  • shadowOpacity
  • shadowRadius
  • shadowPath

平台说明: shadowColor, shadowOffset, shadowOpacity, 和 shadowRadius 属性仅在 iOS 3.0 及以后版本可用。 shadowPath 属性支持 iOS 3.2 及以后版本;OS X v10.7 及以后版本。

不透明属性

图层的不透明度属性决定了通过图层显示多少背景内容。图 A-8 展示了不透明度设置为 0.5 的示例图层。这允许背景图像的一部分显示出来。

图 A-8 包含不透明属性的图层

CALayer 下面的属性指定图层的不透明度:

  • opacity

遮罩属性

你可以使用遮罩来隐藏图层的全部或部分内容。遮罩本身就是一个图层对象,其 alpha 通道用于确定哪些被阻止,哪些被传输。遮罩层内容的不透明部分允许下面的图层内容透过,而透明部分部分或完全遮蔽下面的内容。图 A-9 展示了一个示例图层,它由一个遮罩层和两个不同的背景组成。在左侧版本中,图层的不透明度设置为1.0。在右边的版本中,图层的不透明度被设置为0.5,这增加了通过图层的遮罩部分传输的背景内容的数量。

图 A-9 与遮罩属性结合的图层

CALayer 下面的属性指定图层的遮罩:

  • mask

平台说明: mask 属性仅在 iOS 3.0 及以后版本可用。

关注下面的标签,发现更多相似文章
评论