CALayer: шта је, кључни појмови и рендеровање слоја

Шта је CALayer?

CALayer — је класа из оквира QuartzCore која управља растерском сликом правоугаоне области екрана. Чува визуелне особине: frame, backgroundColor, opacity, shadow, border, transform. За разлику од UIView, CALayer не обрађује догађаје додира, не учествује у Auto Layout-у и нема животни циклус view controller-а.

Архитектурно, CALayer имплементира образац Model у контексту Core Animation. Слој чува стање визуелних својатава, а Core Animation управља интерполацијом између стања током анимације. Ово раздвајање омогућава анимирање било којих својатава слоја без потребе за поновним цртањем садржаја кроз drawRect.

Према Apple WWDC 2024, CALayer је преписан за рад кроз Metal. Савремени пипејлайн рендеровања укључује три фазе: Commit (ажурирање својатава на CPU), Render (генерисање наредби за GPU на CPU) и Composite (извршавање наредби на GPU). CALayer учествује у све три фазе, обезбеђујући податке за сваку.

Сваки слој може да садржи sublayers — слојеве деце који се рендерују изнад родитељског. Хијерархија слојева понавља хијерархију UIView, али може да постоји одвојено. Програмер може да креира слојеве независно од UIView кроз CALayer() и дода их у хијерархију кроз addSublayer.

Разлика између CALayer и UIView

UIView — је надградња изнад CALayer која додаје: обраду додира кроз UIResponder, учешће у Auto Layout-у, презентацију у storyboard-у, интеграцију са UIViewController. CALayer — је лаган објекат који се може користити без UIView за чисто визуелне елементе.

У пракси, ово значи да ако елементу нису потребни додир и layout, може се имплементирати као CALayer. На пример, анимације позадине, индикатори учитавања, декоративни елементи — све је ефикасније имплементирати кроз CALayer, избегавајући оверхед UIView-а.

Основне особине CALayer

Основне особине 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 — CATransform3D за 2D и 3D трансформације. Подржава перспективне искривљења.

Својство contents омогућава постављање растерског садржаја слоја директно — кроз CGImage или CIImage. Ово је алтернатива цртању кроз drawRect: ако је слика већ спремна, може се проследити у contents, и Core Animation ће је рендеровати без додатне обраде.

За анимације се користе CABasicAnimation, CAKeyframeAnimation и CATransition. Све ове класе раде кроз кључне путање својатава CALayer, што омогућава анимирање готово сваког атрибута — од position до transform.rotation.z.

Подкласе CALayer и њихова намена

Apple пружа неколико специјализованих подкласа CALayer, од којих свака решава одређени задатак. Избор одговарајуће подкласе уместо основног CALayer-а може дати значајан пораст перформанси захваљујући хардверско убрзање.

• CAShapeLayer — цртање векторских облика (CGPath) на GPU. Не захтева посебан буфер — облик се рендерује као део композиције родитељског слоја.
• CATextLayer — рендеровање текста са субпикселним изглађивањем. Кешира глифове, што убрзава приказивање текста који се понавља.
• CAGradientLayer — линеарни и радијални градијенти. Хардверско рендеровање без генерисања посредних слика.
• CAEmitterLayer — систем честица на GPU. Свака честица се рендерује као посебан елеменат без учешћа CPU-а.
• CAReplicatorLayer — аутоматско креирање копија дечјих слојева са подешивим помацима по позицији, боји и времену.
• CATiledLayer — рендеровање великих слика по плочицама. Учитава и приказује само видљиве фрагменте.

CAReplicatorLayer је посебно корисан за стварање понављајућих образаца без дуплирања кода. На пример, индикатор учитавања од 10 тачака се имплементира једним CAReplicatorLayer-ом са instanceCount = 10 и помером времена анимације instanceDelay.

Рендеровање и композиција CALayer

Рендеровање CALayer пролази кроз три фазе. Commit — при промени својства слоја на CPU-у се формира пакет промена. Render — Core Animation генерише Metal наредбе на CPU-у на основу својатава слоја. Composite — GPU извршава наредбе и приказује оквир на екрану. Цео процес је синхронизован са фреквенцијом освежавања екрана.

При композицији више слојева, GPU их спаја у коначну слику узимајући у обзир прозирност, маске и начине мешања. Ако слој има opaque = true, Core Animation оптимизује композицију: уместо алфа блендовања врши се једноставна замена пиксела, што је значно брже.

Према Apple Performance Guidelines, главни фактори који успоравају рендеровање CALayer: сложена хијерархија sublayers (преко 30 слојева на екрану), коришћење маски (својство mask), аутоматско израчунавање сенке без shadowPath, прекомерно коришћење shouldRasterize за динамичке слојеве.

Инструмент Core Animation Instrument у XCode-у омогућава праћење времена рендеровања сваког слоја, броја offscreen буфера и учесталости позивања drawRect. Оптимално време рендеровања за 60 FPS — не више од 8 ms на CPU и 8 ms на GPU.

Offscreen рендеровање и његов утицај

Offscreen рендеровање — рендеровање слоја у посредни буфер пре излаза на екран. Јавља се при коришћењу cornerRadius + masksToBounds са садржајем, групној opacity, маскама и shouldRasterize. Сваки offscreen пролаз траје 2–5 ms, па је прекомерно offscreen рендеровање критично за перформансу.

За дијагностику offscreen рендеровања користите инструмент Color Offscreen-Rendered у Core Animation Instrument-у. Жути слојеви — offscreen, плави — директно рендеровање на екран. Минимизација offscreen пролаза је кључни техника оптимизације у iOS-у.

Примери кода: рад са CALayer у Swift-у

Први пример приказује основну конфигурацију 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
}

Други пример — анимација transform кроз CABasicAnimation са перспективном 3D трансформацијом. Анимација ротације око 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)
}