CALayer: bu nədir, əsas anlayışlar və təbəqənin render edilməsi

CALayer nədir?

CALayer — QuartzCore çərçivəsindən olan, ekranın düzbucaqı iş sahəsinin raster təsvirini idarə edən sinifdir. O, vizual xüsusiyyətləri saxlayır: frame, backgroundColor, opacity, shadow, border, transform. UIView-dən fərqli olaraq, CALayer toxunma hadisələrini emal etmir, Auto Layout-da iştirak etmir və view controller həyat dövrünə malik deyil.

Memarlıq baxımından CALayer Core Animation kontekstində Model nümunəsini həyata keçirir. Təbəqə vizual xüsusiyyətlərin vəziyyətini saxlayır, Core Animation isə animasiya zamanı vəziyyətlər arasında interpolasiyanı idarə edir. Bu ayrılma drawRect vasitəsilə məzmunu yenidən çəkmədən təbəqənin istənilən xüsusiyyətlərini animasiya etməyə imkan verir.

Apple WWDC 2024-yə görə, CALayer Metal vasitəsilə işləmək üçün yenidən yazılmışdır. Müasir render boru kəməri üç mərhələdən ibarətdir: Commit (CPU-da xüsusiyyətlərin yenilənməsi), Render (CPU-da GPU üçün əmrlərin yaradılması) və Composite (GPU-da əmrlərin icrası). CALayer hər üç mərhələdə iştirak edir, hər biri üçün məlumat təqdim edir.

Hər təbəqə sublayers — ana təbəqənin üzərində render edilən uşaq təbəqələri ehtiva edə bilər. Təbəqələr iyerarxiyası UIView iyerarxiyasını təkrarlayır, lakin ondan ayrı mövcud ola bilər. Proqramçı CALayer() vasitəsilə UIView-dən asılı olmayaraq təbəqələr yarada və onları addSublayer vasitəsilə iyerarxiyaya əlavə edə bilər.

CALayer və UIView arasındakı fərq

UIView — CALayer üzərində əlavədir: UIResponder vasitəsilə toxunma emalı, Auto Layout-da iştirak, storyboard-da təqdimat, UIViewController ilə inteqrasiya. CALayer — yalnız vizual elementlər üçün UIView olmadan istifadə edilə bilən yünül obyektdir.

Praktikada bu o deməkdir ki, element toxunma və layout tələb etməzsə, onu CALayer kimi həyata keçirmək olar. Məsələn, fon animasiyaları, yükləmə göstəriciləri, dekorativ elementlər — bütün bunları UIView yükündən qaçaraq CALayer vasitəsilə həyata keçirmək daha səmərəlidir.

CALayer-in əsas xüsusiyyətləri

Əsas xüsusiyyətlər çərçivə, yerləşdirmə, göstərmə və vizual effektləri əhatə edir. frame təbəqənin ana koordinatlarında düzbucaqı sahəsini, bounds — daxili koordinatları, position — təbəqənin mərkəzini təyin edir. Position dəyişikliyi implicit animation vasitəsilə default olaraq animasiya olunur.

• backgroundColor — təbəqənin fon rəngi (CGColor). Qeyri-şəffaf rəng və opaque = true təyini alfa qarışdırmasını aradan qaldırır.
• cornerRadius — künclərin yuvarlaqlışdırılması. Əlavə render keçidləri olmadan aparat emalı.
• borderWidth və borderColor — təbəqənin haşiyəsi. GPU-da render edilir, drawRect tələb etmir.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — kölgə. Açıq shadowPath renderi əhəmiyyətli dərəcədə sürətləndirir.
• opacity — təbəqənin 0.0-dan 1.0-dək şəffaflığı. drawRect çağırmadan animasiya olunur.
• transform — 2D və 3D transformasiyalar üçün CATransform3D. Perspektiv təhriflərini dəstəkləyir.

contents xüsusiyyəti təbəqənin raster məzmununu birbaşa təyin etməyə imkan verir — CGImage və ya CIImage vasitəsilə. Bu drawRect vasitəsilə çəkməyə alternativdir: əgər şəkil artıq hazırdırsa, onu contents-ə ötürmək olar və Core Animation onu əlavə emal olmadan render edəcək.

Animasiyalar üçün CABasicAnimation, CAKeyframeAnimation və CATransition istifadə olunur. Bütün bu siniflər CALayer xüsusiyyətlərinin açar yolları vasitəsilə işləyir ki, bu da demək olar ki, istənilən atributu — position-dan transform.rotation.z-dək animasiya etməyə imkan verir.

CALayer alt sinifləri və onların təyinatı

Apple bir neçe ixtisaslaşdırılmış CALayer alt sinfi təqdim edir, hər biri müəyyən bir tapşırığı həll edir. Əsas CALayer əvəzinə uyğun alt sinfi seçmək aparat sürətləndirməsi hesabına əhəmiyyətli performans artımı verə bilər.

• CAShapeLayer — GPU-da vektor formaların (CGPath) çəkilməsi. Ayrıca bufer tələb etmir — forma ana təbəqənin kompozisiyasının bir hissəsi kimi render edilir.
• CATextLayer — subpixel hamarlaşdırma ilə mətn render edilməsi. Glifləri keşləyir, bu da təkrarlanan mətnin göstərilməsini sürətləndirir.
• CAGradientLayer — xətti və radial gradientlər. Aralıq şəkillər yaratmadan aparat render edilməsi.
• CAEmitterLayer — GPU-da hissəcik sistemi. Hər hissəcik CPU-nun iştirakı olmadan ayrı element kimi render edilir.
• CAReplicatorLayer — uşaq təbəqələrin konfiqurasiya edilə bilən yerdəyişmə, rəng və vaxt ofsetləri ilə avtomatik surətdə yaradılması.
• CATiledLayer — böyük şəkillərin kafelərlə render edilməsi. Yalnız görünən fraqmentləri yükləyir və göstərir.

CAReplicatorLayer kodun təkrarlanması olmadan təkrarlanan nümunələr yaratmaq üçün xüsusilə faydalıdır. Məsələn, 10 nöqtədən ibarət yükləmə göstəricisi instanceCount = 10 və instanceDelay animasiya vaxtı ofseti ilə bir CAReplicatorLayer ilə həyata keçirilir.

CALayer-in render edilməsi və kompozisiyası

CALayer render edilməsi üç mərhələdən keçir. Commit — təbəqənin xüsusiyyəti dəyişdirildikdə CPU-da dəyişikliklər paketi formalaşdırılır. Render — Core Animation təbəqənin xüsusiyyətlərinə əsasən CPU-da Metal əmrləri yaradır. Composite — GPU əmrləri yerinə yetirir və kadrı ekrana çıxarır. Bütün proses displeyin yenilənmə tezliyi ilə sinxronlaşdırılır.

Bir neçe təbəqənin kompozisiyası zamanı GPU onları şəffaflıq, maskalar və qarışdırma rejimləri nəzərə alınmaqla yekun təsviirdə birləşdirir. Əgər təbəqənin opaque = true dəyəri varsa, Core Animation kompozisiyanı optimallaşdırır: alfa qarışdırması əvəzinə sadəcə piksel dəyişdirməsi aparılır ki, bu da çox daha sürətlidir.

Apple Performance Guidelines-yə görə, CALayer renderini yavaşdan əsas amillər: mürəkkəb sublayers iyerarxiyası (ekranda 30-dan çox təbəqə), maskaların istifadəsi (mask xüsusiyyəti), shadowPath olmadan avtomatik kölgə hesablanması, dinamik təbəqələr üçün shouldRasterize-in həddindən artıq istifadəsi.

XCode-da Core Animation Instrument aləti hər təbəqənin render vaxtını, offscreen buferlərinin sayını və drawRect çağırılma tezliyini izləməyə imkan verir. 60 FPS üçün optimal render vaxtı CPU-da 8 ms və GPU-da 8 ms-dən çox olmamalıdır.

Offscreen rendering və onun təsiri

Offscreen rendering — təbəqənin ekrana çıxarmazdan əvvəl aralıq buferdə render edilməsi. Məzmun ilə cornerRadius + masksToBounds istifadəsi, qrup opacity, maskalar və shouldRasterize zamanı baş verir. Hər offscreen keçidi 2–5 ms çəkir, ona görə də həddindən artıq offscreen render performans üçün kritikdir.

Offscreen rendering diaqnostikası üçün Core Animation Instrument-də Color Offscreen-Rendered alətindən istifadə edin. Sarı təbəqələr — offscreen, mavi olanlar — birbaşa ekran renderidir. Offscreen keçidlərinin minimuma endirilməsi iOS-da əsas optimallaşdırma texnikasıdır.

Kod nümunələri: Swift-də CALayer ilə iş

Birinci nümunə kölgə yaratma, küncləri yuvarlaqlışdırma və haşiyə ilə CALayer-in əsas konfiqurasiyasını göstərir. shadowPath renderi sürətləndirmək üçün açıq şəkildə təyin edilmişdir:

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
}

Ikinci nümunə — perspektiv 3D transformasiya ilə CABasicAnimation vasitəsilə transform animasiyası. Y oxu ətrafında fırlanma animasiyası kartın çevrilmə effektini yaradır:

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

Uçüncü nümunə — fon gradienti yaratmaq üçün CAGradientLayer istifadəsi. Gradient GPU-da render edilir və ölçülər dəyişdirilərkən əlavə resurs tələb etmir:

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