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