实现动画方式深度解析（十三） —— Core Animation之图层样式属性动画（十）

版本记录

版本号	时间
V1.0	2017.09.23

前言

app中好的炫的动画可以让用户耳目一新，为产品增色不少，关于动画的实现我们可以用基本动画、关键帧动画、序列帧动画以及基于CoreGraphic的动画等等，接下来这几篇我就介绍下我可以想到的几种动画绘制方法。具体Demo示例已开源到Github —— 刀客传奇，感兴趣的可以看我写的另外几篇。
1. 实现动画方式深度解析（一） —— 播放GIF动画（一）
2. 实现动画方式深度解析（二） —— 播放GIF动画之框架FLAnimatedImage的使用（二）
3. 实现动画方式深度解析（三） —— 播放序列帧动画（一）
4. 实现动画方式深度解析（四） —— QuartzCore框架（一）
5. 实现动画方式深度解析（五） —— QuartzCore框架之CoreAnimation（二）
6. 实现动画方式深度解析（六） —— Core Animation Basics（三）
7. 实现动画方式深度解析（七） —— Core Animation之Setting Up Layer Objects（四）
8. 实现动画方式深度解析（八） —— Core Animation之动画层内容 （五）
9. 实现动画方式深度解析（九） —— Core Animation之构建图层层级 （六）
10. 实现动画方式深度解析（十） —— Core Animation之高级动画技巧 （七）
11. 实现动画方式深度解析（十一） —— Core Animation之更改图层的默认行为（八）
12. 实现动画方式深度解析（十二） —— Core Animation之提高动画的性能（九）

Layer Style Property Animations - 图层样式属性动画

在渲染过程中，Core Animation会采用不同的图层属性，并以特定的顺序渲染它们。 此顺序决定层的最终外观。 本章说明了通过设置不同图层样式属性实现的渲染结果。

注意：Mac OS X和iOS上可用的图层样式属性有所不同，并在本章中提到。

---

Geometry Properties - 几何属性

图层的几何属性指定相对于其父层如何显示。 几何还指定了用于图层圆角的半径以及应用于图层及其子图层的变换。 下图示出了示例层的边界矩形。

Layer geometry

以下CALayer属性指定图层的几何图形：

• bounds

• position

• frame (computed from the bounds and position and is not animatable)

• anchorPoint

• cornerRadius

• transform

• zPosition

注意：cornerRadius属性是在iOS 3.0 以后加的。

---

Background Properties - 背景属性

Core Animation渲染的第一件事就是层的背景。 您可以为背景指定颜色。 在OS X中，您还可以指定要应用于背景内容的Core Image过滤器。 下图显示了样品层的两个版本。 左侧的图层具有backgroundColor属性，而右侧的图层没有背景颜色，但是有一些内容和一个夹点失真滤镜分配给其backgroundFilters属性。

Layer with background color

背景过滤器应用于层后面的内容，主要由父层的内容组成。 您可以使用背景过滤器来使前景层内容脱颖而出; 例如，通过应用模糊滤波器。

以下CALayer属性会影响图层背景的显示：

• backgroundColor

• backgroundFilters (not supported in iOS)

平台注意：在iOS中，backgroundFilters属性在CALayer类中公开，但您分配给此属性的过滤器将被忽略。

---

Layer Content - 层的内容

如果图层有任何内容，则该内容将在背景颜色之上呈现。 您可以通过直接设置位图，使用委托来指定内容，或通过对图层进行子类化和直接绘制内容来提供图层内容。 您可以使用许多不同的绘图技术（包括Quartz，Metal，OpenGL和Quartz Composer）来提供该内容。 下图显示了一个示例层，其内容是直接设置的位图。 位图内容由右下角的Automator图标的大部分透明空间组成。

Layer displaying a bitmap image

具有角半径的图层不会自动剪切其内容; 然而，将图层的masksToBounds属性设置为YES会导致图层剪切到其圆角半径。

以下CALayer属性会影响图层内容的显示：

• contents
• contentsGravity
• masksToBounds

---

Sublayers Content - 子图层的内容

任何图层可能包含一个或多个子图层，称为子图层。 子层相对于父层的边界矩形递归呈现并定位。 此外，Core Animation将父层的子层转换应用于相对于父层的锚点的每个子层。 您可以使用子层变换将透视图和其他效果均匀地应用于所有图层。 下图展示出了具有两个子层的样品层。 左侧的版本包括背景颜色，而右侧的版本不包含。

Layer displaying the sublayers content

将图层的masksToBounds属性设置为YES会将任何子图层剪切到图层的边界。

以下CALayer属性会影响图层子图层的显示：

• sublayers
• masksToBounds
• sublayerTransform

---

Border Attributes - 边界特性

图层可以使用指定的颜色和宽度显示可选边框。 边框跟随层的边界矩形，并考虑到任何角半径值。 图A-5显示了应用边框后的样品层。 请注意，层之外的内容和子层被渲染在边框的下方。

Layer displaying the border attributes content

以下CALayer属性会影响图层边框的显示：

• borderColor
• borderWidth

平台注意：borderColor和borderWidth属性仅在iOS 3.0及更高版本中受支持。

---

Filters Property - 过滤器属性

在OS X中，您可以对图层的内容应用一个或多个过滤器，并使用自定义合成过滤器来指定图层的内容如何与其底层的内容混合。 图A-6显示了应用了Core Image后缀滤镜的样品层。

Layer displaying the filters properties

以下CALayer属性指定图层内容过滤器：

• filters
• compositingFilter

平台注意：在iOS中，图层会忽略您分配给它们的任何过滤器。

---

Shadow Properties - 阴影属性

图层可以显示阴影效果并配置其形状，不透明度，颜色，偏移和模糊半径。 如果您没有指定自定义阴影形状，则阴影基于图层中不完全透明的部分。 下图显示了使用红色阴影的相同样品层的几种不同版本。 左和中间版本包括背景颜色，因此阴影仅在图层的边框周围显示。 但是，右侧的版本不包含背景颜色。 在这种情况下，阴影将应用于图层的内容，边框和子图层。

Layer displaying the shadow properties

以下CALayer属性会影响图层阴影的显示：

• shadowColor
• shadowOffset
• shadowOpacity
• shadowRadius
• shadowPath

平台注意：iOS 3.2及更高版本中支持shadowColor，shadowOffset，shadowOpacity和shadowRadius属性。 iOS 3.2及更高版本以及OS X v10.7及更高版本支持shadowPath属性。

---

Opacity Property - 不透明属性

图层的不透明度属性决定了通过图层显示多少背景内容。 下图显示了其不透明度设置为0.5的样品层。 这允许背景图像的部分显示通过。

Layer including the opacity property

以下CALayer属性指定图层的不透明度：

• opacity

---

Mask Properties - 遮罩属性

您可以使用掩码来遮盖图层内容的全部或部分内容。 掩码本身是一个层对象，其alpha通道用于确定被阻止的内容和传输的内容。 掩模层的内容的不透明部分允许下面的层内容显示通过，而透明部分部分或完全遮蔽底层内容。 下图示出了与掩模层和两个不同背景合成的样品层。 在左侧版本中，图层的不透明度设置为1.0。 在右侧的版本中，图层的不透明度设置为0.5，这增加了通过图层的蒙版部分传输的背景内容的数量。

Layer composited with the mask property

以下CALayer属性指定图层的掩码：

• mask

平台注意：iOS 3.0及更高版本支持mask属性。

后记

未完，待续~~~