Animation in der mobilen Entwicklung: Was es ist, welche Arten es gibt und wie man sie nutzt

Animation in Android: Property Animation und View Animation

Android bietet zwei Hauptanimationssysteme: View Animation (veraltet) und Property Animation (modern). View Animation (oder Tween Animation) arbeitet nur mit der visuellen Darstellung — sie ändert die Anzeige der View, aber nicht ihre tatsächlichen Eigenschaften (z. B. bleiben die Klickkoordinaten an Ort und Stelle). Property Animation, eingeführt in Android 3.0, ändert reale Objekteigenschaften über Animator — ValueAnimator, ObjectAnimator oder AnimatorSet.

ObjectAnimator und ValueAnimator

ObjectAnimator ist die beliebteste Klasse der Property Animation. Sie animiert eine bestimmte Objekteigenschaft (z. B. translationX, alpha, scaleY) über eine angegebene Zeit mit einem bestimmten Interpolator.

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

ValueAnimator ist nicht an ein bestimmtes Objekt gebunden — er generiert Werte, die für jede Eigenschaft oder benutzerdefinierte Logik verwendet werden können.

View Animation und XML-Animationen

View Animation wird in XML-Dateien res/anim/ beschrieben. Vier Typen werden unterstützt: scale, translate, rotate, alpha. Der Nachteil ist, dass die Animation keine realen View-Parameter ändert. Für einfache Effekte (Blinken, Drehen) ist View Animation immer noch anwendbar, aber für neue Projekte wird Property Animation empfohlen.

Animation in Jetpack Compose

Jetpack Compose bietet eine moderne Animations-API: animateAsState, Animatable, AnimatedVisibility und AnimatedContent. Animation in Compose ist reaktiv: Wenn sich der Zustand ändert, startet die Animation automatisch.

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

Animation in iOS: Core Animation und UIView.animate

iOS bietet einen leistungsstarken Animations-Stack basierend auf Core Animation — einem Low-Level-Framework, das mit CALayer arbeitet. UIKit baut auf Core Animation mit praktischen UIView.animate- und UIViewPropertyAnimator-Methoden auf.

UIView.animate

UIView.animate ist der einfachste Weg, in iOS zu animieren. Ermöglicht das Animieren von frame, alpha, transform, backgroundColor und anderen UIView-Eigenschaften.

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — ein Framework für physikalische Animationen: Schwerkraft, Kollisionen, Federn, Anziehungskräfte. Ermöglicht die Erstellung realistischen Objektverhaltens ohne manuelle Physikberechnung. Wird für benutzerdefinierte Übergänge, animierte Menüs und Spielelemente verwendet.

CAAnimation und Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — eine Low-Level-API für CALayer-Animation. Unterstützt 3D-Transformationen, Pfadanimation (Keyframe), Maskierung und Komposition. SwiftUI verwendet Core Animation unter der Haube durch die Modifikatoren animation und withAnimation.

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

Für die meisten iOS-Projekte wird SwiftUI mit seiner integrierten Animation verwendet. Zum Beispiel withAnimation kapselt Zustandsänderungen in einen animierten Kontext.

Vektoranimation: Lottie und Rive

Komplexe Animationen (Figuren, Übergänge, Ladeanzeigen) sind mit Code schwer zu implementieren. Lottie und Rive lösen dieses Problem, indem sie Designern ermöglichen, Animationen in visuellen Editoren zu erstellen und Entwicklern, sie als fertige Komponente in die App einzubetten.

Lottie

Lottie — eine Bibliothek von Airbnb (jetzt LottieFiles), die Animationen aus Adobe After Effects rendert, die im JSON-Format exportiert wurden. Unterstützt auf Android, iOS, Flutter, React Native und Web. Lottie-Animationen sind vektorbasiert, skalieren ohne Qualitätsverlust und können programmgesteuert angepasst werden (Geschwindigkeit, Fortschritt, Farben).

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive (früher 2Dimensions) — ein fortschrittlicheres Werkzeug für Vektoranimationen. Im Gegensatz zu Lottie unterstützt Rive interaktive Animationen: Zustände, Auslöser, Übergänge. Die Animation wird im Rive Editor erstellt und in der App über eine State Machine gesteuert. Rive eignet sich für Spieloberflächen, animierte Symbole und komplexe Übergänge mit Rückmeldung.

Bei IT Sectr verwenden wir Lottie für dekorative Animationen (Ladeanzeigen, erfolgreiche Vorgänge, leere Zustände) und Rive für interaktive Elemente von Onboarding-Bildschirmen. Dies reduziert die Entwicklungszeit für Animationen um 60% im Vergleich zur manuellen Implementierung mit UIKit oder Canvas.

Shared Element Transition und Hero Animation

Shared Element Transition — eine Animation, bei der ein Element (Bild, Text, Karte) beim Übergang zwischen Bildschirmen sanft bewegt und transformiert wird. Dies erzeugt die Illusion von Kontinuität: Der Benutzer "geht" nicht zu einem neuen Bildschirm, sondern "taucht" in das Element ein.

Android Shared Element Transition

In Android wird der Übergang über ActivityOptionsCompat und transitionName-Attribute implementiert. FragmentTransaction unterstützt addSharedElement für Übergänge innerhalb einer Activity. Compose verwendet SharedTransitionLayout mit SharedContentState.

iOS Hero Transition

iOS hat keinen eingebauten Hero Transition, aber die Bibliothek Hero (von Luke Zhao) implementiert dieses Muster auf UIKit. Weisen Sie einfach eine ID zu Elementen auf beiden Bildschirmen zu — Hero erstellt automatisch einen fließenden Übergang. In SwiftUI ist die Übergangsanimation in NavigationStack und matchedGeometryEffect integriert.

Flutter Hero

Flutter hat ein eingebautes Hero-Widget mit einem tag-Parameter. Wenn zwei Seiten Hero mit demselben Tag enthalten, animiert Flutter automatisch den Übergang zwischen ihnen. Dies ist eine der einfachsten Möglichkeiten, komplexe Animationen in einer mobilen Anwendung zu implementieren.

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation, Interpolator und Easing

Damit eine Animation natürlich aussieht, werden Geschwindigkeitskurven verwendet — Interpolator in Android und Easing in iOS. Sie bestimmen, wie sich die Animationsgeschwindigkeit von Anfang bis Ende ändert.

Android Interpolators

Android unterstützt mehrere eingebaute Interpolatoren: LinearInterpolator (gleichmäßig), AccelerateDecelerateInterpolator (langsam-schnell-langsam), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (mit Überschwingen) und BounceInterpolator (mit Zurückfedern). Ein benutzerdefinierter Interpolator kann über XML oder die TimeInterpolator-Klasse erstellt werden.

Spring Animation

Spring Animation (Federanimation) modelliert die Federphysik mit den Parametern Dämpfung (damping) und Steifigkeit (stiffness). Dämpfung 0 — unendliche Schwingungen, 1 — keine Schwingungen. Steifigkeit bestimmt die Rücklaufgeschwindigkeit. Spring Animation ist verfügbar in iOS (UIViewPropertyAnimator mit UISpringTimingParameters), Android (SpringAnimation aus physics2) und SwiftUI (spring()).

Die Dokumentation Spring Animation in Android enthält detaillierte Konfigurationsbeispiele.

Zeitleisten-Animation

Timeline (Zeitleiste) — ein Ansatz, bei dem die Animation in zeitliche Frames aufgeteilt wird. Wird für komplexe Sequenzen verwendet, bei denen AnimationSet oder Group-Animation nicht flexibel genug sind. Android unterstützt AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval in AnimationController.