CAAnimation — मुख्य अवधारणाएँ, CAAnimationGroup और लेयर एनिमेशन

CAAnimation क्या है?

CAAnimation Core Animation का एक अमूर्त वर्ग है जो सभी एनिमेशन के लिए सामान्य इंटरफ़ेस परिभाषित करता है। यह CAMediaTiming प्रोटोकॉल (अवधि, दोहराव, स्वत: उलट) और CAMediaTimingFillMode (एनिमेशन से पहले/बाद का व्यवहार) को लागू करता है। CAAnimation को सीधे इंस्टेंशिएट नहीं किया जा सकता — इसके उपवर्गों में से एक का उपयोग करें: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition या CAAnimation (animationForKeyPath के माध्यम से)।

प्रत्येक CAAnimation को add(_:forKey:) विधि के माध्यम से CALayer में जोड़ा जाता है। forKey पैरामीटर लेयर पर एनिमेशन का एक अद्वितीय पहचानकर्ता है। एक keyPath में केवल एक सक्रिय एनिमेशन हो सकता है। एनिमेशन बदलने के लिए, नया जोड़ने से पहले removeAnimation(forKey:) का उपयोग करें।

Apple के अनुसार, CAAnimation लेयर में एक "अस्थायी" परिवर्तन है। एनिमेशन पूरा होने के बाद, प्रस्तुति लेयर मॉडल लेयर मानों पर वापस आ जाती है यदि fillMode और isRemovedOnCompletion सेट नहीं हैं।

CAAnimation वर्ग पदानुक्रम

Core Animation चार मुख्य CAAnimation उपवर्ग प्रदान करता है, प्रत्येक अपने स्वयं के एनिमेशन परिदृश्य के लिए। पदानुक्रम को समझने से कार्य के लिए सही प्रकार चुनने में मदद मिलती है।

CABasicAnimation सबसे सरल और लोकप्रिय उपवर्ग है। CAKeyframeAnimation जटिल प्रक्षेपवक्रों के लिए उपयोग किया जाता है (जैसे, Bezier वक्र के साथ गति)। CAAnimationGroup कई एनिमेशन को समानांतर में चलाता है। CATransition छवियों या सामग्री अवस्थाओं के बीच एक तैयार संक्रमण है।

CAMediaTiming — समय प्रबंधन

CAMediaTiming प्रोटोकॉल CAAnimation का एक मूलभूत हिस्सा है। यह बुनियादी समय गुणों को परिभाषित करता है: duration, repeatCount, repeatDuration, autoreverses, beginTime (मूल के सापेक्ष प्रारंभ समय), timeOffset (एक चक्र के भीतर ऑफ़सेट), speed (प्लेबैक दर)।

fillMode गुण (CAMediaTimingFillMode) एनिमेशन से पहले (backwards) और बाद (forwards) लेयर प्रदर्शन निर्धारित करता है। मान: removed (डिफ़ॉल्ट — मॉडल लेयर पर वापस), forwards (अंतिम स्थिति में रहता है), backwards (शुरू होने से पहले प्रारंभिक स्थिति दिखाता है), both (दोनों व्यवहारों को जोड़ता है)। fillMode केवल तभी काम करता है जब isRemovedOnCompletion = false हो।

CAAnimation CAMediaTiming से विरासत प्राप्त करता है और इसे मूल एनिमेशन (CAAnimationGroup) में नेस्ट किया जा सकता है। इस मामले में, beginTime मूल की शुरुआत के सापेक्ष गणना की जाती है, और duration मूल की अवधि द्वारा सीमित होती है। Speed = 2.0 एनिमेशन की गति को दोगुना करता है।

CAAnimationGroup और CAKeyframeAnimation

CAAnimationGroup कई CAAnimation इंस्टेंस को एक समूह में जोड़ता है। सभी चाइल्ड एनिमेशन समानांतर में शुरू होते हैं जब तक कि प्रत्येक के लिए beginTime सेट न किया गया हो। समूह का अपना duration होता है, जो चाइल्ड एनिमेशन की अधिकतम अवधि को सीमित करता है। समूह का timingFunction डिफ़ॉल्ट मान के रूप में उपयोग किया जाता है यदि चाइल्ड एनिमेशन अपना स्वयं का सेट नहीं करता है।

CAKeyframeAnimation एक गुण को कई कीफ़्रेमों पर एनिमेट करता है, जो मानों की सरणी द्वारा परिभाषित होते हैं। keyTimes पैरामीटर (0 से 1 तक NSNumber की सरणी) प्रत्येक फ्रेम के लिए समय टिकटों को परिभाषित करता है। calculationMode इंटरपोलेशन निर्दिष्ट करता है: linear, discrete (कोई इंटरपोलेशन नहीं), paced (समान गति), cubic (स्प्लाइन), cubicPaced।

import QuartzCore

// CAAnimationGroup — एनिमेशन संयोजन
func complexLayerAnimation(_ layer: CALayer) {
    let fade = CABasicAnimation(keyPath: "opacity")
    fade.fromValue = 1.0
    fade.toValue = 0.3

    let scale = CABasicAnimation(keyPath: "transform.scale")
    scale.fromValue = 1.0
    scale.toValue = 1.5

    let rotate = CABasicAnimation(keyPath: "transform.rotation.z")
    rotate.fromValue = 0
    rotate.toValue = Double.pi * 2

    let group = CAAnimationGroup()
    group.animations = [fade, scale, rotate]
    group.duration = 2.0
    group.repeatCount = .infinity
    group.autoreverses = true

    layer.add(group, forKey: "pulse")
}

// CAKeyframeAnimation — प्रक्षेपवक्र गति
func animateAlongPath(_ layer: CALayer) {
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addCurve(
        to: CGPoint(x: 200, y: 300),
        controlPoint1: CGPoint(x: 100, y: 0),
        controlPoint2: CGPoint(x: 100, y: 300)
    )

    let anim = CAKeyframeAnimation(keyPath: "position")
    anim.path = path.cgPath
    anim.duration = 1.5
    anim.calculationMode = .cubicPaced
    anim.rotationMode = .auto
    anim.fillMode = .forwards
    anim.isRemovedOnCompletion = false

    layer.add(anim, forKey: "pathAnim")
    layer.position = CGPoint(x: 200, y: 300)
}

// CAKeyframeAnimation कस्टम मानों के साथ
func bounceAnimation(_ layer: CALayer) {
    let bounce = CAKeyframeAnimation(keyPath: "position.y")
    bounce.values = [0, -50, 0, -25, 0, -10, 0]
    bounce.keyTimes = [0, 0.15, 0.3, 0.45, 0.6, 0.8, 1.0]
    bounce.duration = 0.8
    bounce.timingFunction = CAMediaTimingFunction(name: .easeOut)
    bounce.isAdditive = true // वर्तमान स्थिति के सापेक्ष
    layer.add(bounce, forKey: nil)
}

CAAnimationGroup 2.0 की अवधि के साथ fade, scale और rotate को समानांतर में निष्पादित करता है। CAKeyframeAnimation path और calculationMode = .cubicPaced के साथ स्वचालित रोटेशन (rotationMode = .auto) के साथ Bezier वक्र के साथ समान गति प्रदान करता है। bounceAnimation सापेक्ष ऑफ़सेट के लिए isAdditive का उपयोग करता है।

Swift कोड उदाहरण

सामग्री स्विचिंग के लिए CATransition और पल्स प्रभावों के लिए CAAnimationGroup का उपयोग करके जटिल लेयर एनिमेशन का एक पूर्ण CAAnimation उदाहरण।

import UIKit
import QuartzCore

class AnimationDemoView: UIView {

    private let demoLayer = CALayer()
    private var currentColor: CGColor = UIColor.systemBlue.cgColor

    override func layoutSubviews() {
        super.layoutSubviews()
        demoLayer.frame = CGRect(x: bounds.midX - 40, y: bounds.midY - 40,
                                 width: 80, height: 80)
        demoLayer.backgroundColor = currentColor
        demoLayer.cornerRadius = 12
        layer.addSublayer(demoLayer)
    }

    func animateTransition() {
        // CATransition — अवस्थाओं के बीच संक्रमण
        let transition = CATransition()
        transition.type = .fade
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        demoLayer.add(transition, forKey: nil)

        // लेन-देन के माध्यम से सामग्री बदलना
        currentColor = currentColor == UIColor.systemBlue.cgColor
            ? UIColor.systemRed.cgColor
            : UIColor.systemBlue.cgColor
        demoLayer.backgroundColor = currentColor
    }

    func startPulse() {
        let scaleUp = CABasicAnimation(keyPath: "transform.scale")
        scaleUp.fromValue = 1.0
        scaleUp.toValue = 1.3

        let fadeOut = CABasicAnimation(keyPath: "opacity")
        fadeOut.fromValue = 1.0
        fadeOut.toValue = 0.6

        let glow = CABasicAnimation(keyPath: "shadowOpacity")
        glow.fromValue = 0.0
        glow.toValue = 0.8

        let group = CAAnimationGroup()
        group.animations = [scaleUp, fadeOut, glow]
        group.duration = 1.2
        group.autoreverses = true
        group.repeatCount = .infinity
        group.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

        demoLayer.add(group, forKey: "pulse")
    }

    func stopAnimations() {
        demoLayer.removeAllAnimations()
        demoLayer.transform = CATransform3DIdentity
        demoLayer.opacity = 1.0
        demoLayer.shadowOpacity = 0.0
    }
}

type: .fade के साथ CATransition दो backgroundColor अवस्थाओं के बीच एक सहज संक्रमण बनाता है। CAAnimationGroup पल्स प्रभाव के लिए scale, opacity और shadowOpacity को जोड़ता है। removeAllAnimations() सभी एनिमेशन रद्द करता है और लेयर को उसके मूल मॉडल लेयर मानों पर लौटाता है।