Transition: Grundlagen, Übergangsanimationen in mobilen Apps

Was ist Transition?

Transition ist eine Animation, die beim Ersetzen eines visuellen Oberflächenzustands durch einen anderen auftritt. Im Gegensatz zur Property Animation (Animation einer Eigenschaft eines einzelnen Objekts) verwaltet Transition eine ganze Reihe von Änderungen: Erscheinen/Verschwinden von Elementen, Ändern ihrer Position, Größe und Eigenschaften innerhalb eines einzigen Übergangs. Transition löst das Problem des sanften Inhaltswechsels, sodass der Benutzer versteht, was sich wohin bewegt hat.

Auf mobilen Plattformen wird Transition in drei Hauptszenarien verwendet: Navigation zwischen Bildschirmen (push, pop, modal present), Fragmentwechsel (Android FragmentTransaction) und Zustandsänderungen innerhalb eines Bildschirms (Kartenerweiterung, Tab-Wechsel). Jedes Szenario erfordert seinen eigenen Ansatz: Navigationsübergänge — UIViewControllerAnimatedTransitioning in iOS oder ActivityOptions in Android, bildschirminterne Übergänge — Transition Framework oder UIView.transition.

Laut Apple HIG (2026) sollte die Dauer eines Standardübergangs 400–500 ms nicht überschreiten — längere Animationen werden als Verzögerung wahrgenommen. Material Design empfiehlt 300–350 ms für mobile Übergänge. Bei großen Elementen (Karten, Bilder) kann die Zeit auf 500–600 ms erhöht werden, ohne dass die wahrgenommene Leistung leidet.

Arten von Übergangsanimationen

Übergangstypen werden je nachdem, welcher Inhalt sich wie ändert, in mehrere Kategorien unterteilt. Grundtypen: Cross-fade — sanftes Verschwinden des einen und Erscheinen des anderen; Slide — ein Bildschirm fährt hinaus, ein anderer fährt hinein; Scale/Zoom — ein Element vergrößert sich und öffnet einen Detailbildschirm. Kombinierte Übergänge mischen mehrere Effekte.

Material Design Regeln: Verwenden Sie einen Übergangstyp innerhalb einer App, um eine einheitliche visuelle Sprache zu schaffen. Empfohlen: Slide für die Navigation zwischen Bildschirmen derselben Ebene (Master → Detail), Cross-fade für Inhaltswechsel innerhalb eines Bildschirms (Tabs, Ansichtswechsel), Scale/Zoom für den Übergang von einer Karte zu einem Detailbildschirm (Produktkarte → Beschreibung).

Übergänge in iOS (Swift)

In iOS ist UIView.transition die einfachste Möglichkeit, Inhaltsänderungen innerhalb einer einzelnen View zu animieren. Es unterstützt Cross-dissolve, Curl-up, Curl-down, Flip-from-left, Flip-from-right. Für Navigationsübergänge zwischen UIViewController verwenden Sie UINavigationControllerDelegate mit UIViewControllerAnimatedTransitioning — dies gibt volle Kontrolle über die Push/Pop-Animation.

import UIKit

// UIView.transition: Bildwechsel mit Cross-dissolve
UIView.transition(with: imageView,
    duration: 0.4,
    options: [.transitionCrossDissolve, .curveEaseInOut]
) {
    self.imageView.image = UIImage(named: "new_image")
} completion: { _ in
    print("Transition completed")
}

// UIView.transition: Austausch zweier Views
UIView.transition(from: firstView, to: secondView,
    duration: 0.5,
    options: [.transitionFlipFromRight, .showHideTransitionViews]
) { _ in
    // firstView ausgeblendet, secondView angezeigt
}

// CATransition für Ebene (ohne Auto Layout)
let transition = CATransition()
transition.type = .push
transition.subtype = .fromRight
transition.duration = 0.35
transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
view.layer.add(transition, forKey: "pushTransition")

UIViewPropertyAnimator ist eine moderne Alternative für benutzerdefinierte Übergänge unter iOS 10+. Im Gegensatz zu UIView.transition unterstützt PropertyAnimator Pause, Abbruch und umgekehrte Animation, was für interaktive Übergänge (Wischen zum Zurückgehen) wichtig ist. Für die Animation zwischen UIViewControllers verwenden Sie UIPercentDrivenInteractiveTransition zusammen mit PropertyAnimator — dies ist das Standardmuster für interaktive Navigation.

Übergänge in Android (Kotlin)

In Android ist FragmentTransaction mit setCustomAnimations die wichtigste Methode, um Übergänge zwischen Fragmenten zu animieren. Parameter: enter (Animation für das Eintreten des neuen Fragments), exit (Animation für das Austreten des alten Fragments), popEnter und popExit — für die Rückwärtsnavigation. FragmentTransaction unterstützt Animationsressourcen (R.anim) und Transition Framework (R.transition).

import androidx.fragment.app.FragmentTransaction
import androidx.transition.TransitionInflater

// FragmentTransaction mit Ressourcen-Animationen
supportFragmentManager.beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in_right,  // enter
        R.anim.slide_out_left,  // exit
        R.anim.slide_in_left,   // popEnter
        R.anim.slide_out_right  // popExit
    )
    .replace(R.id.container, DetailFragment())
    .addToBackStack(null)
    .commit()

// FragmentTransaction mit Transition Framework
val detailFragment = DetailFragment()
detailFragment.enterTransition = TransitionInflater.from(this)
    .inflateTransition(R.transition.slide_right)
detailFragment.exitTransition = TransitionInflater.from(this)
    .inflateTransition(R.transition.fade_out)

supportFragmentManager.beginTransaction()
    .replace(R.id.container, detailFragment)
    .addToBackStack(null)
    .commit()

// ActivityOptions: Animation beim Start einer Activity
val options = ActivityOptions.makeScaleUpAnimation(
    view, 0, 0, view.width, view.height
).toBundle()
startActivity(intent, options)

Android Best Practices: Slide() — für Fragment-Ersetzung in der Navigation (enter = Slide(Gravity.END), exit = Slide(Gravity.START)). Fade() — zum Ein-/Ausblenden von Overlays und Dialogen. Explode() — für Akzentübergänge (Löschen eines Elements aus einer Liste). Für ältere Geräte (API < 21) verwenden Sie R.anim-Ressourcen als Fallback. Transition Framework unterstützt keine SurfaceView, TextureView, GLSurfaceView — für Video und Kamera verwenden Sie nur R.anim-Animationen.

Benutzerdefinierte UIViewController-Übergänge in iOS

UIViewControllerAnimatedTransitioning ist ein iOS-Protokoll zum Erstellen vollständig benutzerdefinierter View-Controller-Übergangsanimationen. Es bietet Zugriff auf die Container-View (transitionContext.containerView), die Quell- und Ziel-Views. In Kombination mit UIPercentDrivenInteractiveTransition ermöglicht dieser Ansatz die Erstellung interaktiver Übergänge mit Finger-Scrolling.

import UIKit

"> Benutzerdefinierte Übergangs-Animation
class ScaleTransitionAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    let isPresenting: Bool

    init(presenting: Bool) { self.isPresenting = presenting }

    func transitionDuration(using ctx: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.4
    }

    func animateTransition(using ctx: UIViewControllerContextTransitioning) {
        guard let toView = ctx.view(forKey: .to),
              let fromView = ctx.view(forKey: .from)
        else { return }

        let container = ctx.containerView
        let initialScale: CGAffineTransform = CGAffineTransform(scaleX: 0.8, y: 0.8)
        let finalFrame = ctx.finalFrame(for: toView)

        if isPresenting {
            toView.transform = initialScale
            toView.alpha = 0
            toView.frame = finalFrame
            container.addSubview(toView)
        }

        UIView.animate(withDuration: transitionDuration(using: ctx),
                       delay: 0,
                       usingSpringWithDamping: 0.7,
                       initialSpringVelocity: 0.3) {
            if self.isPresenting {
                toView.transform = .identity
                toView.alpha = 1
                fromView.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
                fromView.alpha = 0
            } else {
                fromView.transform = initialScale
                fromView.alpha = 0
            }
        } completion: { _ in
            fromView.transform = .identity
            ctx.completeTransition(!ctx.transitionWasCancelled)
        }
    }
}

// Anwendung in UINavigationControllerDelegate
extension MainViewController: UINavigationControllerDelegate {
    func navigationController(
        _ nc: UINavigationController,
        animationControllerFor operation: UINavigationController.Operation,
        from: UIViewController, to: UIViewController
    ) -> UIViewControllerAnimatedTransitioning? {
        return ScaleTransitionAnimator(presenting: operation == .push)
    }
}

Interaktive Übergänge: Fügen Sie einen UIPanGestureRecognizer zum Quellbildschirm hinzu. Wenn die Geste ausgelöst wird, erstellen Sie eine UIPercentDrivenInteractiveTransition und rufen Sie update(CGFloat(percent)) auf. Zum Abbrechen, wenn der Schwellenwert (normalerweise 30%) nicht erreicht wird, rufen Sie cancel() auf. Dieses Muster wird standardmäßig in UINavigationController für Pop-Gesten und in UIScrollView mit pagingEnabled verwendet. Für benutzerdefinierte Gesten implementieren Sie UIViewControllerInteractiveTransitioning.

Transition Framework in Android: Szene zu Szene

Transition Framework (android.transition) ist ein deklaratives Animationssystem, das Änderungen zwischen zwei Szenen (Scene) automatisch animiert. Eine Szene ist eine Gruppe von Views mit einem bestimmten Zustand. Beim Übergang von Szene A zu Szene B analysiert Transition Framework den Unterschied und animiert: Positionsänderung (ChangeBounds), Größenänderung (ChangeClipBounds, ChangeTransform), Erscheinen (Fade) und Verschwinden (Fade).

import android.transition.Scene
import android.transition.TransitionManager
import android.transition.TransitionSet
import android.transition.AutoTransition
import android.transition.ChangeBounds
import android.transition.Fade

// TransitionSet: Kombination von ChangeBounds + Fade
val transition = TransitionSet().apply {
    ordering = TransitionSet.ORDERING_TOGETHER
    addTransition(ChangeBounds())
    addTransition(Fade(Fade.IN))
    duration = 400L
    interpolator = FastOutSlowInInterpolator()
}

// Übergang zwischen Szenen in einem ViewGroup
val sceneRoot = findViewById<ViewGroup>(R.id.scene_root)
val scene1 = Scene.getSceneForLayout(sceneRoot, R.layout.scene_initial)
val scene2 = Scene.getSceneForLayout(sceneRoot, R.layout.scene_expanded)

"> AutoTransition ohne manuelle Konfiguration
TransitionManager.go(scene2, AutoTransition().apply {
    duration = 350L
})

// TransitionManager.beginDelayedTransition — ohne Szenen
TransitionManager.beginDelayedTransition(sceneRoot, ChangeBounds())
itemView.layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT
itemView.requestLayout() "> Layout-Änderung wird automatisch animiert

ChangeBounds ist der am häufigsten verwendete Übergang in Android. Er animiert Positions- und Größenänderungen von Views. ChangeTransform animiert Rotation und Skalierung. ChangeImageTransform — für ImageView-Animation (centerCrop → fitCenter). Für komplexe Übergänge mit Änderungen der Hierarchiestruktur verwenden Sie TransitionSet mit ordering = ORDERING_SEQUENTIAL (Animationen werden nacheinander ausgeführt, nicht parallel). Laut der Dokumentation von Android Developers (2026) unterstützt Transition Framework alle Standard-Views, aber keine Oberflächenanimation (SurfaceView, TextureView, VideoView).