Core Animation: temeller, CALayer ve iOS’ta animasyon

Core Animation Nedir?

Core Animation, Mac OS X 10.5 Leopard’da (2007) tanıtılan ve iPhone OS’un (2007) ilk sürümüyle iOS’a taşınan Apple’ın grafik çerçevesidir. Core Animation, GPU’da katmanların (CALayer) kompozisyonunu, animasyonunu ve oluşturulmasını yönetir. iOS’taki her UIView, tüm çizimin gerçekleştiği yerleşik bir CALayer’a (view.layer) sahiptir.

Core Animation, örtük animasyon ilkesiyle çalışır: bazı CALayer özellik değişiklikleri otomatik olarak canlandırılır (position, bounds, opacity, backgroundColor için CABasicAnimation). Örtük animasyonlar varsayılan olarak 0,25 saniye süre ve easeInOut eğrisiyle CATransaction kullanır.

Apple WWDC 2024’e göre Core Animation, ProMotion cihazlarda 120 FPS’ye kadar işlem yapar ve GPU oluşturma için Metal kullanır. Tipik bir katmanın bellek ayak izi piksel başına 4 bayt (RGBA) + katman başına ~100 bayt ek yüktür. Kararlı 60 FPS için ekranda 1000’den fazla katman olmaması önerilir.

CALayer Mimarisi

CALayer, Core Animation’ın temelidir. Her CALayer, bitmap içeriği (veya GPU doku referansı) içerir ve geometriyi (bounds, position, anchorPoint, transform, cornerRadius, borderWidth, shadow) tanımlar. Katmanlar dokunma olaylarını işlemez — UIView/UIScrollView bunu halleder. Katmanlar, görünüm hiyerarşisini yansıtan bir hiyerarşi (layer tree) oluşturur.

Core Animation üç katman ağacını yönetir: model layer tree (gerçek özellikler), presentation layer tree (animasyon sırasında geçerli görüntü) ve render tree (GPU verileri). Sunum katmanı, gerçek zamanlı ara animasyon değerlerini okumak için kullanılır.

CALayer Türleri

CALayer’ın özelleşmiş alt sınıfları vardır: CAShapeLayer (vektör grafikleri), CAGradientLayer (gradyan), CATextLayer (metin), CATiledLayer (döşemelere bölünmüş büyük görseller), CAEAGLLayer/MetalLayer (OpenGL/Metal). CAShapeLayer, CGPath desteği ve strokeStart/strokeEnd animasyonu sayesinde özel animasyon için en popülerdir.

CABasicAnimation — Temel Özellik Animasyonu

CABasicAnimation, CAAnimation’ın bir alt sınıfıdır ve tek bir CALayer özelliğini başlangıç değerinden (fromValue) bitiş değerine (toValue) veya göreceli bir değişimle (byValue) canlandırır. Animasyon, layer.add(animation, forKey:) aracılığıyla katmana eklenir ve her karede uygulama katılımı olmadan işleme sunucusunda çalışır.

Anahtar (keyPath), özelliği belirten bir dizedir: opacity, position, bounds, transform.rotation.z, cornerRadius, shadowOpacity vb. Core Animation, 60’tan fazla canlandırılabilir keyPath’i destekler. Özel özellikler için CATransaction ve sunum katmanı kullanılır.

import QuartzCore

// opacity ve cornerRadius için 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. Opaklık animasyonu
    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öşe yarıçapı animasyonu
    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 ile position animasyonu
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 güncelleniyor
}

Önemli: CABasicAnimation geçici bir görüntüdür (presentation layer). Animasyon tamamlandıktan sonra katman, model layer değerlerine geri döner. Son durumu dondurmak için isRemovedOnCompletion = false, fillMode = .forwards olarak ayarlayın ve model layer’ı son değerlere güncelleyin.

CATransaction — Animasyonları Gruplama

CATransaction, Core Animation animasyonlarını tek bir işlemde gruplamak için bir mekanizmadır. CATransaction.begin() ve CATransaction.commit() işlem sınırlarını tanımlar. Bir işlem içinde ortak parametreler ayarlanabilir: duration, timingFunction, completionBlock, disableActions. CATransaction, CALayer örtük animasyonlarının temelidir.

Örtük animasyon, bir CALayer özelliği animasyon bloğu dışında değiştirildiğinde meydana gelir: layer.opacity = 0,5. Core Animation, geçerli CATransaction’dan (varsayılan 0,25 s) süre ile otomatik olarak bir CABasicAnimation oluşturur. Örtük animasyonu devre dışı bırakmak için CATransaction.setDisableActions(true) kullanın.

// CATransaction — gruplama ve tamamlama
func groupedAnimation() {
    CATransaction.begin()
    CATransaction.setAnimationDuration(1.5)
    CATransaction.setAnimationTimingFunction(
        CAMediaTimingFunction(name: .easeOut)
    )
    CATransaction.setCompletionBlock {
        print("All animations completed")
    }

    // İşlem içindeki tüm değişiklikler süre 1.5 ile canlandırılır
    layer1.opacity = 0.3
    layer2.position = CGPoint(x: 200, y: 300)
    layer3.backgroundColor = UIColor.systemRed.cgColor

    CATransaction.commit()
}

// Örtük animasyon devre dışı bırakılıyor
func updateWithoutAnimation() {
    CATransaction.begin()
    CATransaction.setDisableActions(true)
    layer.frame = newFrame // animasyonsuz
    CATransaction.commit()
}

// CAShapeLayer özellikleri canlandırılıyor
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 Kod Örnekleri

Core Animation, UIView katmanı aracılığıyla UIKit ile entegre olur. Aşağıdaki örnek, CAShapeLayer animasyonunu gösterir — yay uzunluğu animasyonu ve CABasicAnimation aracılığıyla katman dönüşü ile dairesel bir ilerleme.

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 özelliğini 0’dan 1’e canlandırarak dairesel ilerleme “doldurma” etkisi yaratır. 0,6 süre ve easeOut ile CATransaction, animasyonu pürüzsüz hale getirir. layer.lineCap = .round, daha temiz bir görünüm için çizgi uçlarını yuvarlar.