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 প্রপার্টি কী পাথের মাধ্যমে কাজ করে, যা প্রায় যেকোনো অ্যাট্রিবিউট অ্যানিমেট করার অনুমতি দেয় — 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)
}