Core Animation: əsaslar, CALayer və iOS-da animasiya

Core Animation nədir?

Core Animation – Mac OS X 10.5 Leopard (2007) ilə ortaya çıxmış və iPhone OS-in (2007) ilk versiyasından iOS-a port edilmiş Apple-ın qrafik freymvorkudur. Core Animation təbəqələrin (CALayer) GPU-da kompozisiyasını, animasiyasını və renderini idarə edir. iOS-da hər UIView-in daxili CALayer (view.layer) var və bütün render onun vasitəsilə baş verir.

Core Animation implicit animation prinsipi ilə işləyir: CALayer xassələrindəki bəzi dəyişikliklər avtomatik animasiya olunur (position, bounds, opacity, backgroundColor üçün CABasicAnimation-i animasiya edir). Implicit-animasiyalar standart olaraq 0,25 saniyə müddət və easeInOut əyrisi ilə CATransaction-dan istifadə edir.

Apple WWDC 2024 məlumatlarına görə, Core Animation ProMotion cihazlarında Metal-dan GPU renderi üçün istifadə edərək 120 FPS-ə qədər işləyir. Yaddaşda tipik təbəqənin ölçüsü piksel başına 4 bayt (RGBA) + təbəqə başına ~100 bayt əlavə yükdür. Stabil 60 FPS üçün ekranda 1000-dən çox təbəqə olmaması tövsiyə olunur.

CALayer arxitekturası

CALayer – Core Animation-ın əsasıdır. Hər CALayer bitmap məzmunu (və ya GPU toxumasına istinad) ehtiva edir və həndəsəni (bounds, position, anchorPoint, transform, cornerRadius, borderWidth, shadow) təyin edir. Təbəqə toxunma hadisələrini idarə etmir – buna UIView/UIScrollView cavabdehdir. Təbəqələr görünüş iyerarxiyasını əks etdirən iyerarxiya (layer tree) təşkil edir.

Core Animation üç təbəqə ağacını dəstəkləyir: model layer tree (faktiki xassələr), presentation layer tree (animasiya zamanı cari göstərim) və render tree (GPU üçün məlumatlar). Presentation layer real vaxtda animasiyanın aralıq dəyərlərini oxumaq üçün istifadə olunur.

CALayer növləri

CALayer-in ixtisaslaşmış alt sinifləri var: CAShapeLayer (vektor qrafikası), CAGradientLayer (gradient), CATextLayer (mətn), CATiledLayer (plitələrə bölünmüş böyük şəkillər), CAEAGLLayer/MetalLayer (OpenGL/Metal). CAShapeLayer CGPath dəstəyi və strokeStart/strokeEnd animasiyası sayəsində fərdi animasiya üçün ən populyardır.

CABasicAnimation – xassələrin əsas animasiyası

CABasicAnimation – CAAnimation-ın alt sinfi, CALayer-in bir xassəsini başlanğıc dəyərdən (fromValue) son dəyərə (toValue) və ya nisbi dəyişikliyə (byValue) qədər animasiya edir. Animasiya layer.add(animation, forKey:) metodu ilə təbəqəyə əlavə olunur və hər kadrda tətbiqin iştirakı olmadan render server-də icra olunur.

Açar (keyPath) – xassəni göstərən sətir: opacity, position, bounds, transform.rotation.z, cornerRadius, shadowOpacity və s. Core Animation 60+ animasiya olunan keyPath dəstəkləyir. Fərdi xassələr üçün CATransaction və presentation layer istifadə olunur.

import QuartzCore

// CABasicAnimation opacity və cornerRadius üçün
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. Şəffaflıq animasiyası
    let fadeAnim = CABasicAnimation(keyPath: "opacity")
    fadeAnim.fromValue = 1.0
    fadeAnim.toValue = 0.2
    fadeAnim.duration = 2.0
    fadeAnim.autoreverses = true
    fadeAnim.repeatCount = .infinity

    // 2. Künclərin yuvarlaqlaşdırılması animasiyası
    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 ilə position animasiyası
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-i yeniləyirik
}

Vacib: CABasicAnimation müvəqqəti göstərimdir (presentation layer). Animasiya bitdikdən sonra təbəqə model layer-in ilkin dəyərlərinə qayıdır. Son vəziyyəti saxlamaq üçün isRemovedOnCompletion = false, fillMode = .forwards təyin edin və model layer-i son dəyərlərə yeniləyin.

CATransaction – animasiyaların qruplaşdırılması

CATransaction – Core Animation animasiyalarının vahid transaksiyada qruplaşdırılması mexanizmidir. CATransaction.begin() və CATransaction.commit() transaksiyanın sərhədlərini təyin edir. Transaksiya daxilində ümumi parametrlər təyin oluna bilər: duration, timingFunction, completionBlock, disableActions. CATransaction CALayer-in implicit-animasiyalarının əsasıdır.

Implicit animation CALayer xassəsi animasiya blokundan kənarda dəyişdirildikdə işləyir: layer.opacity = 0.5. Core Animation avtomatik olaraq cari CATransaction-dan duration ilə CABasicAnimation yaradır (standart 0,25 s). Implicit-animasiyanı söndürmək üçün CATransaction.setDisableActions(true) istifadə edin.

// CATransaction – qruplaşdırma və completion
func groupedAnimation() {
    CATransaction.begin()
    CATransaction.setAnimationDuration(1.5)
    CATransaction.setAnimationTimingFunction(
        CAMediaTimingFunction(name: .easeOut)
    )
    CATransaction.setCompletionBlock {
        print("All animations completed")
    }

    // Transaksiya daxilində bütün dəyişikliklər 1.5 müddəti ilə animasiya olunur
    layer1.opacity = 0.3
    layer2.position = CGPoint(x: 200, y: 300)
    layer3.backgroundColor = UIColor.systemRed.cgColor

    CATransaction.commit()
}

// Implicit-animasiyanın söndürülməsi
func updateWithoutAnimation() {
    CATransaction.begin()
    CATransaction.setDisableActions(true)
    layer.frame = newFrame // animasiyasız
    CATransaction.commit()
}

// CAShapeLayer xassələrinin animasiyası
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-də kod nümunələri

Core Animation UIView təbəqəsi vasitəsilə UIKit ilə inteqrasiya olunur. Aşağıdakı nümunə CAShapeLayer-in animasiyasını göstərir – qövs uzunluğu animasiyası və CABasicAnimation vasitəsilə təbəqənin fırlanması ilə dairəvi tərəqqi çubuğu.

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 xassəsini 0-dan 1-ə qədər animasiya edərək dairəvi tərəqqi çubuğunun „doldurulma" effektini yaradır. 0.6 müddəti və easeOut ilə CATransaction animasiyanı hamar edir. layer.lineCap = .round daha səliqəli görünüş üçün xəttin yuvarlaq uclarını əlavə edir.