Core Animation: asoslar, CALayer va iOS-da animatsiya

Core Animation nima?

Core Animation Mac OS X 10.5 Leopard (2007) da paydo bo'lgan va iPhone OS (2007) ning birinchi versiyasidan iOS-ga ko'chirilgan Apple-ning grafik freymvorkidir. Core Animation qatlamlar (CALayer) kompozitsiyasi, animatsiyasi va renderini GPU-da boshqaradi. iOS dagi har bir UIView o'rnatilgan CALayer (view.layer) ga ega bo'lib, barcha render shu orqali amalga oshiriladi.

Core Animation implicit animation tamoyili bo'yicha ishlaydi: CALayer xususiyatlaridagi ba'zi o'zgarishlar avtomatik ravishda animatsiya qilinadi (position, bounds, opacity, backgroundColor uchun CABasicAnimation ni animatsiya qiladi). Implicit-animatsiyalar sukut bo'yicha 0.25 soniya davomiylik va easeInOut egri chizig'i bilan CATransaction dan foydalanadi.

Apple WWDC 2024 ma'lumotlariga ko'ra, Core Animation ProMotion qurilmalarida Metal dan GPU renderi uchun foydalanib, 120 FPS gacha ishlaydi. Xotiradagi odatdagi qatlam hajmi piksel boshiga 4 bayt (RGBA) + qatlam boshiga ~100 bayt qo'shimcha yuk. Barqaror 60 FPS uchun ekranda 1000 dan ortiq qatlam bo'lmasligi tavsiya etiladi.

CALayer arxitekturasi

CALayer Core Animation asosidir. Har bir CALayer bitmap kontentni (yoki GPU teksturasiga havolani) o'z ichiga oladi va geometriyani (bounds, position, anchorPoint, transform, cornerRadius, borderWidth, shadow) belgilaydi. Qatlam teginish hodisalarini qayta ishlamaydi buning uchun UIView/UIScrollView javobgardir. Qatlamlar view ierarxiyasini aks ettiruvchi ierarxiya (layer tree) hosil qiladi.

Core Animation uchta qatlam daraxtini qo'llab-quvvatlaydi: model layer tree (haqiqiy xususiyatlar), presentation layer tree (animatsiya paytidagi joriy ko'rinish) va render tree (GPU uchun ma'lumotlar). Presentation layer real vaqtda animatsiyaning oraliq qiymatlarini o'qish uchun ishlatiladi.

CALayer turlari

CALayer ixtisoslashgan pastki klasslarga ega: CAShapeLayer (vektor grafikasi), CAGradientLayer (gradient), CATextLayer (matn), CATiledLayer (plitkalarga bo'lingan katta tasvirlar), CAEAGLLayer/MetalLayer (OpenGL/Metal). CAShapeLayer CGPath qo'llab-quvvatlashi va strokeStart/strokeEnd animatsiyasi tufayli moslashtirilgan animatsiya uchun eng mashhurdir.

CABasicAnimation xususiyatlarning asosiy animatsiyasi

CABasicAnimation CAAnimation ning pastki klassi bo'lib, CALayer ning bitta xususiyatini boshlang'ich qiymatdan (fromValue) yakuniy qiymatgacha (toValue) yoki nisbiy o'zgarishgacha (byValue) animatsiya qiladi. Animatsiya layer.add(animation, forKey:) metodi orqali qatlamga qo'shiladi va har bir kadrda ilova ishtirokisiz render server-da bajariladi.

Kalit (keyPath) xususiyatni ko'rsatuvchi satr: opacity, position, bounds, transform.rotation.z, cornerRadius, shadowOpacity va boshqalar. Core Animation 60+ animatsiya qilinadigan keyPath ni qo'llab-quvvatlaydi. Moslashtirilgan xususiyatlar uchun CATransaction va presentation layer ishlatiladi.

import QuartzCore

// CABasicAnimation opacity va cornerRadius uchun
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. Shaffoflik animatsiyasi
    let fadeAnim = CABasicAnimation(keyPath: "opacity")
    fadeAnim.fromValue = 1.0
    fadeAnim.toValue = 0.2
    fadeAnim.duration = 2.0
    fadeAnim.autoreverses = true
    fadeAnim.repeatCount = .infinity

    // 2. Burchaklarni yumaloqlash animatsiyasi
    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 bilan position animatsiyasi
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 ni yangilaymiz
}

Muhim: CABasicAnimation vaqtinchalik ko'rinishdir (presentation layer). Animatsiya tugagach, qatlam model layer ning boshlang'ich qiymatlariga qaytadi. Yakuniy holatni saqlash uchun isRemovedOnCompletion = false, fillMode = .forwards ni o'rnating va model layer ni yakuniy qiymatlarga yangilang.

CATransaction animatsiyalarni guruhlash

CATransaction Core Animation animatsiyalarini bitta transaksiyada guruhlash mexanizmidir. CATransaction.begin() va CATransaction.commit() transaksiya chegaralarini belgilaydi. Transaksiya ichida umumiy parametrlar o'rnatilishi mumkin: duration, timingFunction, completionBlock, disableActions. CATransaction CALayer ning implicit-animatsiyalari asosidir.

Implicit animation CALayer xususiyati animatsiya blokidan tashqarida o'zgartirilganda ishlaydi: layer.opacity = 0.5. Core Animation avtomatik ravishda joriy CATransaction dan duration bilan CABasicAnimation yaratadi (sukut bo'yicha 0.25 s). Implicit-animatsiyani o'chirish uchun CATransaction.setDisableActions(true) dan foydalaning.

// CATransaction guruhlash va tugatish
func groupedAnimation() {
    CATransaction.begin()
    CATransaction.setAnimationDuration(1.5)
    CATransaction.setAnimationTimingFunction(
        CAMediaTimingFunction(name: .easeOut)
    )
    CATransaction.setCompletionBlock {
        print("All animations completed")
    }

    // Transaksiya ichidagi barcha o'zgarishlar 1.5 davomiylik bilan animatsiya qilinadi
    layer1.opacity = 0.3
    layer2.position = CGPoint(x: 200, y: 300)
    layer3.backgroundColor = UIColor.systemRed.cgColor

    CATransaction.commit()
}

// Implicit-animatsiyani o'chirish
func updateWithoutAnimation() {
    CATransaction.begin()
    CATransaction.setDisableActions(true)
    layer.frame = newFrame // animatsiyasiz
    CATransaction.commit()
}

// CAShapeLayer xususiyatlarining animatsiyasi
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-da kod misollari

Core Animation UIView qatlami orqali UIKit bilan integratsiyalanadi. Quyidagi misol CAShapeLayer animatsiyasini ko'rsatadi yoy uzunligi animatsiyasi va CABasicAnimation orqali qatlam aylanishi bilan dumaloq taraqqiyot chizig'i.

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 xususiyatini 0 dan 1 gacha animatsiya qilib, dumaloq taraqqiyot chizig'ining “to'ldirish” effektini yaratadi. 0.6 davomiylik va easeOut bilan CATransaction animatsiyani silliq qiladi. layer.lineCap = .round chiroyli ko'rinish uchun chiziqning yumaloq uchlarini qo'shadi.