Core Animation: بنیادی باتیں، CALayer اور iOS میں اینیمیشن

Core Animation کیا ہے؟

Core Animation ایپل کا گرافکس فرام ورک ہے جو Mac OS X 10.5 Leopard (2007) میں متعارف ہوا اور iPhone OS (2007) کے پہلے ورشن کے ساتھ iOS پر لایا گیا۔ Core Animation GPU پر پرتوں (CALayer) کی ترکیب، اینیمیشن اور رنڈرنگ کو منتظم کرتا ہے۔ iOS میں ہر UIView میں ایک بنا ہوا CALayer (view.layer) ہے جس کے ذریعے سارا ڈرائنگ ہوتا ہے۔

Core 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 اور presentation layer استعمال کی جاتی ہے۔

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 صاف ظاہری کے لئے لائین کے گول سرے شامل کرتا ہے۔