UIView.animate: wat is het, animatie van UIView-eigenschappen in iOS

Wat is UIView.animate?

UIView.animate — een statische methode van de UIView-klasse, geïntroduceerd in iOS 4 (2010). Het biedt een declaratieve API voor het animeren van animeerbare eigenschappen van UIView: frame, bounds, center, alpha, transform, backgroundColor. De methode accepteert een blok (closure) met eigenschapswijzigingen — het systeem maakt automatisch CABasicAnimation aan voor elke gewijzigde eigenschap.

De bloksyntax verving de oude beginAnimations/commitAnimations (iOS 2-3) en werd de standaard voor animaties in UIKit. UIView.animate-animaties worden uitgevoerd op de hoofdthread en blokkeren de UI niet. Standaard is de animatieduur 0.25 seconden met een easeInOut-curve.

Volgens Apple WWDC 2023 is de aanbevolen manier van animeren in nieuwe projecten SwiftUI met .animation() en .transition()-modifiers, maar UIKit.animate blijft het belangrijkste hulpmiddel voor ondersteuning van iOS 16 en lager, evenals voor complexe aangepaste overgangen.

Parameters en opties van animatie

UIView.animate biedt drie belangrijke parameters: duration (duur in seconden), delay (vertraging voor start) en options (set bitmaskers UIView.AnimationOptions). Options omvatten curve (easeInOut, easeIn, easeOut, linear), repeat (herhaling), autoreverse (automatische omkering), allowUserInteraction, beginFromCurrentState en overrideInheritedDuration.

De parameter options wordt gecombineerd via een array: [.curveEaseOut, .repeat, .autoreverse]. Animatie met repeat en autoreverse brengt de View soepel terug naar de beginstaat en herhaalt zich oneindig. Voor een beperkt aantal herhalingen gebruikt u animateKeyframes.

Spring-animatie via UIView.animate

Spring-animatie voegt een fysiek veereffect toe: het object gaat niet alleen van punt A naar B, maar vliegt over het doel heen met uitdempende oscillaties. Parameters: usingSpringWithDamping (demping 0-1, waarbij 0 maximale oscillaties) en initialSpringVelocity (beginsnelheid van de veer).

Apple beveelt usingSpringWithDamping aan in het bereik 0.4-0.8 voor natuurlijke UI-animaties. Waarde 0.5 creëert een merkbare terugvering zonder rubberachtig gevoel. initialSpringVelocity = 1.0 komt overeen met een snelheid van 1 pt/sec. Bij 0 start de animatie vanuit rusttoestand.

// Voorbeeld van spring- en keyframe-animatie
import UIKit

class AnimatedView: UIView {

    func springBounce() {
        // Spring-animatie met demping
        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-animatie

UIView.animateKeyframes maakt het mogelijk de animatie op te splitsen in meerdere stappen (keyframes), elk met zijn eigen relatieve tijd en duur. De methode addKeyframe(withRelativeStartTime:relativeDuration:) accepteert tijds waarden van 0 tot 1 ten opzichte van de totale animatieduur.

Keyframe-animaties zijn nuttig voor meerstapseffecten: knop pulsatie (vergroting → pauze → terugkeer), sequentiële verschijning van elementen, complexe vervormingen met tussenliggende toestanden. Elk keyframe kan zijn eigen animatiecurve hebben via options.

// Keyframe-animatie met complexe sequentie
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
        }
    }
}

// Animatie met geneste closures
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
        }
    }
}

Interne werking: Core Animation onder de motorkap

Onder de motorkap delegeert UIView.animate de animatie naar de CALayer van elke UIView via Core Animation (CAAnimation). Wanneer u frame wijzigt binnen het animatieblok, maakt het systeem CABasicAnimation aan voor de eigenschappen position en bounds van de overeenkomstige laag. Als alpha wordt gewijzigd — CABasicAnimation voor de eigenschap opacity van de laag.

Core Animation gebruikt een apart render server-proces (backboardd op iOS) dat animaties verwerkt op 120 Hz (ProMotion). UIView.animate blokkeert de hoofdthread niet — eigenschapswijzigingen worden naar de render server gestuurd, die frames interpoleert zonder tussenkomst van de app.

Volgens Apple hebben animaties via UIView.animate een overhead van ~2-3% CPU per gewijzigde laag bij 60 FPS. Voor massa-animaties (20+ objecten tegelijk) wordt het gebruik van CATransaction en handmatig laagbeheer aanbevolen.

Gebruik Xcode Debug View Hierarchy voor het debuggen en visualiseren van UIKit-animaties — het toont actieve CAAnimations op elke laag, hun duur, curve en huidige status. Inzicht in de interne werking van Core Animation helpt prestatieproblemen bij complexe animaties te voorkomen en de optimale aanpak te kiezen tussen UIView.animate en direct gebruik van CABasicAnimation.