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
}