CAShapeLayer — यह क्या है, गुण और आकार बनाना

CAShapeLayer क्या है?

CAShapeLayer वेक्टर ग्राफिक्स रेंडर करने के लिए एक विशेष परत है, जिसे iOS 3.0 में पेश किया गया था। CALayer के विपरीत, जो रास्टर इमेज संग्रहीत करता है, CAShapeLayer पथ का गणितीय विवरण — CGPath — संग्रहीत करता है और इसे सीधे GPU पर रेंडर करता है। यह आकार को गुणवत्ता खोए बिना स्केल करने और सामग्री को पुनः चित्रित किए बिना इसके गुणों को एनिमेट करने की अनुमति देता है।

आर्किटेक्चरल रूप से, CAShapeLayer CALayer की सभी क्षमताओं को प्राप्त करता है: छाया, सीमाएं, रूपांतरण, मास्क। लेकिन यह पथों के साथ काम करने के लिए विशिष्ट गुण जोड़ता है: path, fillColor, strokeColor, lineWidth, lineCap, lineJoin, miterLimit, strokeStart, strokeEnd और fillRule। इनमें से प्रत्येक गुण को CABasicAnimation के माध्यम से एनिमेट किया जा सकता है।

Apple Documentation के अनुसार, CAShapeLayer रेंडरिंग के लिए हार्डवेयर त्वरण का उपयोग करता है। drawRect: में Core Graphics के माध्यम से ड्राइंग के विपरीत, जहां CPU पथ को रास्टर संदर्भ में रेंडर करता है, CAShapeLayer Metal के माध्यम से सीधे GPU को कमांड भेजता है। परिणाम उच्च प्रदर्शन है, विशेष रूप से एनिमेशन के दौरान।

CAShapeLayer विशेष रूप से इंटरफ़ेस तत्वों के लिए उपयोगी है जो उपयोगकर्ता क्रियाओं के जवाब में आकार बदलते हैं: प्रगति संकेतक, चार्ट, टैब बार आइकन, सामग्री प्रकटीकरण एनिमेशन के लिए मास्क।

CAShapeLayer GPU पर पथ कैसे रेंडर करता है

CAShapeLayer की रेंडरिंग प्रक्रिया मूल CALayer से भिन्न होती है। पिक्सल के साथ रास्टर बफर संग्रहीत करने के बजाय, CAShapeLayer GPU को पथ का एक वर्टेक्स विवरण भेजता है — बिंदुओं, बेज़ियर वक्रों और रेखा खंडों का एक सेट। GPU इस पथ को एक ही पास में रास्टराइज़ करता है, फ्रैगमेंट शेडर चरण में भरण और स्ट्रोक रंग लागू करता है।

यह दृष्टिकोण दो लाभ प्रदान करता है: गुणवत्ता खोए बिना स्केलिंग (वेक्टर ग्राफिक्स किसी भी रिज़ॉल्यूशन पर तेज रहते हैं) और कुशल एनिमेशन — जब पथ बदलता है, GPU केवल बदले हुए पिक्सल की पुनर्गणना करता है, पूरी स्क्रीन की नहीं।

CAShapeLayer के मुख्य गुण

path — CAShapeLayer का केंद्रीय गुण, जो CGPath स्वीकार करता है। पथ में रेखाएं, चाप, बेज़ियर वक्र और आयत शामिल हो सकते हैं। यह Swift में UIBezierPath या Core Graphics में CGPath के माध्यम से बनाया जाता है। उदाहरण: UIBezierPath(roundedRect: rect, cornerRadius: 16).cgPath एक गोलाकार आयत बनाता है।

• fillColor — बंद पथ का भरण रंग (CGColor)। यदि nil है, तो कोई भरण नहीं। एनिमेशन का समर्थन करता है।
• strokeColor — पथ का स्ट्रोक रंग। lineWidth के साथ एनिमेट होता है, पथ ड्राइंग प्रभाव बनाता है।
• lineWidth — बिंदुओं में स्ट्रोक लाइन की चौड़ाई। डिफ़ॉल्ट 1.0 है। एनिमेट किया जा सकता है।
• lineCap — लाइन के अंत की शैली: .butt (सीधा कट), .round (गोल), .square (उभार के साथ आयताकार)।
• lineJoin — लाइन जुड़ने की शैली: .miter (तीव्र कोण), .round (गोल), .bevel (कटा हुआ)।
• strokeStart और strokeEnd — 0.0 से 1.0 तक पथ का खींचा गया अंश। strokeEnd को एनिमेट करना क्रमिक प्रकटीकरण प्रभाव बनाता है।
• fillRule — प्रतिच्छेदी पथों के लिए भरण नियम: .nonZero (डिफ़ॉल्ट) या .evenOdd।
• miterLimit — lineJoin = .miter होने पर अधिकतम माइटर लंबाई। अनंत लंबे कोनों को रोकता है।

lineDashPattern गुण धराशायी रेखाएं बनाने की अनुमति देता है। यह संख्याओं की एक सरणी स्वीकार करता है: [6, 3] का अर्थ है 6 बिंदु डैश और 3 बिंदु गैप। lineDashPhase पैटर्न ऑफसेट सेट करता है और चलते डैश प्रभाव के लिए एनिमेट किया जा सकता है।

CAShapeLayer बनाम CALayer: कब किसे चुनें

CAShapeLayer और मूल CALayer के बीच चुनाव सामग्री के प्रकार पर निर्भर करता है। यदि तत्व पृष्ठभूमि, सीमा और छाया वाला आयताकार क्षेत्र है — CALayer पर्याप्त है। यदि तत्व का मनमाना आकार है, पथ एनिमेशन या गुणवत्ता हानि रहित स्केलिंग की आवश्यकता है — CAShapeLayer बेहतर है।

प्रदर्शन भी भिन्न होता है। cornerRadius और masksToBounds वाला CALayer सामग्री क्लिपिंग के लिए ऑफस्क्रीन बफर बनाता है, जो प्रति फ्रेम 2–5 मिलीसेकंड जोड़ता है। CAShapeLayer को ऑफस्क्रीन बफर की आवश्यकता नहीं होती — क्लिपिंग वर्टेक्स शेडर स्तर पर की जाती है। जटिल मास्क वाले तत्वों के लिए, CAShapeLayer 2–3 गुना तेज़ हो सकता है।

• CALayer: आयताकार तत्व, फ़ोटो, वीडियो, गोल कोनों वाली सामग्री (cornerRadius), छाया, सीमाएं।
• CAShapeLayer: आइकन, चार्ट, प्रगति बार, मनमाने आकार के मास्क, एनिमेटेड पथ, प्रकटीकरण एनिमेशन आकार।
• CATextLayer: सबपिक्सल रेंडरिंग और ग्लिफ कैशिंग की आवश्यकता वाला टेक्स्ट।
• CAGradientLayer: ग्रेडिएंट भरण — ग्रेडिएंट के साथ आकार बनाने के लिए mask के माध्यम से CAShapeLayer के साथ संयुक्त।

CAShapeLayer को अन्य परतों के साथ संयोजित करना एक सामान्य पैटर्न है। उदाहरण के लिए, CAGradientLayer ग्रेडिएंट भरण के साथ आकार बनाने के लिए CAShapeLayer को मास्क के रूप में उपयोग करता है। यह दृष्टिकोण प्रदर्शन हानि के बिना वेक्टर गुणवत्ता और ग्रेडिएंट भरण दोनों प्रदान करता है।

CAShapeLayer एनिमेशन: path और stroke

पथ एनिमेशन CAShapeLayer की सबसे शक्तिशाली विशेषताओं में से एक है। यदि दोनों पथों (प्रारंभिक और अंतिम) में समान संख्या में नियंत्रण बिंदु और खंड हैं, तो Core Animation उनके बीच सहज प्रक्षेप करता है। परिणाम एक आकार का दूसरे में रूपांतरण प्रभाव है।

पथ संगतता शर्त: प्रारंभिक और अंतिम UIBezierPath की संरचना समान होनी चाहिए — moveTo, addLine, addCurve और addQuadCurve कॉल की संख्या मेल खानी चाहिए। यदि संरचना भिन्न है, तो एनिमेशन बिना प्रक्षेप के तुरंत होगा।

Apple WWDC 2024 के अनुसार, strokeStart और strokeEnd का संयोजन सबसे अधिक उपयोग किया जाने वाला CAShapeLayer एनिमेशन पैटर्न है। strokeEnd को 0.0 से 1.0 तक एनिमेट करना शुरू से अंत तक पथ ड्राइंग प्रभाव बनाता है। इसका उपयोग लोडिंग संकेतकों, चार्ट प्रकटीकरण एनिमेशन और कस्टम स्क्रीन ट्रांज़िशन में किया जाता है।

स्पंदन प्रभाव बनाने के लिए, विभिन्न टाइमिंग फ़ंक्शन के साथ strokeEnd और opacity को एक साथ एनिमेट करें। चलती चींटियों के प्रभाव के लिए, निश्चित lineDashPattern के साथ lineDashPhase को एनिमेट करें। दोनों तकनीकें CPU भागीदारी के बिना CABasicAnimation के माध्यम से कार्यान्वित की जाती हैं।

मास्क के रूप में एनिमेशन

CAShapeLayer अक्सर अन्य परतों के लिए मास्क के रूप में उपयोग किया जाता है। उदाहरण के लिए, सामग्री प्रकटीकरण एनिमेशन के लिए: प्रारंभ में, mask.path शून्य आकार का आयत है, और अंतिम पूर्ण आकार का है। Core Animation पथ का प्रक्षेप करता है, और सामग्री सहजता से प्रकट होती है।

इस पैटर्न का उपयोग iOS में कार्ड विस्तार एनिमेशन, मोडल विंडो प्रस्तुति और व्यू कंट्रोलर ट्रांज़िशन के लिए किया जाता है। अल्फा एनिमेशन के विपरीत, CAShapeLayer मास्क एनिमेशन मनमाने आकारों के साथ अधिक प्राकृतिक प्रकटीकरण प्रभाव प्रदान करता है।

Swift में CAShapeLayer के साथ कोड उदाहरण

पहला उदाहरण — strokeEnd एनिमेशन के साथ गोलाकार प्रगति संकेतक बनाना। यह एक मानक UI तत्व है जो CAShapeLayer की मुख्य क्षमताओं को प्रदर्शित करता है:

func createProgressIndicator(in view: UIView) -> CAShapeLayer {
    let circlePath = UIBezierPath(
        arcCenter: CGPoint(x: 50, y: 50),
        radius: 40,
        startAngle: -.pi / 2,
        endAngle: 3 * .pi / 2,
        clockwise: true
    )

    let trackLayer = CAShapeLayer()
    trackLayer.path = circlePath.cgPath
    trackLayer.strokeColor = UIColor.systemGray5.cgColor
    trackLayer.fillColor = nil
    trackLayer.lineWidth = 8
    view.layer.addSublayer(trackLayer)

    let progressLayer = CAShapeLayer()
    progressLayer.path = circlePath.cgPath
    progressLayer.strokeColor = UIColor.systemBlue.cgColor
    progressLayer.fillColor = nil
    progressLayer.lineWidth = 8
    progressLayer.lineCap = .round
    progressLayer.strokeEnd = 0
    view.layer.addSublayer(progressLayer)

    return progressLayer
}

// 75% तक एनिमेट करें
progressLayer.animateStrokeEnd(to: 0.75, duration: 1.5)

दूसरा उदाहरण — वृत्त और वर्ग के बीच रूपांतरण एनिमेशन। दोनों UIBezierPath की संरचना संगत है:

let morphLayer = CAShapeLayer()
morphLayer.fillColor = UIColor.systemPurple.cgColor
morphLayer.frame = rect

let circlePath = UIBezierPath(roundedRect: rect, cornerRadius: rect.width / 2)
let squarePath = UIBezierPath(roundedRect: rect, cornerRadius: 0)
morphLayer.path = circlePath.cgPath

let morphAnimation = CABasicAnimation(keyPath: "path")
morphAnimation.toValue = squarePath.cgPath
morphAnimation.duration = 0.6
morphAnimation.autoreverses = true
morphAnimation.repeatCount = .infinity
morphLayer.add(morphAnimation, forKey: "morph")

तीसरा उदाहरण — सामग्री प्रकटीकरण एनिमेशन के लिए CAShapeLayer मास्क। मास्क केंद्र से किनारों तक फैलता है:

func revealContent(_ view: UIView) {
    let maskLayer = CAShapeLayer()
    let size = view.bounds.size.width * 1.5
    let center = CGPoint(x: view.bounds.midX, y: view.bounds.midY)

    let initialPath = UIBezierPath(arcCenter: center, radius: 0, startAngle: 0, endAngle: .pi * 2, clockwise: true)
    let finalPath = UIBezierPath(arcCenter: center, radius: size, startAngle: 0, endAngle: .pi * 2, clockwise: true)

    maskLayer.path = initialPath.cgPath
    view.layer.mask = maskLayer

    let animation = CABasicAnimation(keyPath: "path")
    animation.toValue = finalPath.cgPath
    animation.duration = 0.4
    animation.timingFunction = CAMediaTimingFunction(name: .easeOut)
    maskLayer.add(animation, forKey: "reveal")
    maskLayer.path = finalPath.cgPath
}