CALayer: यह क्या है, मुख्य अवधारणाएँ और लेयर रेंडरिंग

CALayer क्या है?

CALayer QuartzCore फ्रेमवर्क का एक क्लास है जो स्क्रीन के आयताकार क्षेत्र की बिटमैप छवि का प्रबंधन करता है। यह विज़ुअल प्रॉपर्टीज़ संग्रहीत करता है: frame, backgroundColor, opacity, shadow, border, transform। UIView के विपरीत, CALayer टच इवेंट्स को नहीं संभालता, Auto Layout में भाग नहीं लेता, और इसका कोई view controller जीवनचक्र नहीं है।

आर्किटेक्चरल रूप से, CALayer Core Animation के संदर्भ में Model पैटर्न को लागू करता है। लेयर विज़ुअल प्रॉपर्टीज़ की स्थिति संग्रहीत करती है, जबकि Core Animation एनिमेशन के दौरान स्थितियों के बीच इंटरपोलेशन का प्रबंधन करता है। यह पृथक्करण drawRect के माध्यम से कंटेंट को फिर से ड्रॉ किए बिना लेयर प्रॉपर्टीज़ को एनिमेट करने की अनुमति देता है।

Apple WWDC 2024 के अनुसार, CALayer को Metal के माध्यम से काम करने के लिए फिर से लिखा गया था। आधुनिक रेंडरिंग पाइपलाइन में तीन चरण शामिल हैं: Commit (CPU पर प्रॉपर्टीज़ अपडेट करना), Render (CPU पर GPU कमांड जेनरेट करना), और Composite (GPU पर कमांड निष्पादित करना)। CALayer तीनों चरणों में भाग लेता है, प्रत्येक के लिए डेटा प्रदान करता है।

प्रत्येक लेयर में sublayers हो सकते हैं — चाइल्ड लेयर जो पैरेंट के ऊपर रेंडर होती हैं। लेयर पदानुक्रम UIView पदानुक्रम को दर्शाता है लेकिन इससे स्वतंत्र रूप से मौजूद हो सकता है। डेवलपर्स CALayer() के माध्यम से UIView से स्वतंत्र रूप से लेयर बना सकते हैं और उन्हें addSublayer के माध्यम से पदानुक्रम में जोड़ सकते हैं।

CALayer और UIView के बीच अंतर

UIView CALayer के ऊपर एक रैपर है जो जोड़ता है: UIResponder के माध्यम से टच हैंडलिंग, Auto Layout में भागीदारी, storyboard में प्रस्तुतीकरण, और UIViewController के साथ एकीकरण। CALayer एक हल्का ऑब्जेक्ट है जिसे विशुद्ध रूप से विज़ुअल तत्वों के लिए UIView के बिना उपयोग किया जा सकता है।

व्यवहार में, इसका मतलब है कि यदि किसी तत्व को टच हैंडलिंग और लेआउट की आवश्यकता नहीं है, तो इसे CALayer के रूप में कार्यान्वित किया जा सकता है। उदाहरण के लिए, बैकग्राउंड एनिमेशन, लोडिंग इंडिकेटर, सजावटी तत्व — ये सभी UIView के ओवरहेड से बचते हुए, CALayer के माध्यम से अधिक कुशलता से कार्यान्वित किए जाते हैं।

CALayer की मुख्य प्रॉपर्टीज़

मूल प्रॉपर्टीज़ में frame, पोज़िशनिंग, डिस्प्ले और विज़ुअल इफ़ेक्ट शामिल हैं। frame पैरेंट कोऑर्डिनेट में लेयर के आयताकार क्षेत्र को परिभाषित करता है, bounds आंतरिक कोऑर्डिनेट को परिभाषित करता है, और position लेयर के केंद्र को परिभाषित करता है। position का परिवर्तन डिफ़ॉल्ट रूप से इम्प्लिसिट एनिमेशन के माध्यम से एनिमेट होता है।

• backgroundColor — लेयर का पृष्ठभूमि रंग (CGColor)। opaque = true के साथ अपारदर्शी रंग सेट करना अल्फ़ा ब्लेंडिंग को समाप्त करता है।
• cornerRadius — कोनों को गोल करना। बिना अतिरिक्त रेंडरिंग पास के हार्डवेयर-प्रोसेस्ड।
• borderWidth और borderColor — लेयर बॉर्डर। GPU पर रेंडर होता है, drawRect की आवश्यकता नहीं।
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — छाया। एक स्पष्ट shadowPath रेंडरिंग को काफी तेज करता है।
• opacity — लेयर की पारदर्शिता 0.0 से 1.0 तक। drawRect को कॉल किए बिना एनिमेट होती है।
• transform — 2D और 3D ट्रांसफ़ॉर्मेशन के लिए CATransform3D। परिप्रेक्ष्य विकृतियों का समर्थन करता है।

contents प्रॉपर्टी सीधे बिटमैप कंटेंट सेट करने की अनुमति देती है — CGImage या CIImage के माध्यम से। यह drawRect के माध्यम से ड्रॉइंग का एक विकल्प है: यदि इमेज पहले से तैयार है, तो इसे contents में पास किया जा सकता है, और Core Animation इसे बिना अतिरिक्त प्रोसेसिंग के रेंडर करेगा।

एनिमेशन के लिए CABasicAnimation, CAKeyframeAnimation और CATransition का उपयोग किया जाता है। ये सभी क्लास CALayer प्रॉपर्टी key paths के माध्यम से काम करते हैं, जो लगभग किसी भी एट्रीब्यूट को एनिमेट करने की अनुमति देते हैं — position से लेकर transform.rotation.z तक।

CALayer सबक्लास और उनका उद्देश्य

Apple कई विशेष CALayer सबक्लास प्रदान करता है, प्रत्येक एक विशिष्ट कार्य को हल करता है। बेस CALayer के बजाय उपयुक्त सबक्लास चुनना हार्डवेयर त्वरण के माध्यम से महत्वपूर्ण प्रदर्शन सुधार प्रदान कर सकता है।

• CAShapeLayer — GPU पर वेक्टर आकृतियाँ (CGPath) रेंडर करता है। एक अलग बफ़र की आवश्यकता नहीं — आकृति पैरेंट लेयर कम्पोज़िशन के भाग के रूप में रेंडर होती है।
• CATextLayer — सबपिक्सल एंटी-अलियासिंग के साथ टेक्स्ट रेंडरिंग। ग्लिफ़ को कैश करता है, बार-बार टेक्स्ट प्रदर्शन को तेज करता है।
• CAGradientLayer — लीनियर और रेडियल ग्रेडिएंट। मध्यवर्ती इमेज उत्पन्न किए बिना हार्डवेयर रेंडरिंग।
• CAEmitterLayer — GPU पर पार्टिकल सिस्टम। प्रत्येक कण CPU भागीदारी के बिना एक अलग तत्व के रूप में रेंडर होता है।
• CAReplicatorLayer — स्थिति, रंग और समय में कॉन्फ़िगरेबल ऑफ़सेट के साथ चाइल्ड लेयर कॉपी का स्वचालित निर्माण।
• CATiledLayer — टाइल्स द्वारा बड़ी इमेज रेंडरिंग। केवल दृश्य भागों को लोड और प्रदर्शित करता है।

CAReplicatorLayer कोड डुप्लिकेशन के बिना दोहराए जाने वाले पैटर्न बनाने के लिए विशेष रूप से उपयोगी है। उदाहरण के लिए, 10 डॉट्स वाला लोडिंग इंडिकेटर instanceCount = 10 और एनिमेशन समय ऑफ़सेट instanceDelay के साथ एक CAReplicatorLayer के साथ कार्यान्वित किया जाता है।

CALayer रेंडरिंग और कम्पोज़िशन

CALayer रेंडरिंग तीन चरणों में होती है। Commit — जब लेयर प्रॉपर्टी बदलती है, तो CPU पर परिवर्तनों का एक बैच बनता है। Render — Core Animation लेयर प्रॉपर्टीज़ के आधार पर CPU पर Metal कमांड जेनरेट करता है। Composite — GPU कमांड निष्पादित करता है और फ़्रेम को स्क्रीन पर आउटपुट करता है। पूरी प्रक्रिया डिस्प्ले रिफ़्रेश रेट के साथ सिंक्रनाइज़ होती है।

एकाधिक लेयर्स के कम्पोज़िशन के दौरान, GPU पारदर्शिता, मास्क और ब्लेंडिंग मोड को ध्यान में रखते हुए उन्हें अंतिम इमेज में मर्ज करता है। यदि लेयर में opaque = true है, तो Core Animation कम्पोज़िशन को ऑप्टिमाइज़ करता है: अल्फ़ा ब्लेंडिंग के बजाय सरल पिक्सेल रिप्लेसमेंट किया जाता है, जो काफी तेज़ है।

Apple Performance Guidelines के अनुसार, CALayer रेंडरिंग को धीमा करने वाले मुख्य कारक हैं: जटिल sublayer पदानुक्रम (स्क्रीन पर 30 से अधिक लेयर), मास्क का उपयोग (mask प्रॉपर्टी), shadowPath के बिना स्वचालित छाया गणना, और डायनामिक लेयर्स के लिए shouldRasterize का अत्यधिक उपयोग।

XCode में Core Animation Instrument प्रत्येक लेयर के रेंडरिंग समय, ऑफ़स्क्रीन बफ़र काउंट और drawRect कॉल आवृत्ति की निगरानी करने की अनुमति देता है। 60 FPS के लिए इष्टतम रेंडरिंग समय CPU पर 8 ms और GPU पर 8 ms से अधिक नहीं है।

ऑफ़स्क्रीन रेंडरिंग और इसका प्रभाव

ऑफ़स्क्रीन रेंडरिंग — स्क्रीन पर प्रदर्शित करने से पहले एक मध्यवर्ती बफ़र में लेयर रेंडर करना। कंटेंट के साथ cornerRadius + masksToBounds, ग्रुप opacity, मास्क और shouldRasterize का उपयोग करने पर होता है। प्रत्येक ऑफ़स्क्रीन पास में 2–5 ms लगते हैं, इसलिए अत्यधिक ऑफ़स्क्रीन रेंडरिंग प्रदर्शन के लिए महत्वपूर्ण है।

ऑफ़स्क्रीन रेंडरिंग के निदान के लिए, Core Animation Instrument में Color Offscreen-Rendered टूल का उपयोग करें। पीली लेयर — ऑफ़स्क्रीन, नीली — सीधी स्क्रीन रेंडरिंग। ऑफ़स्क्रीन पास को कम करना iOS में एक प्रमुख ऑप्टिमाइज़ेशन तकनीक है।

कोड उदाहरण: Swift में CALayer के साथ काम करना

पहला उदाहरण छाया निर्माण, कोने को गोल करने और बॉर्डर के साथ बुनियादी 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
}

दूसरा उदाहरण परिप्रेक्ष्य 3D ट्रांसफ़ॉर्मेशन के साथ CABasicAnimation के माध्यम से transform एनिमेशन दिखाता है। 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)
}