UIView.animate: apa itu, animasi properti UIView di iOS

Apa itu UIView.animate?

UIView.animate — metode statis dari kelas UIView, diperkenalkan di iOS 4 (2010). Ini menyediakan API deklaratif untuk menganimasikan properti UIView yang dapat dianimasi: frame, bounds, center, alpha, transform, backgroundColor. Metode ini menerima blok (penutupan) dengan perubahan properti — sistem secara otomatis membuat CABasicAnimation untuk setiap properti yang diubah.

Sintaks blok menggantikan beginAnimations/commitAnimations lama (iOS 2-3) dan menjadi standar animasi di UIKit. Animasi UIView.animate dijalankan di thread utama dan tidak memblokir UI. Secara default, durasi animasi adalah 0,25 detik dengan kurva easeInOut.

Menurut data Apple WWDC 2023, cara yang direkomendasikan untuk animasi di proyek baru adalah SwiftUI dengan pengubah .animation() dan .transition(), tetapi UIKit.animate tetap menjadi alat utama untuk dukungan iOS 16 dan yang lebih lama, serta untuk transisi kustom yang kompleks.

Parameter dan opsi animasi

UIView.animate menyediakan tiga parameter kunci: duration (durasi dalam detik), delay (penundaan sebelum mulai) dan options (kumpulan masker bit UIView.AnimationOptions). Options mencakup curve (easeInOut, easeIn, easeOut, linear), repeat (pengulangan), autoreverse (putaran otomatis), allowUserInteraction, beginFromCurrentState dan overrideInheritedDuration.

Parameter options digabungkan melalui array: [.curveEaseOut, .repeat, .autoreverse]. Animasi dengan repeat dan autoreverse mengembalikan View ke keadaan awal dengan mulus dan berulang tanpa batas. Untuk jumlah pengulangan terbatas, gunakan animateKeyframes.

Animasi spring melalui UIView.animate

Animasi spring menambahkan efek pegas fisik: objek tidak hanya berpindah dari titik A ke B, tetapi melampaui target dengan osilasi yang mereda. Parameter: usingSpringWithDamping (peredaman 0-1, di mana 0 — osilasi maksimum) dan initialSpringVelocity (kecepatan awal pegas).

Apple merekomendasikan usingSpringWithDamping dalam kisaran 0,4-0,8 untuk animasi UI alami. Nilai 0,5 menciptakan pantulan yang terlihat tanpa rasa karet. initialSpringVelocity = 1,0 sesuai dengan kecepatan 1 pt/detik. Pada 0, animasi dimulai dari keadaan diam.

// Contoh animasi spring dan keyframe
import UIKit

class AnimatedView: UIView {

    func springBounce() {
        // Animasi spring dengan peredaman
        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
        }
    }
}

Animasi keyframe

UIView.animateKeyframes memungkinkan pembagian animasi menjadi beberapa langkah (keyframes), masing-masing dengan waktu relatif dan durasinya sendiri. Metode addKeyframe(withRelativeStartTime:relativeDuration:) menerima nilai waktu dari 0 hingga 1 relatif terhadap total durasi animasi.

Animasi keyframe berguna untuk efek multi-langkah: denyut tombol (pembesaran → jeda → kembali), kemunculan berurutan elemen, deformasi kompleks dengan keadaan antara. Setiap keyframe dapat memiliki kurva animasinya sendiri melalui options.

// Animasi keyframe dengan urutan kompleks
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
        }
    }
}

// Animasi dengan penutupan bersarang
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
        }
    }
}

Struktur internal: Core Animation di balik layar

Di balik layar, UIView.animate mendelegasikan animasi ke CALayer setiap UIView melalui Core Animation (CAAnimation). Saat Anda mengubah frame di dalam blok animasi, sistem membuat CABasicAnimation untuk properti position dan bounds dari lapisan yang sesuai. Jika alpha diubah — CABasicAnimation untuk properti opacity lapisan.

Core Animation menggunakan proses render server terpisah (backboardd di iOS) yang memproses animasi pada frekuensi 120 Hz (ProMotion). UIView.animate tidak memblokir thread utama — perubahan properti dikirim ke render server, yang menginterpolasi bingkai tanpa partisipasi aplikasi.

Menurut Apple, animasi melalui UIView.animate memiliki overhead ~2-3% CPU untuk setiap lapisan yang diubah pada 60 FPS. Untuk animasi massal (20+ objek secara bersamaan) disarankan menggunakan CATransaction dan manajemen lapisan manual.

Untuk debugging dan visualisasi animasi UIKit, gunakan Xcode Debug View Hierarchy — ini menunjukkan CAAnimations aktif pada setiap lapisan, durasi, kurva, dan status saat ini. Memahami struktur internal Core Animation membantu menghindari masalah kinerja pada animasi kompleks dan memilih pendekatan optimal antara UIView.animate dan penggunaan langsung CABasicAnimation.