CAAnimation — asosiy tushunchalar, CAAnimationGroup va qatlam animatsiyalari

CAAnimation nima?

CAAnimation — barcha animatsiyalar uchun umumiy interfeysni belgilaydigan abstrakt Core Animation klassi. U CAMediaTiming (vaqt, takrorlash, avtomatik qaytarish) va CAMediaTimingFillMode (animatsiyadan oldin/keyin xatti-harakat) protokollarini amalga oshiradi. CAAnimation to‘g‘ridan-to‘g‘ri yaratilmaydi — quyidagi pastki sinflardan birini ishlating: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition yoki CAAnimation (animationForKeyPath orqali).

Har bir CAAnimation CALayer-ga add(_:forKey:) metodi orqali qo‘shiladi. forKey parametri qatlamdagi animatsiyaning noyob identifikatoridir. Xuddi shu keyPath faqat bitta faol animatsiyaga ega bo‘lishi mumkin. Animatsiyani almashtirish uchun yangisini qo‘shishdan oldin removeAnimation(forKey:) dan foydalaning.

Apple ga ko‘ra, CAAnimation qatlamning vaqtinchalik o‘zgarishidir. Animatsiya tugagandan so‘ng, agar fillMode va isRemovedOnCompletion o‘rnatilmagan bo‘lsa, presentation layer model layer qiymatlariga qaytadi.

CAAnimation sinf iyerarxiyasi

Core Animation CAAnimation ning to‘rtta asosiy pastki sinfini taqdim etadi, har biri o‘z animatsiya stsenariysi uchun. Iyerarxiyani tushunish vazifa uchun to‘g‘ri turni tanlashga yordam beradi.

CABasicAnimation — eng sodda va mashhur pastki sinf. CAKeyframeAnimation murakkab traektoriyalar (masalan, Bezier egri chizig‘i bo‘ylab harakat) uchun ishlatiladi. CAAnimationGroup bir nechta animatsiyalarni parallel ishga tushiradi. CATransition — tasvirlar yoki kontent holatlari o‘rtasida tayyor o‘tish.

CAMediaTiming — vaqtni boshqarish

CAMediaTiming protokoli — CAAnimation ning asosiy qismi. U asosiy vaqt xususiyatlarini belgilaydi: duration (davomiylik), repeatCount (takrorlashlar soni), repeatDuration (takrorlashlarning umumiy davomiyligi), autoreverses (boshiga qaytish), beginTime (ota-onaga nisbatan boshlanish vaqti), timeOffset (bir sikl ichida siljish), speed (ijro tezligi).

fillMode xususiyati (CAMediaTimingFillMode) animatsiyadan oldin (backwards) va keyin (forwards) qatlamning ko‘rinishini belgilaydi. Qiymatlar: removed (standart — model layer ga qaytish), forwards (yakuniy holatda qoladi), backwards (boshlashdan oldin boshlang‘ich holatni ko‘rsatadi), both (ikkala xatti-harakatni birlashtiradi). fillMode faqat isRemovedOnCompletion = false bo‘lganda ishlaydi.

CAAnimation CAMediaTiming ni meros oladi va ota-ona animatsiyasiga (CAAnimationGroup) joylashtirilishi mumkin. Bunday holda, beginTime ota-onaning boshlanishiga nisbatan hisoblanadi va duration ota-ona tomonidan cheklanadi. Speed = 2.0 animatsiyani ikki barobar tezlashtiradi.

CAAnimationGroup va CAKeyframeAnimation

CAAnimationGroup bir nechta CAAnimation ni bitta guruhga birlashtiradi. Agar har biri uchun beginTime o‘rnatilmagan bo‘lsa, barcha bolali animatsiyalar parallel ishga tushadi. Guruhning o‘z duration i bor, u bolali animatsiyalarning maksimal davomiyligini cheklaydi. Guruhning timingFunction i, agar bolali animatsiya o‘zini o‘rnatmagan bo‘lsa, standart qiymat sifatida qo‘llaniladi.

CAKeyframeAnimation values massivi bilan belgilangan bir nechta kalit kadrlar bo‘yicha xususiyatni animatsiyalaydi. keyTimes parametri (0 dan 1 gacha NSNumber massivi) har bir kadr uchun vaqt belgilarini belgilaydi. calculationMode interpolyatsiyani belgilaydi: linear, discrete (interpolyatsiyasiz), paced (bir xil tezlik), cubic (splayn), cubicPaced.

import QuartzCore

// CAAnimationGroup — animatsiyalar kombinatsiyasi
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 — traektoriya bo‘ylab harakat
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 maxsus qiymatlar bilan
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 // joriy pozitsiyaga nisbatan
    layer.add(bounce, forKey: nil)
}

CAAnimationGroup duration 2.0 bilan fade, scale va rotate ni parallel bajaradi. path va calculationMode = .cubicPaced bilan CAKeyframeAnimation avtomatik aylanish (rotationMode = .auto) bilan Bezier egri chizig‘i bo‘ylab bir xil harakatni ta’minlaydi. bounceAnimation nisbiy siljish uchun isAdditive dan foydalanadi.

Swift-da kod misollari

Kontentni o‘zgartirish uchun CATransition va pulsatsiya uchun CAAnimationGroup dan foydalanadigan murakkab qatlam animatsiyasining to‘liq CAAnimation namunasi.

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 — holatlar o‘rtasida o‘tish
        let transition = CATransition()
        transition.type = .fade
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        demoLayer.add(transition, forKey: nil)

        // Kontentni tranzaksiya orqali o‘zgartirish
        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 bilan CATransition ikkita backgroundColor holati o‘rtasida silliq o‘tish yaratadi. CAAnimationGroup pulsatsiya effekti uchun scale, opacity va shadowOpacity ni birlashtiradi. removeAllAnimations() barcha animatsiyalarni tiklaydi va qatlamni model layer ning asl qiymatlariga qaytaradi.