CALayer: o que é, conceitos-chave e renderização de camadas

O que é CALayer?

CALayer é uma classe do framework QuartzCore que gerencia uma imagem bitmap de uma área retangular da tela. Ela armazena propriedades visuais: frame, backgroundColor, opacity, shadow, border, transform. Ao contrário do UIView, o CALayer não lida com eventos de toque, não participa do Auto Layout e não tem ciclo de vida de view controller.

Arquiteturalmente, o CALayer implementa o padrão Model no contexto do Core Animation. A camada armazena o estado das propriedades visuais, enquanto o Core Animation gerencia a interpolação entre estados durante a animação. Essa separação permite animar qualquer propriedade da camada sem precisar redesenhar o conteúdo através de drawRect.

De acordo com a Apple WWDC 2024, o CALayer foi reescrito para funcionar através do Metal. O pipeline de renderização moderno inclui três etapas: Commit (atualização de propriedades na CPU), Render (geração de comandos de GPU na CPU) e Composite (execução de comandos na GPU). O CALayer participa de todas as três etapas, fornecendo dados para cada uma.

Cada camada pode conter sublayers — camadas filhas que renderizam sobre a camada pai. A hierarquia de camadas reflete a hierarquia do UIView, mas pode existir independentemente dela. Os desenvolvedores podem criar camadas independentemente do UIView através de CALayer() e adicioná-las à hierarquia via addSublayer.

Diferença entre CALayer e UIView

UIView é um invólucro sobre CALayer que adiciona: manipulação de toque via UIResponder, participação no Auto Layout, representação em storyboard e integração com UIViewController. CALayer é um objeto leve que pode ser usado sem UIView para elementos puramente visuais.

Na prática, isso significa que se um elemento não precisa de manipulação de toque ou layout, ele pode ser implementado como CALayer. Por exemplo, animações de fundo, indicadores de carregamento, elementos decorativos — tudo isso é mais eficiente implementado via CALayer, evitando a sobrecarga do UIView.

Propriedades principais do CALayer

As propriedades básicas do CALayer incluem frame, posicionamento, exibição e efeitos visuais. frame define a área retangular da camada em coordenadas do pai, bounds define coordenadas internas, e position define o centro da camada. A alteração de position é animada por padrão através de animação implícita.

• backgroundColor — a cor de fundo da camada (CGColor). Definir uma cor opaca com opaque = true elimina a mistura alfa.
• cornerRadius — arredondamento de cantos. Processado por hardware sem passes de renderização adicionais.
• borderWidth e borderColor — borda da camada. Renderizado na GPU, não requer drawRect.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — sombra. Um shadowPath explícito acelera significativamente a renderização.
• opacity — transparência da camada de 0.0 a 1.0. Anima sem chamar drawRect.
• transform — CATransform3D para transformações 2D e 3D. Suporta distorções de perspectiva.

A propriedade contents permite definir conteúdo bitmap diretamente — através de CGImage ou CIImage. Esta é uma alternativa ao desenho via drawRect: se a imagem já estiver pronta, ela pode ser passada para contents, e o Core Animation a renderizará sem processamento adicional.

Para animação, são usados CABasicAnimation, CAKeyframeAnimation e CATransition. Todas essas classes funcionam através de key paths de propriedades do CALayer, permitindo animar praticamente qualquer atributo — desde position até transform.rotation.z.

Subclasses do CALayer e sua finalidade

Apple fornece várias subclasses especializadas do CALayer, cada uma resolvendo uma tarefa específica. Escolher a subclasse adequada em vez do CALayer base pode proporcionar melhorias significativas de desempenho através de aceleração por hardware.

• CAShapeLayer — renderiza formas vetoriais (CGPath) na GPU. Não requer um buffer separado — a forma é renderizada como parte da composição da camada pai.
• CATextLayer — renderização de texto com suavização subpixel. Armazena em cache glifos, acelerando a exibição de texto repetido.
• CAGradientLayer — gradientes lineares e radiais. Renderização por hardware sem gerar imagens intermediárias.
• CAEmitterLayer — sistema de partículas na GPU. Cada partícula é renderizada como um elemento separado sem envolvimento da CPU.
• CAReplicatorLayer — criação automática de cópias de camadas filhas com deslocamentos configuráveis em posição, cor e tempo.
• CATiledLayer — renderização de imagens grandes por tiles. Carrega e exibe apenas fragmentos visíveis.

CAReplicatorLayer é especialmente útil para criar padrões repetitivos sem duplicação de código. Por exemplo, um indicador de carregamento com 10 pontos é implementado com um CAReplicatorLayer usando instanceCount = 10 e deslocamento de tempo de animação instanceDelay.

Renderização e composição do CALayer

A renderização do CALayer ocorre em três fases. Commit — quando uma propriedade da camada muda, um lote de alterações é formado na CPU. Render — o Core Animation gera comandos Metal na CPU com base nas propriedades da camada. Composite — a GPU executa os comandos e exibe o quadro na tela. Todo o processo é sincronizado com a taxa de atualização da tela.

Durante a composição de múltiplas camadas, a GPU as mescla na imagem final levando em conta transparência, máscaras e modos de mesclagem. Se uma camada tiver opaque = true, o Core Animation otimiza a composição: em vez de mesclagem alfa, é feita uma simples substituição de pixels, que é significativamente mais rápida.

De acordo com as Apple Performance Guidelines, os principais fatores que retardam a renderização do CALayer são: hierarquia complexa de sublayers (mais de 30 camadas na tela), uso de máscaras (propriedade mask), cálculo automático de sombra sem shadowPath e uso excessivo de shouldRasterize para camadas dinâmicas.

O Core Animation Instrument no XCode permite monitorar o tempo de renderização de cada camada, a quantidade de buffers offscreen e a frequência de chamadas drawRect. O tempo ideal de renderização para 60 FPS não excede 8 ms na CPU e 8 ms na GPU.

Renderização offscreen e seu impacto

Renderização offscreen — renderizar uma camada em um buffer intermediário antes de exibi-la na tela. Ocorre ao usar cornerRadius + masksToBounds com conteúdo, opacidade de grupo, máscaras e shouldRasterize. Cada passagem offscreen leva 2–5 ms, portanto, renderizações offscreen excessivas são críticas para o desempenho.

Para diagnosticar a renderização offscreen, use a ferramenta Color Offscreen-Rendered no Core Animation Instrument. Camadas amarelas — offscreen, azuis — renderização direta na tela. Minimizar as passagens offscreen é uma técnica chave de otimização no iOS.

Exemplos de código: trabalhando com CALayer em Swift

O primeiro exemplo demonstra a configuração básica do CALayer com criação de sombra, arredondamento de cantos e borda. shadowPath é especificado explicitamente para acelerar a renderização:

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
}

O segundo exemplo mostra a animação de transform via CABasicAnimation com transformação 3D de perspectiva. A animação de rotação no eixo Y cria um efeito de virar cartão:

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

O terceiro exemplo demonstra o uso de CAGradientLayer para criar um gradiente de fundo. O gradiente renderiza na GPU e não requer recursos adicionais ao redimensionar:

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