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
}