UIView.animate: nedir, iOS'ta UIView özelliklerinin animasyonu

UIView.animate Nedir?

UIView.animate, iOS 4'te (2010) tanıtılan UIView sınıfının statik bir yöntemidir. UIView'in canlandırılabilir özelliklerini (frame, bounds, center, alpha, transform, backgroundColor) canlandırmak için bildirimsel bir API sağlar. Yöntem, özellik değişiklikleri içeren bir blok (kapanış) kabul eder — sistem, değiştirilen her özellik için otomatik olarak CABasicAnimation oluşturur.

Blok sözdizimi, eski beginAnimations/commitAnimations'ın (iOS 2-3) yerini aldı ve UIKit'te animasyon standardı haline geldi. UIView.animate animasyonları ana iş parçacığında çalışır ve kullanıcı arayüzünü engellemez. Varsayılan olarak, animasyon süresi easeInOut eğrisi ile 0.25 saniyedir.

Apple WWDC 2023'e göre, yeni projelerde önerilen animasyon yaklaşımı .animation() ve .transition() değiştiricileri ile SwiftUI'dir, ancak UIView.animate, iOS 16 ve altı desteğinin yanı sıra karmaşık özel geçişler için ana araç olmaya devam etmektedir.

Animasyon Parametreleri ve Seçenekleri

UIView.animate üç ana parametre sağlar: duration (saniye cinsinden süre), delay (başlamadan önce gecikme) ve options (UIView.AnimationOptions bit maskeleri seti). Options şunları içerir: curve (easeInOut, easeIn, easeOut, linear), repeat, autoreverse, allowUserInteraction, beginFromCurrentState ve overrideInheritedDuration.

options parametresi bir dizi ile birleştirilir: [.curveEaseOut, .repeat, .autoreverse]. repeat ve autoreverse ile animasyon, View'i başlangıç durumuna yumuşak bir şekilde döndürür ve süresiz olarak tekrarlar. Sınırlı sayıda tekrar için animateKeyframes kullanın.

UIView.animate ile Spring Animasyonu

Spring animasyonu fiziksel bir yay efekti ekler: nesne yalnızca A noktasından B'ye gitmekle kalmaz, sönümlü salınımlarla hedefi aşar. Parametreler: usingSpringWithDamping (sönümleme 0-1, 0 maksimum salınım) ve initialSpringVelocity (başlangıç yay hızı).

Apple, doğal UI animasyonları için 0.4-0.8 aralığında usingSpringWithDamping önermektedir. 0.5 değeri, "lastik gibi" hissettirmeden belirgin bir sıçrama oluşturur. initialSpringVelocity = 1.0, 1 pt/sn hıza karşılık gelir. 0'da animasyon durma noktasından başlar.

// Spring ve keyframe animasyonu örneği
import UIKit

class AnimatedView: UIView {

    func springBounce() {
        // Sönümlemeli spring animasyonu
        UIView.animate(
            withDuration: 0.8,
            delay: 0,
            usingSpringWithDamping: 0.5,
            initialSpringVelocity: 1.0,
            options: [.allowUserInteraction],
            animations: {
                self.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
                self.alpha = 0.7
            },
            completion: { _ in
                UIView.animate(withDuration: 0.3) {
                    self.transform = .identity
                    self.alpha = 1.0
                }
            }
        )
    }

    func slideIn(from offset: CGFloat) {
        self.transform = CGAffineTransform(translationX: offset, y: 0)
        self.alpha = 0.0

        UIView.animate(
            withDuration: 0.6,
            delay: 0.1,
            options: [.curveEaseOut]
        ) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

Keyframe Animasyonu

UIView.animateKeyframes, bir animasyonu birden çok adıma (keyframe) bölmenize olanak tanır; her adımın kendi göreceli süresi ve zamanı vardır. addKeyframe(withRelativeStartTime:relativeDuration:) yöntemi, toplam animasyon süresine göre 0 ile 1 arasında zaman değerleri kabul eder.

Keyframe animasyonları çok aşamalı efektler için kullanışlıdır: düğme nabzı (büyüme → duraklama → dönüş), sıralı öğe görünümü, ara durumlarla karmaşık deformasyonlar. Her keyframe, options aracılığıyla kendi animasyon eğrisine sahip olabilir.

// Karmaşık dizili keyframe animasyonu
func complexPulse() {
    UIView.animateKeyframes(withDuration: 2.0, delay: 0, options: [.repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
            self.alpha = 0.5
        }
        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
            self.alpha = 0.8
        }
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

// İç içe kapanışlarla animasyon
func animateCardTransition() {
    UIView.animate(withDuration: 0.4, delay: 0, options: [.curveEaseOut]) {
        self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
    } completion: { _ in
        UIView.animate(withDuration: 0.3, delay: 0, options: [.curveEaseIn]) {
            self.transform = .identity
        }
    }
}

İç Yapı: Core Animation Perde Arkası

Perde arkasında, UIView.animate, Core Animation (CAAnimation) aracılığıyla her UIView'in CALayer'ına animasyonu devreder. Animasyon bloğu içinde frame'i değiştirdiğinizde, sistem ilgili katmanın position ve bounds özellikleri için CABasicAnimation oluşturur. Alpha değiştirilirse — katmanın opacity özelliği için CABasicAnimation oluşturur.

Core Animation, animasyonları 120 Hz'de (ProMotion) işleyen ayrı bir işleme sunucusu süreci (iOS'ta backboardd) kullanır. UIView.animate ana iş parçacığını engellemez — özellik değişiklikleri, uygulama katılımı olmadan kareleri enterpolasyon yapan işleme sunucusuna gönderilir.

Apple'a göre, UIView.animate aracılığıyla animasyonların 60 FPS'de değiştirilen katman başına ~%2-3 CPU yükü vardır. Toplu animasyonlar (aynı anda 20+ nesne) için CATransaction ve manuel katman yönetimi kullanılması önerilir.

UIKit animasyonlarında hata ayıklama ve görselleştirme için Xcode Debug View Hierarchy kullanın — her katmandaki aktif CAAnimations'ları, sürelerini, eğrilerini ve mevcut durumlarını gösterir. Core Animation'ın iç yapısını anlamak, karmaşık animasyonlarda performans sorunlarını önlemeye ve UIView.animate ile CABasicAnimation'ın doğrudan kullanımı arasında en uygun yaklaşımı seçmeye yardımcı olur.