CALayer: co to jest, kluczowe pojęcia i renderowanie warstwy

Co to jest CALayer?

CALayer — to klasa z frameworka QuartzCore, która zarządza obrazem rastrowym prostokątnego obszaru ekranu. Przechowuje właściwości wizualne: frame, backgroundColor, opacity, shadow, border, transform. W przeciwieństwie do UIView, CALayer nie obsługuje zdarzeń dotyku, nie uczestniczy w Auto Layout i nie ma cyklu życia kontrolera widoku.

Architektonicznie CALayer realizuje wzorzec Model w kontekście Core Animation. Warstwa przechowuje stan właściwości wizualnych, a Core Animation zarządza interpolacją między stanami podczas animacji. Takie rozdzielenie pozwala animować dowolne właściwości warstwy bez konieczności przerysowywania treści przez drawRect.

Według Apple WWDC 2024, CALayer został przepisany do działania przez Metal. Nowoczesny potok renderowania obejmuje trzy etapy: Commit (aktualizacja właściwości na CPU), Render (generowanie komend dla GPU na CPU) i Composite (wykonywanie komend na GPU). CALayer uczestniczy we wszystkich trzech etapach, dostarczając dane dla każdego z nich.

Każda warstwa może zawierać sublayers — warstwy potomne, które są renderowane nad rodzicielską. Hierarchia warstw powtarza hierarchię UIView, ale może istnieć oddzielnie. Programista może tworzyć warstwy niezależnie od UIView przez CALayer() i dodawać je do hierarchii przez addSublayer.

Różnica między CALayer a UIView

UIView — to nadbudowa nad CALayer, która dodaje: obsługę dotyku przez UIResponder, udział w Auto Layout, prezentację w storyboard, integrację z UIViewController. CALayer — to lekki obiekt, który można używać bez UIView dla elementów czysto wizualnych.

W praktyce oznacza to, że jeśli element nie potrzebuje dotyku i layoutu, można go zaimplementować jako CALayer. Na przykład animacje tła, wskaźniki ładowania, elementy dekoracyjne — wszystko to efektywniej zaimplementować przez CALayer, unikając narzutu UIView.

Podstawowe właściwości CALayer

Podstawowe właściwości CALayer obejmują ramkę, pozycjonowanie, wyświetlanie i efekty wizualne. frame określa prostokątny obszar warstwy we współrzędnych rodzica, bounds — wewnętrzne współrzędne, position — środek warstwy. Zmiana position jest domyślnie animowana przez implicit animation.

• backgroundColor — kolor tła warstwy (CGColor). Ustawienie nieprzezroczystego koloru i opaque = true eliminuje mieszanie alfa.
• cornerRadius — zaokrąglenie rogów. Sprzętowe przetwarzanie bez dodatkowych przebiegów renderowania.
• borderWidth i borderColor — obramowanie warstwy. Renderowane na GPU, nie wymaga drawRect.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — cień. Jawny shadowPath znacznie przyspiesza renderowanie.
• opacity — przezroczystość warstwy od 0.0 do 1.0. Animowana bez wywołania drawRect.
• transform — CATransform3D dla transformacji 2D i 3D. Obsługuje zniekształcenia perspektywiczne.

Właściwość contents pozwala ustawić zawartość rastrową warstwy bezpośrednio — przez CGImage lub CIImage. To alternatywa dla rysowania przez drawRect: jeśli obraz jest już gotowy, można go przekazać do contents, a Core Animation wyrenderuje go bez dodatkowego przetwarzania.

Do animacji używa się CABasicAnimation, CAKeyframeAnimation i CATransition. Wszystkie te klasy działają przez ścieżki kluczowe właściwości CALayer, co pozwala animować praktycznie dowolny atrybut — od position do transform.rotation.z.

Podklasy CALayer i ich przeznaczenie

Apple dostarcza kilka wyspecjalizowanych podklas CALayer, z których każda rozwiązuje konkretne zadanie. Wybór odpowiedniej podklasy zamiast podstawowego CALayer może dać znaczny wzrost wydajności dzięki przyspieszeniu sprzętowemu.

• CAShapeLayer — rysowanie kształtów wektorowych (CGPath) na GPU. Nie wymaga osobnego bufora — kształt jest renderowany jako część kompozycji warstwy nadrzędnej.
• CATextLayer — renderowanie tekstu z wygładzaniem subpikselowym. Buforuje glify, co przyspiesza wyświetlanie powtarzającego się tekstu.
• CAGradientLayer — gradienty liniowe i radialne. Sprzętowe renderowanie bez generowania pośrednich obrazów.
• CAEmitterLayer — system cząsteczek na GPU. Każda cząsteczka jest renderowana jako osobny element bez udziału CPU.
• CAReplicatorLayer — automatyczne tworzenie kopii warstw potomnych z konfigurowalnymi przesunięciami pozycji, koloru i czasu.
• CATiledLayer — renderowanie dużych obrazów w kafelkach. Ładuje i wyświetla tylko widoczne fragmenty.

CAReplicatorLayer jest szczególnie przydatny do tworzenia powtarzalnych wzorów bez duplikowania kodu. Na przykład wskaźnik ładowania z 10 punktów jest implementowany przez jeden CAReplicatorLayer z instanceCount = 10 i przesunięciem czasu animacji instanceDelay.

Renderowanie i kompozycja CALayer

Renderowanie CALayer przebiega w trzech fazach. Commit — przy zmianie właściwości warstwy na CPU tworzony jest pakiet zmian. Render — Core Animation generuje komendy Metal na CPU na podstawie właściwości warstwy. Composite — GPU wykonuje komendy i wyświetla klatkę na ekranie. Cały proces jest zsynchronizowany z częstotliwością odświeżania wyświetlacza.

Przy kompozycji wielu warstw GPU łączy je w końcowy obraz z uwzględnieniem przezroczystości, masek i trybów mieszania. Jeśli warstwa ma opaque = true, Core Animation optymalizuje kompozycję: zamiast mieszania alfa wykonywana jest zwykła zamiana pikseli, co jest znacznie szybsze.

Według Apple Performance Guidelines, główne czynniki spowalniające renderowanie CALayer: złożona hierarchia sublayers (ponad 30 warstw na ekranie), użycie masek (właściwość mask), automatyczne obliczanie cienia bez shadowPath, nadmierne użycie shouldRasterize dla dynamicznych warstw.

Narzędzie Core Animation Instrument w XCode pozwala monitorować czas renderowania każdej warstwy, liczbę buforów offscreen i częstotliwość wywołania drawRect. Optymalny czas renderowania dla 60 FPS — nie więcej niż 8 ms na CPU i 8 ms na GPU.

Offscreen rendering i jego wpływ

Offscreen rendering — renderowanie warstwy w pośrednim buforze przed wyświetleniem na ekranie. Występuje przy użyciu cornerRadius + masksToBounds z treścią, grupowej opacity, maskach i shouldRasterize. Każdy przebieg offscreen zajmuje 2–5 ms, dlatego nadmierne renderowanie offscreen jest krytyczne dla wydajności.

Do diagnostyki offscreen rendering użyj narzędzia Color Offscreen-Rendered w Core Animation Instrument. Żółte warstwy — offscreen, niebieskie — bezpośrednie renderowanie na ekran. Minimalizacja przebiegów offscreen — kluczowa technika optymalizacji w iOS.

Przykłady kodu: praca z CALayer w Swift

Pierwszy przykład demonstruje podstawową konfigurację CALayer z tworzeniem cienia, zaokrągleniem rogów i obramowaniem. shadowPath jest ustawiony jawnie dla przyspieszenia renderowania:

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
}

Drugi przykład — animacja transform przez CABasicAnimation z perspektywiczną transformacją 3D. Animacja obrotu wokół osi Y tworzy efekt odwracania karty:

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

Trzeci przykład — użycie CAGradientLayer do tworzenia gradientu tła. Gradient jest renderowany na GPU i nie wymaga dodatkowych zasobów przy zmianie rozmiarów:

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