CALayer：什么是它，关键概念与层渲染

什么是CALayer？

CALayer — 是来自QuartzCore框架的一个类，管理屏幕矩形区域的恶图像。它存储视觉属性：frame、backgroundColor、opacity、shadow、border、transform。与UIView不同，CALayer不处理触摸事件，不参与AutoLayout，也没有view controller的生命周期。

从架构上看，CALayer在CoreAnimation上下文中实现了Model模式。层存储视觉属性的状态，而CoreAnimation管理动画过程中状态之间的插值。这种分离允许对层的任何属性进行动画，而无需通过drawRect重绘内容。

根据Apple WWDC 2024，CALayer已重写以通过Metal工作。现代渲染管道包括三个阶段：Commit（在CPU上更新属性）、Render（在CPU上生成GPU指令）和Composite（在GPU上执行指令）。CALayer参与所有三个阶段，为每个阶段提供数据。

每层可以包含sublayers — 在父层上方渲染的子层。层的层次结构重复UIView的层次结构，但可以独立存在。开发者可以通过CALayer()创建独立于UIView的层，并通过addSublayer将其添加到层次结构中。

CALayer和UIView之间的区别

UIView — 是CALayer上方的一层封装，添加了：通过UIResponder处理触摸、参与AutoLayout、在storyboard中的表示、与UIViewController的集成。CALayer — 是一个可以在没有UIView的情况下用于纯视觉元素的轻量级对象。

在实践中，这意味着如果元素不需要触摸和布局，可以将其实现为CALayer。例如，背景动画、加载指示器、装饰元素 — 所有这些通过CALayer实现更高效，避免了UIView的开销。

CALayer的基本属性

基本属性包括框架、定位、显示和视觉效果。frame定义层在父级坐标中的矩形区域，bounds定义内部坐标，position定义层的中心。Position的变化默认通过implicit animation动画。

• backgroundColor — 层的背景颜色（CGColor）。设置不透明颜色和opaque = true可消除通道混合。
• cornerRadius — 圆角。硬件处理，无需额外的渲染步骤。
• borderWidth和borderColor — 层的边框。在GPU上渲染，不需要drawRect。
• shadowOffset、shadowRadius、shadowOpacity、shadowPath — 阴影。明确的shadowPath可显著加快渲染。
• opacity — 层的不透明度，从0.0到1.0。可在不调用drawRect的情况下动画。
• transform — 用于2D和3D变换的CATransform3D。支持透视变形。

contents属性允许直接设置层的恶图内容 — 通过CGImage或CIImage。这是通过drawRect绘图的替代方案：如果图像已经准备好，可以将其传递给contents，CoreAnimation将在无额外处理的情况下渲染它。

动画使用CABasicAnimation、CAKeyframeAnimation和CATransition。所有这些类都通过CALayer属性的键路径工作，这使得几乎任何属性 — 从position到transform.rotation.z — 都可以动画。

CALayer子类及其用途

Apple提供了多个专门的CALayer子类，每个解决特定问题。选择合适的子类而非基础CALayer可以通过硬件加速带来显著的性能提升。

• CAShapeLayer — 在GPU上绘制向量形状（CGPath）。不需要单独的缓冲区 — 形状作为父层合成的一部分进行渲染。
• CATextLayer — 带亚像素穌齿消除的文本渲染。缓存字形，加速重复文本的显示。
• CAGradientLayer — 线性和放射渐变。硬件渲染，无需生成中间图像。
• CAEmitterLayer — GPU上的粒子系统。每个粒子作为独立元素渲染，无需CPU参与。
• CAReplicatorLayer — 自动创建子层的副本，可配置位置、颜色和时间偏移。
• CATiledLayer — 大图像的磁砖渲染。只加载和显示可见部分。

CAReplicatorLayer对于创建重复模式而无需复制代码尤其有用。例如，由十个点组成的加载指示器通过一个具有instanceCount = 10和动画时间偏移instanceDelay的CAReplicatorLayer实现。

CALayer的渲染与合成

CALayer渲染经过三个阶段。Commit — 当层属性变更时，在CPU上形成变更包。Render — CoreAnimation根据层的属性在CPU上生成Metal指令。Composite — GPU执行指令并在屏幕上显示帧。整个过程与显示器刷新率同步。

在多个层的合成中，GPU将它们组合成最终图像，考虑到透明度、遮罢和混合模式。如果层具有opaque = true，CoreAnimation优化合成：替代通道混合，执行简单的像素替换，这显著更快。

根据Apple Performance Guidelines，延缓CALayer渲染的主要因素有：复杂的sublayers层次结构（屏幕上超过30层）、使用遮罢（mask属性）、没有shadowPath的自动阴影计算、对动态层过度使用shouldRasterize。

XCode中的Core Animation Instrument工具可以监控每个层的渲染时间、离屏缓冲区数量和drawRect调用频率。对60 FPS的最优渲染时间为 — CPU上不超过8毫秒，GOU上不超过8毫秒。

离屏渲染及其影响

离屏渲染 — 层在显示到屏幕之前在中间缓冲区中进行渲染。在使用带内容的cornerRadius + masksToBounds、组opacity、遮罢和shouldRasterize时发生。每次离屏步骤需要2–5毫秒，因此过度的离屏渲染对性能致关重要。

诊断离屏渲染时，使用Core Animation Instrument中的Color Offscreen-Rendered工具。黄色层为离屏渲染，蓝色层为直接渲染到屏幕。最小化离屏步骤是iOS中的关键优化技术。

代码示例：在Swift中使用CALayer

第一个示例展示了CALayer的基本配置，包括创建阴影、圆角和边框。shadowPath已明确设置以加快渲染：

import UIKit

func configureLayer(_ view: UIView) {
    let layer = view.layer
    layer.cornerRadius = 16
    layer.borderWidth = 2
    layer.borderColor = UIColor.systemBlue.cgColor
    layer.backgroundColor = UIColor.white.cgColor

    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOpacity = 0.2
    layer.shadowOffset = CGSize(width: 0, height: 4)
    layer.shadowRadius = 8
    layer.shadowPath = UIBezierPath(
        roundedRect: view.bounds,
        cornerRadius: layer.cornerRadius
    ).cgPath
}

第二个示例 — 通过带有透视3D变换的CABasicAnimation来动画transform。绕Y轴旋转动画创建了翻转卡片的效果：

let flipAnimation = CABasicAnimation(keyPath: "transform")
var transform = CATransform3DIdentity
transform.m34 = -1.0 / 500.0
transform = CATransform3DRotate(transform, .pi, 0, 1, 0)
flipAnimation.toValue = NSValue(caTransform3D: transform)
flipAnimation.duration = 0.8
flipAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
cardLayer.add(flipAnimation, forKey: "flip")

第三个示例 — 使用CAGradientLayer创建背景渐变。渐变在GPU上渲染，在改变尺寸时不需要额外资源：

func addGradient(to view: UIView, colors: [UIColor]) {
    let gradient = CAGradientLayer()
    gradient.colors = colors.map { $0.cgColor }
    gradient.locations = [0.0, 0.5, 1.0]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
    gradient.frame = view.bounds
    view.layer.insertSublayer(gradient, at: 0)
}