Core Animation: মৌলিক বিষয়, CALayer এবং iOS-এ অ্যানিমেশন

Core Animation কী?

Core Animation হল Apple-এর গ্রাফিক্স ফ্রেমওয়ার্ক যা Mac OS X 10.5 Leopard (2007)-এ প্রবর্তিত এবং iPhone OS (2007)-এর প্রথম সংস্করণের সাথে iOS-এ পোর্ট করা হয়েছে। Core Animation GPU-তে স্তরগুলির (CALayer) কম্পোজিশন, অ্যানিমেশন এবং রেন্ডারিং পরিচালনা করে। iOS-এর প্রতিটি UIView-এ একটি অন্তর্নির্মিত CALayer (view.layer) রয়েছে যার মাধ্যমে সমস্ত অঙ্কন ঘটে।

Core Animation implicit animation-এর নীতিতে কাজ করে: কিছু CALayer প্রপার্টি পরিবর্তন স্বয়ংক্রিয়ভাবে অ্যানিমেট হয় (position, bounds, opacity, backgroundColor-এর জন্য CABasicAnimation)। ইমপ্লিসিট অ্যানিমেশন ডিফল্টভাবে 0.25 সেকেন্ড সময়কাল এবং easeInOut কার্ভ সহ CATransaction ব্যবহার করে।

Apple WWDC 2024 অনুযায়ী, Core Animation ProMotion ডিভাইসে 120 FPS পর্যন্ত প্রক্রিয়া করে, GPU রেন্ডারিংয়ের জন্য Metal ব্যবহার করে। একটি সাধারণ স্তরের মেমরি ফুটপ্রিন্ট হল 4 বাইট প্রতি পিক্সেল (RGBA) + ~100 বাইট ওভারহেড প্রতি স্তর। স্থিতিশীল 60 FPS-এর জন্য স্ক্রিনে 1000-এর বেশি স্তর না রাখার সুপারিশ করা হয়।

CALayer আর্কিটেকচার

CALayer Core Animation-এর ভিত্তি। প্রতিটি CALayer-এ বিটম্যাপ কন্টেন্ট (বা GPU টেক্সচার রেফারেন্স) থাকে এবং জ্যামিতি (bounds, position, anchorPoint, transform, cornerRadius, borderWidth, shadow) সংজ্ঞায়িত করে। স্তরগুলি স্পর্শ ইভেন্টগুলি পরিচালনা করে না — UIView/UIScrollView তা পরিচালনা করে। স্তরগুলি একটি শ্রেণিবিন্যাস (layer tree) গঠন করে যা ভিউ শ্রেণিবিন্যাসকে প্রতিফলিত করে।

Core Animation তিনটি স্তর ট্রি বজায় রাখে: model layer tree (প্রকৃত প্রপার্টি), presentation layer tree (অ্যানিমেশনের সময় বর্তমান প্রদর্শন) এবং render tree (GPU ডেটা)। প্রেজেন্টেশন লেয়ার রিয়েল-টাইমে মধ্যবর্তী অ্যানিমেশন মান পড়তে ব্যবহার করা হয়।

CALayer-এর প্রকার

CALayer-এর বিশেষায়িত সাবক্লাস রয়েছে: CAShapeLayer (ভেক্টর গ্রাফিক্স), CAGradientLayer (গ্রেডিয়েন্ট), CATextLayer (টেক্সট), CATiledLayer (টাইলসে বিভক্ত বড় ছবি), CAEAGLLayer/MetalLayer (OpenGL/Metal)। কাস্টম অ্যানিমেশনের জন্য CAShapeLayer সবচেয়ে জনপ্রিয় CGPath সমর্থন এবং strokeStart/strokeEnd অ্যানিমেশনের কারণে।

CABasicAnimation — মৌলিক প্রপার্টি অ্যানিমেশন

CABasicAnimation CAAnimation-এর একটি সাবক্লাস যা একটি CALayer প্রপার্টিকে প্রারম্ভিক মান (fromValue) থেকে চূড়ান্ত মান (toValue) বা আপেক্ষিক পরিবর্তন (byValue) দ্বারা অ্যানিমেট করে। অ্যানিমেশন layer.add(animation, forKey:)-এর মাধ্যমে স্তরে যোগ করা হয় এবং প্রতিটি ফ্রেমে অ্যাপের অংশগ্রহণ ছাড়াই রেন্ডার সার্ভারে চলে।

কী (keyPath) একটি স্ট্রিং যা প্রপার্টি নির্দিষ্ট করে: opacity, position, bounds, transform.rotation.z, cornerRadius, shadowOpacity ইত্যাদি। Core Animation 60+ অ্যানিমেটেবল keyPaths সমর্থন করে। কাস্টম প্রপার্টির জন্য CATransaction এবং প্রেজেন্টেশন লেয়ার ব্যবহার করা হয়।

import QuartzCore

// opacity এবং cornerRadius-এর জন্য CABasicAnimation
func animateLayer() {
    let layer = CALayer()
    layer.frame = CGRect(x: 50, y: 50, width: 100, height: 100)
    layer.backgroundColor = UIColor.systemBlue.cgColor
    view.layer.addSublayer(layer)

    // 1. স্বচ্ছতা অ্যানিমেশন
    let fadeAnim = CABasicAnimation(keyPath: "opacity")
    fadeAnim.fromValue = 1.0
    fadeAnim.toValue = 0.2
    fadeAnim.duration = 2.0
    fadeAnim.autoreverses = true
    fadeAnim.repeatCount = .infinity

    // 2. কোণ ব্যাসার্ধ অ্যানিমেশন
    let cornerAnim = CABasicAnimation(keyPath: "cornerRadius")
    cornerAnim.fromValue = 0
    cornerAnim.toValue = 50
    cornerAnim.duration = 2.0
    cornerAnim.autoreverses = true
    cornerAnim.repeatCount = .infinity

    layer.add(fadeAnim, forKey: "fade")
    layer.add(cornerAnim, forKey: "corner")
}

// ease-in-out সহ position অ্যানিমেশন
func moveLayer(_ layer: CALayer, to point: CGPoint) {
    let anim = CABasicAnimation(keyPath: "position")
    anim.fromValue = NSValue(cgPoint: layer.position)
    anim.toValue = NSValue(cgPoint: point)
    anim.duration = 0.6
    anim.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
    anim.isRemovedOnCompletion = false
    anim.fillMode = .forwards
    layer.add(anim, forKey: "move")
    layer.position = point // model layer আপডেট করা
}

গুরুত্বপূর্ণ: CABasicAnimation একটি অস্থায়ী প্রদর্শন (presentation layer)। অ্যানিমেশন সম্পূর্ণ হওয়ার পর, স্তরটি তার model layer মানগুলিতে ফিরে আসে। চূড়ান্ত অবস্থা স্থির করতে, isRemovedOnCompletion = false, fillMode = .forwards সেট করুন এবং model layer-কে চূড়ান্ত মানগুলিতে আপডেট করুন।

CATransaction — অ্যানিমেশন গ্রুপিং

CATransaction Core Animation অ্যানিমেশনগুলিকে একটি একক লেনদেনে গ্রুপ করার প্রক্রিয়া। CATransaction.begin() এবং CATransaction.commit() লেনদেনের সীমানা নির্ধারণ করে। একটি লেনদেনের ভিতরে ভাগ করা প্যারামিটার সেট করা যেতে পারে: duration, timingFunction, completionBlock, disableActions। CATransaction CALayer ইমপ্লিসিট অ্যানিমেশনের ভিত্তি।

ইমপ্লিসিট অ্যানিমেশন ঘটে যখন CALayer প্রপার্টি অ্যানিমেশন ব্লকের বাইরে পরিবর্তিত হয়: layer.opacity = 0.5। Core Animation স্বয়ংক্রিয়ভাবে বর্তমান CATransaction (ডিফল্ট 0.25 s) থেকে সময়কাল সহ CABasicAnimation তৈরি করে। ইমপ্লিসিট অ্যানিমেশন অক্ষম করতে, CATransaction.setDisableActions(true) ব্যবহার করুন।

// CATransaction — গ্রুপিং এবং সমাপ্তি
func groupedAnimation() {
    CATransaction.begin()
    CATransaction.setAnimationDuration(1.5)
    CATransaction.setAnimationTimingFunction(
        CAMediaTimingFunction(name: .easeOut)
    )
    CATransaction.setCompletionBlock {
        print("All animations completed")
    }

    // লেনদেনের ভিতরে সমস্ত পরিবর্তন সময়কাল 1.5 সহ অ্যানিমেট হয়
    layer1.opacity = 0.3
    layer2.position = CGPoint(x: 200, y: 300)
    layer3.backgroundColor = UIColor.systemRed.cgColor

    CATransaction.commit()
}

// ইমপ্লিসিট অ্যানিমেশন নিষ্ক্রিয় করা
func updateWithoutAnimation() {
    CATransaction.begin()
    CATransaction.setDisableActions(true)
    layer.frame = newFrame // অ্যানিমেশন ছাড়া
    CATransaction.commit()
}

// CAShapeLayer প্রপার্টি অ্যানিমেট করা
func animateProgress(percentage: CGFloat) {
    CATransaction.begin()
    CATransaction.setAnimationDuration(0.8)
    CATransaction.setCompletionBlock {
        print("Progress updated to (percentage)%")
    }
    progressLayer.strokeEnd = percentage / 100.0
    CATransaction.commit()
}

Swift কোড উদাহরণ

Core Animation UIView স্তরের মাধ্যমে UIKit-এর সাথে সংহত হয়। নীচের উদাহরণটি CAShapeLayer অ্যানিমেশন প্রদর্শন করে — চাপ দৈর্ঘ্য অ্যানিমেশন এবং CABasicAnimation-এর মাধ্যমে স্তর ঘূর্ণন সহ একটি বৃত্তাকার অগ্রগতি।

import UIKit
import QuartzCore

class CircularProgressView: UIView {

    private let progressLayer = CAShapeLayer()

    override func layoutSubviews() {
        super.layoutSubviews()

        let path = UIBezierPath(
            arcCenter: CGPoint(x: bounds.midX, y: bounds.midY),
            radius: bounds.width / 2 - 10,
            startAngle: -.pi / 2,
            endAngle: 3 * .pi / 2,
            clockwise: true
        )

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

    func setProgress(_ value: CGFloat, animated: Bool = true) {
        if animated {
            CATransaction.begin()
            CATransaction.setAnimationDuration(0.6)
            CATransaction.setAnimationTimingFunction(
                CAMediaTimingFunction(name: .easeOut)
            )
            progressLayer.strokeEnd = min(max(value, 0), 1)
            CATransaction.commit()
        } else {
            progressLayer.strokeEnd = value
        }
    }
}

CAShapeLayer strokeEnd প্রপার্টি 0 থেকে 1 পর্যন্ত অ্যানিমেট করে, একটি বৃত্তাকার অগ্রগতি “পূরণ” প্রভাব তৈরি করে। সময়কাল 0.6 এবং easeOut সহ CATransaction অ্যানিমেশনকে মসৃণ করে। layer.lineCap = .round পরিষ্কার ভিজুয়ালের জন্য লাইনের গোলাকার প্রান্ত যোগ করে।