CALayer: bu nima, asosiy tushunchalar va qatlamni render qilish

CALayer nima?

CALayer — QuartzCore freymvorkidan olingan sinf bo'lib, ekranning to'rtburchak maydonining rastr tasvirini boshqaradi. U vizual xususiyatlarni saqlaydi: frame, backgroundColor, opacity, shadow, border, transform. UIView dan farqli o'laroq, CALayer teginish hodisalarini qayta ishlamaydi, Auto Layout da ishtirok etmaydi va view controller hayot tsikliga ega emas.

Arxitektura nuqtai nazaridan, CALayer Core Animation kontekstida Model namunasini amalga oshiradi. Qatlam vizual xususiyatlarning holatini saqlaydi, Core Animation esa animatsiya davomida holatlar orasidagi interpolatsiyani boshqaradi. Bu ajratish drawRect orqali kontentni qayta chizmasdan qatlamning istalgan xususiyatlarini animatsiya qilish imkonini beradi.

Apple WWDC 2024 ga ko'ra, CALayer Metal orqali ishlash uchun qayta yozilgan. Zamonaviy render quvur liniyasi uch bosqichni o'z ichiga oladi: Commit (CPU da xususiyatlarni yangilash), Render (CPU da GPU uchun buyruqlarni yaratish) va Composite (GPU da buyruqlarni bajarish). CALayer har uch bosqichda qatnashadi, har biri uchun ma'lumotlarni taqdim etadi.

Har bir qatlam sublayers — ota qatlam ustida render qilinadigan bola qatlamlarni o'z ichiga olishi mumkin. Qatlamlar ierarxiyasi UIView ierarxiyasini takrorlaydi, lekin undan alohida mavjud bo'lishi mumkin. Dasturchi CALayer() orqali UIView dan mustaqil ravishda qatlamlar yaratishi va ularni addSublayer orqali ierarxiyaga qo'shishi mumkin.

CALayer va UIView o'rtasidagi farq

UIView — CALayer ustidagi qo'shimcha bo'lib, u quyidagilarni qo'shadi: UIResponder orqali teginishlarni qayta ishlash, Auto Layout da ishtirok etish, storyboard da taqdimot, UIViewController bilan integratsiya. CALayer — faqat vizual elementlar uchun UIView siz ishlatilishi mumkin bo'lgan engil ob'ekt.

Amalda bu shuni anglatadiki, agar element teginish va layoutga muhtoj bo'lmasa, uni CALayer sifatida amalga oshirish mumkin. Masalan, fon animatsiyalari, yuklash ko'rsatkichlari, dekorativ elementlar — bularning barchasini UIView yukidan qochib, CALayer orqali amalga oshirish samaraliroqdir.

CALayer ning asosiy xususiyatlari

Asosiy xususiyatlar ramka, joylashish, ko'rsatish va vizual effektlarni o'z ichiga oladi. frame qatlamning ota koordinatalaridagi to'rtburchak maydonini, bounds — ichki koordinatalarni, position — qatlamning markazini belgilaydi. Position o'zgarishi implicit animation orqali sukut bo'yicha animatsiya qilinadi.

• backgroundColor — qatlamning fon rangi (CGColor). Shaffof bo'lmagan rang va opaque = true o'rnatish alfa aralashtirishni yo'q qiladi.
• cornerRadius — burchaklarning yumaloqlanishi. Qo'shimcha render o'tishlarisiz apparat bilan ishlov berish.
• borderWidth va borderColor — qatlamning chegarasi. GPU da render qilinadi, drawRect talab qilmaydi.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — soya. Aniq shadowPath renderni sezilarli darajada tezlashtiradi.
• opacity — qatlamning 0.0 dan 1.0 gacha shaffofligi. drawRect chaqirmasdan animatsiya qilinadi.
• transform — 2D va 3D transformatsiyalar uchun CATransform3D. Perspektiv buzilishlarni qo'llab-quvvatlaydi.

contents xususiyati qatlamning rastr kontentini to'g'ridan-to'g'ri o'rnatish imkonini beradi — CGImage yoki CIImage orqali. Bu drawRect orqali chizishga alternativdir: agar tasvir allaqachon tayyor bo'lsa, uni contents ga o'tkazish mumkin va Core Animation uni qo'shimcha ishlovsiz render qiladi.

Animatsiyalar uchun CABasicAnimation, CAKeyframeAnimation va CATransition ishlatiladi. Bu sinflarning barchasi CALayer xususiyatlarining kalit yo'llari orqali ishlaydi, bu esa deyarli har qanday atributni — position dan transform.rotation.z gacha animatsiya qilish imkonini beradi.

CALayer pastki sinflari va ularning vazifasi

Apple bir nechta ixtisoslashtirilgan CALayer pastki sinflarini taqdim etadi, ularning har biri ma'lum bir vazifani hal qiladi. Asosiy CALayer o'rniga mos pastki sinfni tanlash apparat tezlashtirish hisobiga sezilarli samaradorlik o'sishini berishi mumkin.

• CAShapeLayer — GPU da vektor shakllarni (CGPath) chizish. Alohida bufer talab qilmaydi — shakl ota qatlam kompozitsiyasining bir qismi sifatida render qilinadi.
• CATextLayer — subpikselli tekislash bilan matn render qilish. Gliflarni keshlaydi, bu takrorlanuvchi matnni ko'rsatishni tezlashtiradi.
• CAGradientLayer — chiziqli va radial gradientlar. Oraliq tasvirlar yaratmasdan apparat render qilish.
• CAEmitterLayer — GPU da zarrachalar tizimi. Har bir zarracha CPU ishtirokisiz alohida element sifatida render qilinadi.
• CAReplicatorLayer — sozlanishi mumkin bo'lgan joylashish, rang va vaqt siljishlari bilan bola qatlamlar nusxalarini avtomatik yaratish.
• CATiledLayer — katta tasvirlarni plitkalar bilan render qilish. Faqat ko'rinadigan qismlarni yuklaydi va ko'rsatadi.

CAReplicatorLayer kodni takrorlamasdan takrorlanuvchi naqshlar yaratish uchun ayniqsa foydalidir. Masalan, 10 nuqtadan iborat yuklash ko'rsatkichi instanceCount = 10 va instanceDelay animatsiya vaqti siljishi bilan bitta CAReplicatorLayer orqali amalga oshiriladi.

CALayer ni render qilish va kompozitsiya

CALayer render qilish uch bosqichdan o'tadi. Commit — qatlam xususiyati o'zgartirilganda CPU da o'zgarishlar paketi shakllanadi. Render — Core Animation qatlam xususiyatlariga asoslanib CPU da Metal buyruqlarini yaratadi. Composite — GPU buyruqlarni bajaradi va kadrni ekranga chiqaradi. Butun jarayon displey yangilanish chastotasi bilan sinxronlashtiriladi.

Bir nechta qatlamlarning kompozitsiyasi da GPU ularni shaffoflik, maskalar va aralashtirish rejimlarini hisobga olgan holda yakuniy tasvirga birlashtiradi. Agar qatlam opaque = true bo'lsa, Core Animation kompozitsiyani optimallashtiradi: alfa aralashtirish o'rniga oddiy piksel almashtirish amalga oshiriladi, bu juda tez.

Apple Performance Guidelines ga ko'ra, CALayer renderini sekinlashtiruvchi asosiy omillar: murakkab sublayers ierarxiyasi (ekranda 30 dan ortiq qatlam), maskalardan foydalanish (mask xususiyati), shadowPathsiz avtomatik soya hisoblash, dinamik qatlamlar uchun shouldRasterize dan ortiqcha foydalanish.

XCode dagi Core Animation Instrument asbobi har bir qatlamning render vaqti, offscreen buferlar soni va drawRect chaqirish chastotasini kuzatish imkonini beradi. 60 FPS uchun optimal render vaqti — CPU da 8 ms va GPU da 8 ms dan oshmasligi kerak.

Offscreen rendering va uning ta'siri

Offscreen rendering — qatlamni ekranga chiqarishdan oldin oraliq buferda render qilish. Kontent bilan cornerRadius + masksToBounds, guruhli opacity, maskalar va shouldRasterize ishlatilganda yuz beradi. Har bir offscreen o'tish 2–5 ms davom etadi, shuning uchun ortiqcha offscreen render samaradorlik uchun juda muhim.

Offscreen rendering diagnostikasi uchun Core Animation Instrument da Color Offscreen-Rendered asbobidan foydalaning. Sariq qatlamlar — offscreen, ko'k qatlamlar — to'g'ridan-to'g'ri ekranga render. Offscreen o'tishlarni minimallashtirish iOS da asosiy optimallashtirish texnikasidir.

Kod misollari: Swift da CALayer bilan ishlash

Birinchi misol soya yaratish, burchaklarni yumaloqlash va chegara bilan CALayer ning asosiy sozlamalarini ko'rsatadi. shadowPath renderini tezlashtirish uchun aniq o'rnatilgan:

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
}

Ikkinchi misol — perspektiv 3D transformatsiya bilan CABasicAnimation orqali transform animatsiyasi. Y o'qi atrofida aylanish animatsiyasi kartani aylantirish effektini yaratadi:

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

Uchinchi misol — fon gradientini yaratish uchun CAGradientLayer dan foydalanish. Gradient GPU da render qilinadi va o'lchamlar o'zgartirilganda qo'shimcha resurs talab qilmaydi:

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