CALayer: qué es, conceptos clave y renderizado de capas

¿Qué es CALayer?

CALayer es una clase del framework QuartzCore que gestiona una imagen de mapa de bits de un área rectangular de la pantalla. Almacena propiedades visuales: frame, backgroundColor, opacity, shadow, border, transform. A diferencia de UIView, CALayer no maneja eventos táctiles, no participa en Auto Layout y no tiene ciclo de vida de view controller.

Arquitectónicamente, CALayer implementa el patrón Model en el contexto de Core Animation. La capa almacena el estado de las propiedades visuales, mientras que Core Animation gestiona la interpolación entre estados durante la animación. Esta separación permite animar cualquier propiedad de la capa sin necesidad de redibujar el contenido mediante drawRect.

Según Apple WWDC 2024, CALayer fue reescrito para funcionar a través de Metal. El pipeline de renderizado moderno incluye tres etapas: Commit (actualización de propiedades en la CPU), Render (generación de comandos de GPU en la CPU) y Composite (ejecución de comandos en la GPU). CALayer participa en las tres etapas, proporcionando datos para cada una.

Cada capa puede contener sublayers — capas hijas que se renderizan sobre la capa padre. La jerarquía de capas refleja la jerarquía de UIView pero puede existir independientemente de ella. Los desarrolladores pueden crear capas independientemente de UIView mediante CALayer() y añadirlas a la jerarquía a través de addSublayer.

Diferencia entre CALayer y UIView

UIView es un envoltorio sobre CALayer que añade: manejo táctil mediante UIResponder, participación en Auto Layout, representación en storyboard e integración con UIViewController. CALayer es un objeto ligero que puede usarse sin UIView para elementos puramente visuales.

En la práctica, esto significa que si un elemento no necesita manejo táctil ni layout, puede implementarse como CALayer. Por ejemplo, animaciones de fondo, indicadores de carga, elementos decorativos — todo esto es más eficiente implementarlo mediante CALayer, evitando la sobrecarga de UIView.

Propiedades principales de CALayer

Las propiedades básicas de CALayer incluyen frame, posicionamiento, visualización y efectos visuales. frame define el área rectangular de la capa en coordenadas del padre, bounds define coordenadas internas, y position define el centro de la capa. El cambio de position se anima por defecto mediante animación implícita.

• backgroundColor — el color de fondo de la capa (CGColor). Establecer un color opaco con opaque = true elimina la mezcla alfa.
• cornerRadius — redondeo de esquinas. Procesado por hardware sin pases de renderizado adicionales.
• borderWidth y borderColor — borde de la capa. Renderizado en GPU, no requiere drawRect.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — sombra. Un shadowPath explícito acelera significativamente el renderizado.
• opacity — transparencia de la capa de 0.0 a 1.0. Se anima sin llamar a drawRect.
• transform — CATransform3D para transformaciones 2D y 3D. Soporta distorsiones de perspectiva.

La propiedad contents permite establecer contenido de mapa de bits directamente — mediante CGImage o CIImage. Esta es una alternativa al dibujo mediante drawRect: si la imagen ya está lista, se puede pasar a contents y Core Animation la renderizará sin procesamiento adicional.

Para animación se usan CABasicAnimation, CAKeyframeAnimation y CATransition. Todas estas clases funcionan a través de key paths de propiedades de CALayer, permitiendo animar prácticamente cualquier atributo — desde position hasta transform.rotation.z.

Subclases de CALayer y su propósito

Apple proporciona varias subclases especializadas de CALayer, cada una resolviendo una tarea específica. Elegir la subclase adecuada en lugar de CALayer base puede proporcionar mejoras significativas de rendimiento mediante aceleración por hardware.

• CAShapeLayer — renderiza formas vectoriales (CGPath) en GPU. No requiere un búfer separado — la forma se renderiza como parte de la composición de la capa padre.
• CATextLayer — renderizado de texto con suavizado subpixel. Almacena en caché los glifos, acelerando la visualización de texto repetido.
• CAGradientLayer — degradados lineales y radiales. Renderizado por hardware sin generar imágenes intermedias.
• CAEmitterLayer — sistema de partículas en GPU. Cada partícula se renderiza como un elemento separado sin intervención de la CPU.
• CAReplicatorLayer — creación automática de copias de capas hijas con desplazamientos configurables en posición, color y tiempo.
• CATiledLayer — renderizado de imágenes grandes por tiles. Carga y muestra solo fragmentos visibles.

CAReplicatorLayer es especialmente útil para crear patrones repetitivos sin duplicación de código. Por ejemplo, un indicador de carga con 10 puntos se implementa con un CAReplicatorLayer usando instanceCount = 10 y desplazamiento de tiempo de animación instanceDelay.

Renderizado y composición de CALayer

El renderizado de CALayer se realiza en tres fases. Commit — cuando una propiedad de la capa cambia, se forma un lote de cambios en la CPU. Render — Core Animation genera comandos de Metal en la CPU basados en las propiedades de la capa. Composite — la GPU ejecuta los comandos y muestra el fotograma en pantalla. Todo el proceso está sincronizado con la frecuencia de actualización de la pantalla.

Durante la composición de múltiples capas, la GPU las fusiona en la imagen final teniendo en cuenta transparencia, máscaras y modos de mezcla. Si una capa tiene opaque = true, Core Animation optimiza la composición: en lugar de mezcla alfa, se realiza un simple reemplazo de píxeles, que es significativamente más rápido.

Según Apple Performance Guidelines, los principales factores que ralentizan el renderizado de CALayer son: jerarquía compleja de sublayers (más de 30 capas en pantalla), uso de máscaras (propiedad mask), cálculo automático de sombra sin shadowPath y uso excesivo de shouldRasterize para capas dinámicas.

El Core Animation Instrument en XCode permite monitorear el tiempo de renderizado de cada capa, la cantidad de búferes fuera de pantalla y la frecuencia de llamadas a drawRect. El tiempo óptimo de renderizado para 60 FPS no supera los 8 ms en CPU y 8 ms en GPU.

Renderizado fuera de pantalla y su impacto

Renderizado fuera de pantalla — renderizar una capa en un búfer intermedio antes de mostrarla en pantalla. Ocurre al usar cornerRadius + masksToBounds con contenido, opacidad de grupo, máscaras y shouldRasterize. Cada pase fuera de pantalla toma 2–5 ms, por lo que los renderizados fuera de pantalla excesivos son críticos para el rendimiento.

Para diagnosticar el renderizado fuera de pantalla, usa la herramienta Color Offscreen-Rendered en Core Animation Instrument. Capas amarillas — fuera de pantalla, azules — renderizado directo en pantalla. Minimizar los pases fuera de pantalla es una técnica clave de optimización en iOS.

Ejemplos de código: trabajar con CALayer en Swift

El primer ejemplo demuestra la configuración básica de CALayer con creación de sombra, redondeo de esquinas y borde. shadowPath se especifica explícitamente para acelerar el renderizado:

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
}

El segundo ejemplo muestra la animación de transform mediante CABasicAnimation con transformación 3D de perspectiva. La animación de rotación en el eje Y crea un efecto de volteo de tarjeta:

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")

El tercer ejemplo demuestra el uso de CAGradientLayer para crear un degradado de fondo. El degradado se renderiza en GPU y no requiere recursos adicionales al cambiar de tamaño:

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)
}