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. Современный pipeline рендеринга включает три этапа: 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 мс на CPU и 8 мс на GPU.

Offscreen rendering и его влияние

Offscreen rendering — рендеринг слоя в промежуточный буфер перед выводом на экран. Возникает при использовании cornerRadius + masksToBounds с контентом, групповой opacity, масках и shouldRasterize. Каждый offscreen-проход занимает 2–5 мс, поэтому избыточные offscreen-рендеринги критичны для производительности.

Для диагностики offscreen rendering используйте инструмент 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)
}