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 क्लीनर विज़ुअल के लिए लाइन के गोल सिरे जोड़ता है।