Что такое Shape Layer?

Что такое Shape Layer?

Shape Layer (слой-фигура) — это тип слоя в iOS/macOS фреймворке Core Animation (часть Quartz Core), который позволяет создавать и анимировать векторные графические фигуры непосредственно с помощью кода, без использования растровых изображений. Он представляет собой специализированный подкласс CALayer и доступен через класс CAShapeLayer.

Ключевые особенности CAShapeLayer

1. Векторная природа: Фигуры определяются с помощью путей (paths), используя CGPath или UIBezierPath. Это означает, что они масштабируются без потери качества и занимают мало памяти по сравнению с растровыми изображениями.

2. Производительность: Поскольку рендеринг происходит на GPU, анимации фигур очень эффективны. Это делает CAShapeLayer идеальным для плавных интерактивных эффектов.

3. Гибкость стилизации: Позволяет легко настраивать:

   • path — определяет геометрию фигуры.
   • fillColor — цвет заливки.
   • strokeColor — цвет обводки.
   • lineWidth — толщина обводки.
   • lineDashPattern — пунктирные линии.
   • lineCap и lineJoin — стиль концов и соединений линий.

Пример создания Shape Layer

import UIKit

class ShapeLayerViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Создаем путь (круг)
        let circularPath = UIBezierPath(
            arcCenter: view.center,
            radius: 100,
            startAngle: -CGFloat.pi / 2,
            endAngle: 2 * CGFloat.pi - CGFloat.pi / 2,
            clockwise: true
        )
        
        // Создаем и настраиваем CAShapeLayer
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = circularPath.cgPath
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.systemBlue.cgColor
        shapeLayer.lineWidth = 10
        shapeLayer.lineCap = .round
        
        // Добавляем слой в иерархию слоев
        view.layer.addSublayer(shapeLayer)
        
        // Анимация обводки
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0
        animation.toValue = 1
        animation.duration = 2
        shapeLayer.add(animation, forKey: "drawAnimation")
    }
}

Основные сценарии использования

• Кастомные индикаторы загрузки: Круговые или линейные прогресс-бары.
• Интерактивные элементы UI: Анимированные кнопки, переключатели, галочки.
• Эффекты переходов: Морфинг фигур между состояниями.
• Рисование графиков и диаграмм: Динамические визуализации данных.
• Маскирование: Создание сложных масок для других слоев или вью.

Преимущества перед обычными CALayer

• Упрощенное рисование: Не нужно переопределять draw(in:), как в CALayer.
• Анимация свойств пути: Можно плавно изменять path с помощью CABasicAnimation.
• Контроль над обводкой и заливкой: Раздельное управление через strokeStart/strokeEnd.

Важные нюансы

• Координатная система: CAShapeLayer использует систему координат Core Graphics, где начало координат (0,0) находится в левом верхнем углу.
• Производительность при сложных путях: Очень сложные пути (тысячи сегментов) могут снижать производительность.
• Hit testing: По умолчанию CAShapeLayer не реагирует на касания. Для интерактивности нужно обрабатывать касания во вью-контроллере или использовать hitTest(_:).

CAShapeLayer — мощный инструмент в арсенале iOS-разработчика для создания производительной, масштабируемой и анимированной векторной графики непосредственно в интерфейсе приложения.