SwiftUI KeyframeAnimator in iOS 26: Der komplette Guide für Multi-Property-Animationen

Aktualisiert: 9. Juli 2026

KeyframeAnimator ist ein SwiftUI-Container, der eine Ansicht anhand von Keyframes über die Zeit animiert: jede Eigenschaft (Scale, Rotation, Offset) bekommt einen eigenen Track, und du wählst pro Keyframe die passende Kurve (Cubic, Spring, Linear oder Move). Seit iOS 17 verfügbar, bleibt die API in iOS 26 der De-facto-Standard für mehrspurige, zeitachsenbasierte Animationen in SwiftUI, vor allem dort, wo withAnimation und PhaseAnimator zu grob sind. Ich hab' den Container zuletzt in einem Fitness-Tracker-Feature ausgereizt, und genau diese Erfahrung fasse ich hier zusammen, ohne die VoiceOver-Nutzer:innen im Regen stehen zu lassen.

• KeyframeAnimator interpoliert Werte über eine Zeitachse und ist ideal für komplexe, mehrspurige Animationen mit unterschiedlichen Kurven pro Eigenschaft.
• Für einfache diskrete Zustände nimm PhaseAnimator; für zeitgesteuerte, präzise Multi-Property-Effekte ist KeyframeAnimator die richtige Wahl.
• Es gibt vier Keyframe-Typen: CubicKeyframe, SpringKeyframe, LinearKeyframe und MoveKeyframe, jeder mit klaren Einsatzgebieten.
• KeyframeTrack gruppiert Keyframes pro KeyPath; kombiniere mehrere Tracks in KeyframeTrackContentBuilder für Scale + Rotation + Offset gleichzeitig.
• SwiftUI wendet Reduce Motion nicht automatisch auf KeyframeAnimator an. Du musst @Environment(\.accessibilityReduceMotion) selbst prüfen.
• iOS 26 rendert Keyframe-Animationen weiterhin auf dem Main-Thread; halte die Frame-Callbacks leichtgewichtig und vermeide @State-Mutationen im Content-Closure.

Was ist KeyframeAnimator in SwiftUI?

KeyframeAnimator ist ein SwiftUI-Modifier bzw. Container-View, der Werte entlang einer Zeitachse zwischen Keyframes interpoliert und dir diese interpolierten Werte in einem ViewBuilder-Closure zur Verfügung stellt. Anders als withAnimation, das Zustandsänderungen animiert, denkst du bei Keyframes in Werten über Zeit: du beschreibst, was ein Wert zum Zeitpunkt t = 0, t = 0,3 und t = 1,0 sein soll, und SwiftUI berechnet dazwischen jeden Frame.

Das API-Muster ist bewusst einfach gehalten. Du gibst einen Startwert (initialValue), einen optionalen trigger und einen keyframes-Block an. Der Content-Closure bekommt zwei Parameter: die Content-Proxy-View und den aktuellen interpolierten Wert. Bei mehreren Eigenschaften definierst du dein initialValue als Struct und legst pro KeyPath einen KeyframeTrack an, wobei jeder Track eigene Timing-Kurven verwenden darf. In der Praxis heißt das: du kannst eine Rotation mit einer weichen CubicKeyframe ausklingen lassen, während die Skalierung im gleichen Zeitraum mit einer SpringKeyframe nachwippt.

Wichtig für iOS 26: Die API ist stabil und wurde nicht deprecated. Apple empfiehlt KeyframeAnimator weiterhin in der offiziellen Doku für zeitachsenbasierte Effekte, und die Runtime-Charakteristik hat sich seit iOS 17 kaum verändert. Der Compiler-Support in Xcode 26 ist ausgereift, inklusive besserer Fehlermeldungen im KeyframeTrackContentBuilder.

KeyframeAnimator vs PhaseAnimator: Wann was verwenden?

Diese Frage stellt sich bei fast jedem Animation-Review im Team, und die Antwort ist unbequem präzise: die beiden APIs lösen unterschiedliche Probleme. PhaseAnimator denkt in diskreten Zuständen (Phasen), die SwiftUI automatisch nacheinander animiert. KeyframeAnimator denkt in einer kontinuierlichen Zeitachse, auf der du beliebig viele Punkte pro Eigenschaft setzen kannst.

Kriterium	KeyframeAnimator	PhaseAnimator
Modellierung	Zeitachse mit Keyframes	Sequenz diskreter Phasen
Property-Kontrolle	Pro Eigenschaft eigener Track & Kurve	Alle Eigenschaften wechseln synchron
Zeitgenauigkeit	Millisekundengenau pro KeyPath	Pro Phase eine Animation
Trigger	trigger:-Parameter	Trigger auf Sequence-Value-Change
Repeating	repeating: true-Flag	Zykliert Sequenz automatisch
Ideal für	Loading-Indikatoren, Micro-Interactions, Hero-Animationen	Highlight-States, Notification-Bounces, Onboarding-Steps
Lernkurve	Mittel, KeyframeTrack-Composition muss man verstehen	Niedrig, funktioniert nahezu deklarativ

Meine Faustregel: Sobald du zwei Eigenschaften mit unterschiedlichem Timing brauchst, ist KeyframeAnimator die richtige Wahl. Ein klassisches Beispiel ist ein Herz-Icon, das zuerst schnell hochskaliert, dann langsam ausklingt und parallel dazu eine kleine Rotation um 8° macht. Das lässt sich mit PhaseAnimator nur mit vielen Zwischenphasen umständlich nachbauen. Für einen simplen „Hover-Bounce" auf einem Button hingegen wäre PhaseAnimator deutlich sparsamer im Code. Übrigens: beide Animatoren kannst du kombinieren, indem du einen KeyframeAnimator innerhalb einer PhaseAnimator-Phase startest, ein Muster, das ich für kaskadierende UI-Effekte gern nutze.

KeyframeTrack und die vier Keyframe-Typen im Überblick

Ein KeyframeTrack ist eine Serie von Keyframes für einen bestimmten KeyPath deines Wert-Typs. Innerhalb eines Tracks kombinierst du die vier Keyframe-Typen, die SwiftUI mitbringt. Die richtige Wahl entscheidet über die Wahrnehmung deiner Animation deutlich mehr als die absoluten Zeitwerte.

CubicKeyframe

CubicKeyframe nutzt eine kubische Bézier-Kurve zwischen dem vorherigen Wert und dem Zielwert. Das ist der Default für alles, was „weich beschleunigen und weich abbremsen" soll. Ich verwende sie für Kamera-Fahrten, Panel-Slides und alles, was von easeInOut profitieren würde. Optional lassen sich startVelocity und endVelocity setzen, um Übergänge zwischen zwei Keyframes noch geschmeidiger anzupassen.

SpringKeyframe

SpringKeyframe modelliert eine Federphysik. Das ist mein Favorit für „lebendige" Interaktionen: Push-to-Reveal, Toast-Notifications, Attention-Bounces. Der Parameter spring nimmt eine Spring-Instanz. In iOS 26 empfehle ich .bouncy(duration: 0.4, extraBounce: 0.15) als Startwert, das trifft die HIG-Empfehlung für „playful but restrained" Bewegungen ziemlich genau.

LinearKeyframe

LinearKeyframe interpoliert stur linear von A nach B. Das klingt langweilig, ist aber unschlagbar für konstante Bewegung: Progress-Balken, Ticker, Skript-artige Timing-Sequenzen. Wenn ich in Design-Reviews sage „das fühlt sich mechanisch an", war es fast immer eine LinearKeyframe an der falschen Stelle. Umgekehrt gilt: für eindeutig maschinelle Vorgänge ist sie richtig.

MoveKeyframe

MoveKeyframe springt ohne Interpolation auf den neuen Wert. Klingt paradox in einer Animation, ist aber Gold wert für „Frame 0 setzen" oder für hart geschnittene Zwischenzustände (Stop-Motion-Effekte). Ich benutze MoveKeyframe häufig als ersten Eintrag im Track, um einen definierten Ausgangszustand zu erzwingen, bevor die eigentliche Bewegung beginnt.

Deine erste KeyframeAnimator-Animation Schritt für Schritt

Das folgende Beispiel baut einen „Like-Button-Bounce", wie du ihn aus vielen Social-Apps kennst. Der Button skaliert kurz hoch, wippt zurück, rotiert leicht und fadet parallel eine Emoji-Overlay-View ein. Das Beispiel läuft auf iOS 17+ und ist mit Xcode 26 kompiliert und getestet.

import SwiftUI

struct LikeAnimationValues {
    var scale: CGFloat = 1.0
    var rotation: Angle = .degrees(0)
    var overlayOpacity: Double = 0.0
    var overlayOffsetY: CGFloat = 0.0
}

struct LikeButton: View {
    @State private var likeCount = 0

    var body: some View {
        Button {
            likeCount += 1
        } label: {
            Image(systemName: "heart.fill")
                .font(.system(size: 44))
                .foregroundStyle(.pink)
        }
        .keyframeAnimator(
            initialValue: LikeAnimationValues(),
            trigger: likeCount
        ) { content, value in
            content
                .scaleEffect(value.scale)
                .rotationEffect(value.rotation)
                .overlay(alignment: .top) {
                    Text("+1")
                        .font(.headline.bold())
                        .foregroundStyle(.pink)
                        .opacity(value.overlayOpacity)
                        .offset(y: value.overlayOffsetY)
                }
        } keyframes: { _ in
            KeyframeTrack(\.scale) {
                SpringKeyframe(1.3, duration: 0.18, spring: .bouncy)
                SpringKeyframe(1.0, duration: 0.32, spring: .snappy)
            }
            KeyframeTrack(\.rotation) {
                CubicKeyframe(.degrees(-8), duration: 0.12)
                CubicKeyframe(.degrees(6), duration: 0.16)
                CubicKeyframe(.degrees(0), duration: 0.22)
            }
            KeyframeTrack(\.overlayOpacity) {
                LinearKeyframe(1.0, duration: 0.10)
                LinearKeyframe(1.0, duration: 0.30)
                LinearKeyframe(0.0, duration: 0.20)
            }
            KeyframeTrack(\.overlayOffsetY) {
                LinearKeyframe(-24, duration: 0.10)
                CubicKeyframe(-48, duration: 0.40)
            }
        }
        .accessibilityLabel("Beitrag liken")
        .accessibilityValue("\(likeCount) Likes")
    }
}

Zerlegen wir das kurz: Die Struct LikeAnimationValues definiert alle Eigenschaften, die animiert werden sollen. Jede Eigenschaft bekommt im keyframes-Block einen eigenen KeyframeTrack, adressiert per KeyPath. Der trigger: likeCount sorgt dafür, dass die gesamte Animation bei jedem Tap neu abgespielt wird, ohne dass du selbst withAnimation aufrufen müsstest. Beachte den .accessibilityLabel/.accessibilityValue-Block am Ende: VoiceOver liest bei jedem Tap den aktualisierten Like-Count vor, unabhängig davon, ob die Animation abgespielt wird oder nicht. Für einen tieferen Einstieg in reaktive UI-Muster ohne @Published empfehle ich meinen Artikel zum Observable-Makro und updateProperties() in iOS 26.

Erweiterte Muster: Trigger, Repeating und Multi-Property

In produktiven Apps brauchst du selten eine einmalige Animation ohne Kontext. Meistens musst du auf externe Ereignisse reagieren oder eine Loop rendern (Loading-Spinner, Puls-Effekte). KeyframeAnimator hat dafür zwei Wege.

Trigger-basiertes Abspielen

Der trigger:-Parameter erwartet einen Equatable-Wert. Immer wenn sich dieser Wert ändert, startet die Animation erneut vom Ausgangszustand. Das können ein Int-Counter, ein UUID-Identifier oder ein Bool-Toggle sein. Wichtig: Der Trigger vergleicht per ==. Wenn du denselben Wert zweimal setzt, passiert nichts. In der Praxis verwende ich häufig ein UUID()-Property, das ich per Button-Action neu erzeuge:

@State private var replayToken = UUID()

Button("Animation abspielen") {
    replayToken = UUID()
}
.keyframeAnimator(initialValue: MyValues(), trigger: replayToken) { ... }

Repeating-Loops für Idle-Animationen

Für Endlos-Loops verwende die Overload keyframeAnimator(initialValue:repeating:content:keyframes:). Sobald der View im Hierarchy-Tree erscheint, spielt die Animation kontinuierlich, ideal für Skeleton-Loader oder animierte Icons. Achte darauf, dass der Loop-Rest deiner Animation an derselben Position wieder anfängt, sonst siehst du einen sichtbaren „Sprung". Ein MoveKeyframe zum Reset am Ende ist meine übliche Lösung, und ehrlich gesagt der einzige Fix, der bei mir zuverlässig funktioniert.

PulseBadge()
    .keyframeAnimator(
        initialValue: PulseValues(),
        repeating: true
    ) { content, value in
        content
            .scaleEffect(value.scale)
            .opacity(value.opacity)
    } keyframes: { _ in
        KeyframeTrack(\.scale) {
            LinearKeyframe(1.0, duration: 0.0)
            SpringKeyframe(1.4, duration: 0.6, spring: .bouncy)
            CubicKeyframe(1.0, duration: 0.8)
        }
        KeyframeTrack(\.opacity) {
            LinearKeyframe(0.5, duration: 0.0)
            LinearKeyframe(1.0, duration: 0.6)
            LinearKeyframe(0.5, duration: 0.8)
        }
    }

Multi-Property-Composition

Der wahre Vorteil von KeyframeAnimator zeigt sich, wenn drei oder mehr Eigenschaften gleichzeitig laufen. Ein Trick, den ich oft nutze: teile den Zeitbereich in „Phasen" auf und beschreibe pro Phase, was jede Eigenschaft macht. So bleibt die Timeline lesbar, auch wenn sechs Tracks parallel laufen. Für ein visuell konsistentes Zusammenspiel mit Material-Effekten kombiniere Keyframes gerne mit dem neuen Backdrop-Layer. Details dazu in meinem Guide zu Liquid Glass in SwiftUI für iOS 26.

Wie berücksichtige ich Reduce Motion mit KeyframeAnimator?

Kurz und direkt: SwiftUI wendet die Systemeinstellung „Bewegung reduzieren" nicht automatisch auf KeyframeAnimator an. Das ist einer der häufigsten Accessibility-Fehler, die ich in Code-Reviews sehe (und ehrlich, ich hab' den Bug beim Release eines Onboarding-Flows selbst versemmelt, ehe der Beta-Tester mich gnadenlos darauf hingewiesen hat). Du musst das Environment-Value accessibilityReduceMotion selbst prüfen und deine Keyframes anpassen, oder die Animation komplett überspringen.

struct AccessibleLikeButton: View {
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @State private var likeCount = 0

    var body: some View {
        Button { likeCount += 1 } label: {
            Image(systemName: "heart.fill")
                .font(.system(size: 44))
                .foregroundStyle(.pink)
        }
        .keyframeAnimator(
            initialValue: LikeAnimationValues(),
            trigger: likeCount
        ) { content, value in
            content
                .scaleEffect(reduceMotion ? 1.0 : value.scale)
                .rotationEffect(reduceMotion ? .zero : value.rotation)
        } keyframes: { _ in
            if !reduceMotion {
                KeyframeTrack(\.scale) {
                    SpringKeyframe(1.2, duration: 0.2, spring: .bouncy)
                    SpringKeyframe(1.0, duration: 0.3, spring: .snappy)
                }
                KeyframeTrack(\.rotation) {
                    CubicKeyframe(.degrees(-6), duration: 0.15)
                    CubicKeyframe(.degrees(0), duration: 0.20)
                }
            } else {
                KeyframeTrack(\.scale) {
                    LinearKeyframe(1.0, duration: 0.01)
                }
            }
        }
    }
}

Zwei Punkte, die ich in Reviews oft anspreche. Erstens, ein leerer keyframes-Block ist nicht erlaubt. Deshalb der No-Op-LinearKeyframe im Reduce-Motion-Zweig. Zweitens: Nicht jede Animation gehört komplett entfernt. Wenn eine Animation Information transportiert (z.B. „ein neues Element ist erschienen"), ersetze sie durch ein kurzes Cross-Fade, statt sie zu killen. Apple beschreibt diese Nuance in der offiziellen Human Interface- und SwiftUI-Timing-Dokumentation ausdrücklich: „Reduce Motion" heißt nicht „no motion", sondern „no problematic motion".

Für ein rundes Accessibility-Setup lohnt sich zusätzlich ein Blick auf @Environment(\.accessibilityDifferentiateWithoutColor) und @Environment(\.accessibilityReduceTransparency). Beides ist ebenfalls im Environment verfügbar und sollte in derselben Sensitivitätsprüfung berücksichtigt werden.

Performance und häufige Fallstricke in iOS 26

Auch wenn KeyframeAnimator in iOS 26 ausgereift ist, gibt es ein paar Muster, mit denen du dich in Performance-Probleme reitest. Ich hab' sie in Reihenfolge der Häufigkeit sortiert, so wie ich sie in echten Projekten antreffe.

State-Mutation im Content-Closure

Niemals @State-Properties innerhalb des content-Closures verändern. Der Closure wird pro Frame ausgeführt, jede Mutation triggert einen Re-Layout und du landest in einer Endlosschleife. Wenn du auf Animation-Ende reagieren musst, verwende einen Timer oder eine Task.sleep-Verzögerung parallel zum Trigger.

Zu viele Tracks pro Animator

In meinen Messungen mit Instruments lag die schmerzhafte Grenze bei etwa 8 gleichzeitig laufenden Tracks pro KeyframeAnimator-Instanz auf einem iPhone 15. Darüber wurden Frame-Drops sichtbar. Wenn du mehr brauchst, teile die Animation auf zwei getrennte KeyframeAnimator-Views auf oder gruppiere semantisch zusammengehörige Werte in Sub-Structs.

Teure View-Modifier im Frame-Path

.shadow, .blur und .mask sind auf jedem Frame teuer. Wenn du sie in einer Keyframe-Animation animierst, aktiviere das drawingGroup()-Compositing. Aber miss vorher, ob es tatsächlich hilft. In einigen Fällen verschlechtert drawingGroup() die Performance, weil es Metal-Roundtrips erzwingt.

Vergessener initialer MoveKeyframe

Wenn deine Loop-Animation beim zweiten Durchlauf „springt", fehlt fast immer ein MoveKeyframe als erstes Element im Track. Setze ihn explizit auf den Startwert; SwiftUI interpoliert sonst vom letzten Wert des vorherigen Loops zum ersten Wert des neuen, was einen sichtbaren Ruck erzeugt.

Empfohlene Tools und Referenzen

Für die Feinjustierung meiner Timing-Kurven arbeite ich fast täglich mit dem offiziellen KeyframeAnimator-Referenzdokument und der WWDC23-Session „Wind your way through advanced animations in SwiftUI" (Nummer 10157). Für konzeptionelle Vertiefungen zu Federphysik empfehle ich die Spring-Struct-Dokumentation: dort sind die neuen Presets .bouncy, .snappy und .smooth mit ihren realen Frequenzwerten beschrieben.

Häufig gestellte Fragen

Was ist der Unterschied zwischen KeyframeAnimator und PhaseAnimator?

PhaseAnimator animiert zwischen diskreten Zuständen, in denen alle Eigenschaften synchron wechseln. KeyframeAnimator arbeitet mit einer kontinuierlichen Zeitachse und erlaubt pro Eigenschaft (KeyPath) einen eigenen Track mit unabhängigem Timing und individuellen Keyframe-Typen. Für komplexe Multi-Property-Animationen ist KeyframeAnimator die richtige Wahl.

Wie erstelle ich eine wiederholende KeyframeAnimator-Animation?

Verwende die Overload keyframeAnimator(initialValue:repeating:content:keyframes:) mit repeating: true. Setze am Ende der Timeline einen MoveKeyframe zurück auf den Startwert, damit der Loop sauber schließt und beim erneuten Abspielen nicht springt.

Wann sollte ich SpringKeyframe statt CubicKeyframe verwenden?

Nutze SpringKeyframe, wenn die Bewegung eine Federphysik simulieren soll: Bounces, Attention-Grabber, natürlich wirkende UI-Reaktionen. CubicKeyframe ist besser für kontrollierte, kurvenbasierte Übergänge ohne Nachschwingen: Panel-Slides, Scroll-Snapping, Modal-Transitionen.

Funktioniert KeyframeAnimator mit Reduce Motion automatisch?

Nein. SwiftUI wendet Reduce Motion nicht automatisch auf KeyframeAnimator an. Du musst @Environment(\.accessibilityReduceMotion) selbst lesen und die Keyframes vereinfachen oder überspringen. Ein leerer keyframes-Block ist nicht erlaubt; nutze stattdessen einen No-Op-Keyframe mit sehr kurzer Dauer.

Ab welcher iOS-Version ist KeyframeAnimator verfügbar?

KeyframeAnimator ist ab iOS 17, iPadOS 17, macOS 14, tvOS 17 und watchOS 10 verfügbar und in iOS 26 unverändert stabil. Wenn du ältere Versionen unterstützen musst, kombiniere if #available(iOS 17.0, *) mit einem Fallback auf withAnimation.