UIView.animate: vad är det, animation av UIView-egenskaper i iOS

Vad är UIView.animate?

UIView.animate — en statisk metod i UIView-klassen, introducerad i iOS 4 (2010). Den tillhandahåller ett deklarativt API för animering av animerbara UIView-egenskaper: frame, bounds, center, alpha, transform, backgroundColor. Metoden tar emot ett block (slutning) med egenskapsändringar — systemet skapar automatiskt CABasicAnimation för varje ändrad egenskap.

Blocksyntaxen ersatte den gamla beginAnimations/commitAnimations (iOS 2-3) och blev standard för animation i UIKit. UIView.animate-animationer körs på huvudtråden och blockerar inte UI. Som standard är animationstiden 0.25 sekunder med easeInOut-kurva.

Enligt Apple WWDC 2023 är det rekommenderade sättet att animera i nya projekt SwiftUI med .animation() och .transition()-modifierare, men UIKit.animate förblir det huvudsakliga verktyget för stöd av iOS 16 och äldre, samt för komplexa anpassade övergångar.

Parametrar och alternativ för animation

UIView.animate tillhandahåller tre nyckelparametrar: duration (varaktighet i sekunder), delay (fördröjning före start) och options (uppsättning bitmasker UIView.AnimationOptions). Options omfattar curve (easeInOut, easeIn, easeOut, linear), repeat (upprepning), autoreverse (automatisk omvändning), allowUserInteraction, beginFromCurrentState och overrideInheritedDuration.

Parametern options kombineras via en array: [.curveEaseOut, .repeat, .autoreverse]. Animation med repeat och autoreverse återställer smidigt View till ursprungsläget och upprepar oändligt. För ett begränsat antal upprepningar, använd animateKeyframes.

Fjäderanimation via UIView.animate

Fjäderanimation lägger till en fysisk fjädereffekt: objektet går inte bara från punkt A till B, utan överskjuter målet med dämpade oscillationer. Parametrar: usingSpringWithDamping (dämpning 0-1, där 0 — maximala oscillationer) och initialSpringVelocity (fjäderns initiala hastighet).

Apple rekommenderar usingSpringWithDamping i intervallet 0.4-0.8 för naturliga UI-animationer. Värdet 0.5 skapar en märkbar studs utan gummikänsla. initialSpringVelocity = 1.0 motsvarar en hastighet på 1 pt/sek. Vid 0 startar animationen från vilotillstånd.

// Exempel på fjäder- och keyframe-animation
import UIKit

class AnimatedView: UIView {

    func springBounce() {
        // Fjäderanimation med dämpning
        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-animation

UIView.animateKeyframes gör det möjligt att dela upp animationen i flera steg (keyframes), var och en med sin egen relativa tid och varaktighet. Metoden addKeyframe(withRelativeStartTime:relativeDuration:) accepterar tidsvärden från 0 till 1 i förhållande till den totala animationstiden.

Keyframe-animationer är användbara för flerstegseffekter: knapppulsering (förstoring → paus → återgång), sekventiell uppkomst av element, komplexa deformationer med mellanliggande tillstånd. Varje keyframe kan ha sin egen animationskurva via options.

// Keyframe-animation med komplex sekvens
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
        }
    }
}

// Animation med nästlade slutningar
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
        }
    }
}

Intern struktur: Core Animation under huven

Under huven delegerar UIView.animate animationen till CALayer för varje UIView via Core Animation (CAAnimation). När du ändrar frame inuti animationsblocket, skapar systemet CABasicAnimation för egenskaperna position och bounds för motsvarande lager. Om alpha ändras — CABasicAnimation för egenskapen opacity för lagret.

Core Animation använder en separat render server-process (backboardd på iOS) som bearbetar animationer vid 120 Hz (ProMotion). UIView.animate blockerar inte huvudtråden — egenskapsändringar skickas till render servern, som interpolerar bildrutor utan appens deltagande.

Enligt Apple har animationer via UIView.animate en overhead på ~2-3% CPU per ändrat lager vid 60 FPS. För massanimationer (20+ objekt samtidigt) rekommenderas användning av CATransaction och manuell lagerhantering.

För felsökning och visualisering av UIKit-animationer, använd Xcode Debug View Hierarchy — den visar aktiva CAAnimations på varje lager, deras varaktighet, kurva och aktuella tillstånd. Förståelse av Core Animations interna struktur hjälper till att undvika prestandaproblem vid komplexa animationer och välja den optimala metoden mellan UIView.animate och direkt användning av CABasicAnimation.